Plugin de chat

En este documento se muestra cómo añadir el plugin de chat a una experiencia de Messenger en un sitio web mediante programación.

Si quieres utilizar Meta Business Suite para añadir el plugin de chat a la página web (método recomendado), consulta el Servicio de ayuda de Meta para empresas para obtener más información.

Funcionamiento

Al instalar el SDK de Facebook para JavaScript en tu página web, el plugin de chat se mostrará en ella. El cuadro de diálogo de saludo se mostrará en los ordenadores y en los dispositivos móviles de forma predeterminada y los usuarios pueden hacer clic en el botón “Cerrar” para minimizarlo. Puedes personalizar el saludo, el aspecto (como el color) y la experiencia de mensajes (como los menús y las respuestas rápidas) del plugin. El estado del cuadro de diálogo se almacena en caché, se puede maximizar o minimizar y se conserva entre sesiones.

Inicios de sesión

Si el usuario tiene la sesión iniciada en Facebook, el plugin mostrará los botones “Continuar como [NOMBRE]” y “Continuar como invitado”. Si el usuario no tiene la sesión iniciada en Facebook, el plugin mostrará los botones “Iniciar sesión en Messenger” y “Continuar como invitado”.

Notificaciones de webhooks

Cuando un usuario haga clic en el plugin para iniciar o continuar un chat con tu empresa, se enviará una notificación de webhook a tu servidor que contendrá lo siguiente:

• Información sobre el usuario, como el identificador específico de la página (PSID) o el identificador de referencia del usuario.
• Información para identificar al plugin de chat como origen del mensaje.
• Información de referencia incluida en la notificación.

Si has implementado la pantalla de bienvenida en el plugin y el usuario hace clic en el botón “Empezar” para iniciar una conversación con tu empresa, se enviará una notificación del webhook messaging_postbacks a tu servidor. A continuación, la empresa puede usar el identificador de referencia del usuario para enviarle mensajes en el intervalo de mensajes estándar de 24 horas.

Conversaciones existentes

Si el usuario tiene una conversación existente con tu empresa, el historial de chats se cargará automáticamente en el plugin. Cuando un usuario continúe la conversación (envíe un mensaje, haga clic en un botón o realice cualquier otra acción que hayas implementado en ella), se enviará una notificación del webhook messaging a tu servidor o una notificación del webhook messaging_referral si incluyes información de referencia. A continuación, la empresa puede usar el PSID para enviar mensajes al usuario en el intervalo de mensajes estándar de 24 horas.

Tipos de mensajes admitidos por el plugin de chat

El plugin no admite los siguientes elementos:

Antes de empezar

Necesitarás lo siguiente:

• El permiso pages_messaging.
• Un identificador de acceso a la página solicitado por una persona que pueda realizar la tarea MODERATE en tu página de Facebook.
• La aplicación vinculada a la página de Facebook suscrita a los campos de los webhooks messaging, messaging_postbacks y messaging_referrals.
• El dominio de tu sitio web añadido a la lista de autorizados mediante la API de perfiles de Messenger o Meta Business Suite.

Las condiciones de las herramientas de Meta para empresas se aplican en relación con el uso del plugin de chat.

Limitaciones

• El sitio web debe estar activo o en la lista de autorizados para que el plugin de chat se pueda implementar correctamente.
• Si se han establecido restricciones de edad o país en la configuración de la página de Facebook de tu empresa, no se mostrará el plugin de chat a los usuarios que visiten tu sitio web sin iniciar sesión en su cuenta de Facebook.
• El cuadro de diálogo de saludo no se almacena en caché en el caso de los navegadores Safari (versión 12 y posteriores) y Firefox.

Añadir el plugin de chat

Paso 1. Añadir el SDK

Añade el SDK de Facebook para JavaScript a cada página del sitio web en la que quieras mostrar el plugin.

<!-- Messenger Chat Plugin Code --> <div id="fb-root"></div> <div id="fb-customer-chat" class="fb-customerchat"></div> <script> var chatbox = document.getElementById('fb-customer-chat'); chatbox.setAttribute("page_id", "PAGE-ID"); chatbox.setAttribute("attribution", "biz_inbox"); </script> <script> window.fbAsyncInit = function() { FB.init({ xfbml : true, version : 'API-VERSION' }); }; (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/en_US/sdk/xfbml.customerchat.js'; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); </script> 

Paso 2. Personalizar el plugin

Uso de la API

Envía una solicitud POST al extremo /PAGE-ID/chat_plugin para personalizar el saludo, el color, el icono y otros elementos del plugin.

Ejemplo de solicitud

curl -i -X POST "https://graph.facebook.com/v21.0/PAGE-ID/chat_plugin
    ?welcome_screen_greeting:YOUR-WELCOME-TEXT
    &theme_color:553399
    &entry_point_icon:MESSENGER-ICON
    &entry_point_label:CHAT
    &access_token=PAGE-ACCESS-TOKEN"

Consulta la referencia del plugin de chat para obtener más información sobre los campos que se utilizan para personalizar el plugin.

Usar atributos HTML

Te recomendamos que utilices este método únicamente para las personalizaciones que no estén disponibles mediante la herramienta de configuración de opciones de la página o la API.

Notificaciones de webhooks

Cuando un usuario envíe un mensaje a tu empresa, se enviará una notificación de webhook a tu servidor.

Conversaciones existentes

Cuando un usuario envía un mensaje a una conversación existente con tu empresa, se envía una notificación del webhook messaging. En la notificación se incluirá el identificador del usuario específico de la página y el parámetro source del objeto tags establecido en customer_chat_plugin.

Notificación de mensajes

{
    "object": "page",
    "entry": [
        {
            "id": "PAGE-ID",
            "time": 1559598624359,
            "messaging": [
                {
                    "sender": {
                        "id": "PSID"
                    },
                    "recipient": {
                        "id": "PAGE-ID"
                    },
                    "timestamp": 1559598623749,
                    "message": {
                        "tags": {
                            "source": "customer_chat_plugin"
                        },
                        "mid": "nhEqs_THGoYyAhpK93uNCrIfLZD...",
                        "text": "hello, from customer chat!"
                    }
                }
            ]
        }
    ]
}

Notificación de referencias de mensajes

Si estableces el atributo ref para el plugin de chat, se enviará una notificación del webhook messaging_referrals a tu servidor.

{
    "object": "page",
    "entry": [
        {
            "id": "PAGE-ID",
            "time": 1559598385735,
            "messaging": [
                {
                    "recipient": {
                        "id": "PAGE-ID"
                    },
                    "timestamp": 1559598385735,
                    "sender": {
                        "user_ref":"USER-REFERENCE-ID"
                    },
                    "referral": {
                        "ref": "REF-PARAMETER-INFORMATION",
                        "source": "CUSTOMER_CHAT_PLUGIN",
                        "type": "OPEN_THREAD",
                        "referer_uri": "REFERRAL-URI"
                    }
                }
            ]
        }
    ]
}

Conversaciones nuevas

Cuando un usuario hace clic en el botón “Empezar” de la pantalla de bienvenida del plugin para iniciar una conversación, se envía una notificación del webhook messaging_postbacks.

Notificación de postbacks de mensajes

{
    "object": "page",
    "entry": [
        {
            "id": "PAGE-ID",
            "time": 1559598624359,
            "messaging": [
                {
                    "sender": {
                        "user_ref": "USER-REFERENCE-ID"
                    },
                    "recipient": {
                        "id": "PAGE-ID"
                    },
                    "timestamp": 1559598623749,
                    "postback":{
                        "title": "TITLE-FOR-THE-CTA",  
                        "payload": "PAYLOAD-DEFINED-BY-CTA",
                        "referral": {
                            "ref": "ADDITIONAL-INFORMATION",
                            "source": "CUSTOMER_CHAT_PLUGIN",
                            "type": "OPEN_THREAD",
                    }
                }
            ]
        }
    ]
}

Solicitudes de activación de mensajes de marketing

Consulta nuestra guía de mensajes de marketing para obtener información sobre cómo crear solicitudes de activación de mensajes de marketing.

Limitaciones

El único tema compatible con los mensajes de marketing para el plugin de chat es Actualizaciones y promociones.

Notificación de activación de mensajes

Se enviará a tu servidor una notificación del webhook messaging_optins cuando un usuario active los mensajes de marketing para tu empresa.

"object": "page",
    "entry": [
        {
            "id": "PAGE-ID",
            "time": TIMESTAMP,
            "messaging": [
                {
                    "recipient": {
                        "id": "PAGE-ID"
                    },
                    "timestamp": TIMESTAMP,
                    "optin": {
                        "type": "notification_messages",
                        "payload": "empty_payload",
                        "notification_messages_token": "NOTIFICATION-MESSAGE-TOKEN",
                        "notification_messages_frequency": "MESSAGE-FREQUENCY",
                        "topic": "NOTIFICATION-MESSAGE-TOPIC",
                        "token_expiry_timestamp": EXPIRATION-DATE-TIMESTAMP,
                        "ref": "ADDITIONAL-INFORMATION",
                        "user_token_status": "NOT_REFRESHED",
                        "notification_messages_status": "RESUME_NOTIFICATIONS"
                    }
                }
            ]
        }
    ]
}

Puedes definir el valor de notification_messages_token como el valor del identificador en el objeto recipient para enviar mensajes de marketing a un usuario.

Sugerencias para la solución de problemas

• No se muestra...

  • Asegúrate de que el dominio se ha autorizado.
  • Asegúrate de que el encabezado Referrer-Policy está establecido para que se envíe la URL de referencia.

• El plugin de chat no se representa en Firefox

  • Elimina el complemento "Contenedor de Facebook para Firefox".
  • Haz clic en el escudo gris de la barra de búsqueda para desactivar el bloqueo de contenido. De esta forma, se mostrará el plugin.

Siguientes pasos

• Enviar una respuesta
• Enviar mensajes de marketing

Más información

• Desactivar el menú persistente
• SDK de Facebook para JavaScript
• Modo de invitado: permite a los usuarios iniciar conversaciones sin haber iniciado sesión en Facebook.
• Frases para romper el hielo: permite a los usuarios iniciar una conversación con una empresa con una lista de preguntas frecuentes.
• Menú persistente: ayuda a las personas a descubrir tu funcionalidad y a acceder a esta más fácilmente durante toda la conversación.