En este tutoriales en linea les mostraremos la manera de agregar o insertar un botón de chat de Facebook Messenger en tu sitio Web. (Plugin de chat con clientes - versión beta) . El botón de Messenger de Chat te permite tener una conversación en vivo con los visitantes desde tu sitio web.
Un botón de chat en vivo es un pequeño icono flotante que generalmente aparece en la esquina inferior derecha de un sitio web. Al igual que el software de chat en vivo tradicional, puedes instalar un complemento de chat de Messenger en tu sitio web.

Este complemento facilita que los visitantes de un sitio web con una cuenta de Messenger tengan una conversación en vivo, dejen un mensaje e interactúen con tu bot de Messenger.

Plugin de chat con clientes

Mediante el plugin de chat con clientes de la plataforma de Messenger, puedes integrar tu experiencia de Messenger directamente en tu sitio web. De esta manera, los clientes pueden interactuar con tu empresa en cualquier momento y disfrutar de la misma experiencia personalizada de contenido multimedia enriquecido que obtienen en Messenger.

Como configurar el plugin

Para incluir el plugin de chat con clientes en la página web, puedes utilizar la herramienta de configuración o seguir los pasos para desarrolladores.

Opción 1: Usar la herramienta de configuración

En el caso de los administradores de página, la plataforma de Messenger también ofrece una sencilla herramienta de configuración para personalizar el plugin de chat con clientes. Si quieres usarla, sigue estos pasos:

• Ve a Configuración de la página > Plataforma de Messenger.
• En la sección “Plugin de chat con clientes”, haz clic en el botón “Configurar”.

La herramienta de configuración consiste en una sencilla interfaz de usuario desde la que se puede personalizar el mensaje de saludo, el color del tema y el tiempo de respuesta que se muestra, así como establecer los dominios autorizados para el plugin.

Una vez finalizado el proceso de personalización, esta herramienta genera automáticamente los fragmentos de código que puedes copiar y pegar a fin de incluir este plugin en tu página web.

<!-- Cargar el SDK de Facebook para jаvascript -->
<div id="fb-root"></div>
<script>
  window.fbAsyncInit = function() {
    FB.init({
      xfbml            : true,
      version          : 'v3.3'
    });
  };

  (function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = 'https://connect.facebook.net/es_ES/sdk/xfbml.customerchat.js';
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<!-- Su código de chat de cliente -->
<div class="fb-customerchat"
  attribution=setup_tool
  page_id="940800119321921"
  theme_color="#000000"
  logged_in_greeting="¡Hola! como podemos ayudarte?"
  logged_out_greeting="¡Hola! como podemos ayudarte?">
</div>

Insértalo justo después de la etiqueta de apertura en todas las páginas en las que quieras que aparezca el plugin.

Opción 2: Seguir los pasos de desarrollador para la configuración

Sigue estos pasos para incluir el plugin de chat con clientes en la página web:

Incluir el dominio del sitio web en la lista de autorizados: Por motivos de seguridad, el plugin solo se mostrará cuando se cargue en un dominio que figure en la lista de autorizados. Consulta la referencia de whitelisted_domains para obtener información sobre cómo incluir tu dominio en la lista de autorizados mediante programación.Las empresas a las que un proveedor de servicios les suministre la experiencia de Messenger no tendrán acceso al generador de identificadores de acceso a la página en la configuración de aplicaciones, ya que la aplicación de Facebook no les pertenece. En este caso, puedes añadir o eliminar los dominios autorizados en la configuración de la página. Para incluir un dominio en la lista de autorizados, realiza las siguientes acciones:

1. Haz clic en Configuración en la parte superior de tu página.
2. Haz clic en Plataforma de Messenger en el lateral izquierdo.
3. Edita los dominios autorizados de tu página en la sección Dominios autorizados.

Incluir el plugin en la página web: Para añadir el plugin a la página web, incluye el elemento div con los siguientes atributos en el código HTML:

<div class="fb-customerchat"
 page_id="<PAGE_ID>">
</div>

El cuadro de diálogo de saludo se mostrará en los ordenadores y se ocultará en los móviles de forma predeterminada. Para personalizar el comportamiento del cuadro de diálogo de saludo, utiliza los atributos greeting_dialog_display y "greeting_dialog_delay".Para obtener una lista completa de atributos, consulta la referencia del plugin de chat con clientes.