Cómo agregar el widget de chat de Facebook en tu Página Web

Cómo agregar el widget de chat de Facebook en tu Página Web

Facebook Messenger, con más de mil millones de usuarios mensuales. permite a las marcas tener conversaciones uno a uno en tiempo real con sus clientes. Las empresas también pueden insertar botones de Facebook en Tu Página Web y los visitantes, ya sea que tengan una pregunta previa a la venta o necesiten resolver un problema, pueden iniciar una conversación con un simple clic de un botón.

El único inconveniente con los botones integrados es que los visitantes tendrán que salir de su sitio web para enviar un mensaje a través de Facebook Messenger. ¿No sería agradable si la gente pudiera permanecer en su sitio web y aún así poder enviarle mensajes a través de Facebook?

Bueno, eso es posible con la ayuda del widget de chat de Facebook (demo). El widget se encuentra en la esquina de la página y cuando alguien hace clic en el icono de Facebook Messenger, aparece una ventana de chat no intrusiva donde los visitantes pueden escribir y enviar un mensaje privado.

Incrustar Widget de chat de Facebook

Se necesita un paso fácil para integrar el widget de Facebook Chat en Tu Página Web.

Todo lo que tiene que hacer es copiar y pegar el código simple que se muestra a continuación en cualquier parte de la plantilla de su sitio web y agregará el widget a todas sus páginas. Recuerde reemplazar la palabra geekminds con el nombre de la pagina que utilizan, es la URL (nombre) de su propia página de Facebook.

 

<style>.fb-livechat,.fb-widget{display:none}.ctrlq.fb-button,.ctrlq.fb-close{position:fixed;right:24px;cursor:pointer}.ctrlq.fb-button{z-index:1;background:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDEyOCAxMjgiIGhlaWdodD0iMTI4cHgiIGlkPSJMYXllcl8xIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAxMjggMTI4IiB3aWR0aD0iMTI4cHgiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxnPjxyZWN0IGZpbGw9IiMwMDg0RkYiIGhlaWdodD0iMTI4IiB3aWR0aD0iMTI4Ii8+PC9nPjxwYXRoIGQ9Ik02NCwxNy41MzFjLTI1LjQwNSwwLTQ2LDE5LjI1OS00Niw0My4wMTVjMCwxMy41MTUsNi42NjUsMjUuNTc0LDE3LjA4OSwzMy40NnYxNi40NjIgIGwxNS42OTgtOC43MDdjNC4xODYsMS4xNzEsOC42MjEsMS44LDEzLjIxMywxLjhjMjUuNDA1LDAsNDYtMTkuMjU4LDQ2LTQzLjAxNUMxMTAsMzYuNzksODkuNDA1LDE3LjUzMSw2NCwxNy41MzF6IE02OC44NDUsNzUuMjE0ICBMNTYuOTQ3LDYyLjg1NUwzNC4wMzUsNzUuNTI0bDI1LjEyLTI2LjY1N2wxMS44OTgsMTIuMzU5bDIyLjkxLTEyLjY3TDY4Ljg0NSw3NS4yMTR6IiBmaWxsPSIjRkZGRkZGIiBpZD0iQnViYmxlX1NoYXBlIi8+PC9zdmc+) center no-repeat #0084ff;width:60px;height:60px;text-align:center;bottom:24px;border:0;outline:0;border-radius:60px;-webkit-border-radius:60px;-moz-border-radius:60px;-ms-border-radius:60px;-o-border-radius:60px;box-shadow:0 1px 6px rgba(0,0,0,.06),0 2px 32px rgba(0,0,0,.16);-webkit-transition:box-shadow .2s ease;background-size:80%;transition:all .2s ease-in-out}.ctrlq.fb-button:focus,.ctrlq.fb-button:hover{transform:scale(1.1);box-shadow:0 2px 8px rgba(0,0,0,.09),0 4px 40px rgba(0,0,0,.24)}.fb-widget{background:#fff;z-index:2;position:fixed;width:360px;height:435px;overflow:hidden;opacity:0;bottom:0;right:24px;border-radius:6px;-o-border-radius:6px;-webkit-border-radius:6px;box-shadow:0 5px 40px rgba(0,0,0,.16);-webkit-box-shadow:0 5px 40px rgba(0,0,0,.16);-moz-box-shadow:0 5px 40px rgba(0,0,0,.16);-o-box-shadow:0 5px 40px rgba(0,0,0,.16)}.fb-credit{text-align:center;margin-top:8px}.fb-credit a{transition:none;color:#bec2c9;font-family:Helvetica,Arial,sans-serif;font-size:12px;text-decoration:none;border:0;font-weight:400}.ctrlq.fb-overlay{z-index:0;position:fixed;height:100vh;width:100vw;-webkit-transition:opacity .4s,visibility .4s;transition:opacity .4s,visibility .4s;top:0;left:0;background:rgba(0,0,0,.05);display:none}.ctrlq.fb-close{z-index:4;padding:0 6px;background:#365899;font-weight:700;font-size:11px;color:#fff;margin:8px;border-radius:3px}.ctrlq.fb-close::after{content:'x';font-family:sans-serif}</style>

<div class="fb-livechat">

  <div class="ctrlq fb-overlay"></div>

  <div class="fb-widget">

    <div class="ctrlq fb-close"></div>

    <div class="fb-page" data-href="https://www.facebook.com/geekminds/" data-tabs="messages" data-width="360" data-height="400" data-small-header="true" data-hide-cover="true" data-show-facepile="false">

      <blockquote cite="https://www.facebook.com/geekminds/" class="fb-xfbml-parse-ignore"> </blockquote>

    </div>

    <div id="fb-root"></div>

  </div>

  <a href="https://m.me/geekminds" title="Send us a message on Facebook" class="ctrlq fb-button"></a> 

</div>

    

<script src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.9"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<script>$(document).ready(function(){var t={delay:125,overlay:$(".fb-overlay"),widget:$(".fb-widget"),button:$(".fb-button")};setTimeout(function(){$("div.fb-livechat").fadeIn()},8*t.delay),$(".ctrlq").on("click",function(e){e.preventDefault(),t.overlay.is(":visible")?(t.overlay.fadeOut(t.delay),t.widget.stop().animate({bottom:0,opacity:0},2*t.delay,function(){$(this).hide("slow"),t.button.show()})):t.button.fadeOut("medium",function(){t.widget.stop().show().animate({bottom:"30px",opacity:1},2*t.delay),t.overlay.fadeIn(t.delay)})})});</script>

 

El widget funcionaría en todo tipo de sitios web, incluidos los blogs de Blogger y WordPress, las tiendas WooCommerce y la mayoría de los sitios web HTML estáticos. Sin embargo, no funcionaría con la nueva versión de Google Sites, ya que no ofrecen una opción para incrustar JavaScript en las páginas.

Cuando los visitantes envían un mensaje a través del widget de Facebook Chat, va directamente a la bandeja de entrada de su página de Facebook. Como propietario de la empresa, puede instalar la aplicación Facebook Pages Manager en su teléfono móvil para ver y responder a los mensajes. El cliente será notificado de su respuesta dentro de su aplicación Facebook Messenger.

El historial de mensajes se conserva para siempre, no hay límite en la cantidad de mensajes que puede recibir en un día y su página puede recibir simultáneamente páginas de varios visitantes. El widget también invita al visitante a que le guste su página de Facebook.

Una cosa más. Si la página web está utilizando un bloqueador de anuncios o si han deshabilitado los complementos sociales, el widget se ajusta de manera muy adecuada al botón de Messenger.