Plugin de chat

Este documento te muestra cómo agregar el plugin de chat a tu experiencia de Messenger en un sitio web de manera programática.

Si quieres usar Meta Business Suite para agregar el plugin de chat a tu página web (recomendado), visita el servicio de ayuda de Meta para empresas a fin de obtener más información.

Cómo funciona

Cuando instalas el SDK de Facebook para JavaScript en tu página web, el plugin de chat se representa en la página web. De manera predeterminada, el cuadro de diálogo de saludo se mostrará en computadoras y en celulares, y la persona podrá hacer clic en el botón de cerrar para minimizarlo. Puedes personalizar el saludo, el aspecto, como el color, y la experiencia de mensajería, como menús y respuestas rápidas, del plugin. El estado del cuadro de diálogo se almacena en caché, maximizado o minimizado, y se conserva entre las sesiones.

Inicios de sesión

Si la persona inició sesión en Facebook, el plugin mostrará los botones "Continuar como [NOMBRE]" y "Continuar como invitado". Si la persona no inició sesión en Facebook, el plugin mostrará los botones "Iniciar sesión en Messenger" y "Continuar como invitado".

Notificaciones de webhook

Cuando una persona hace clic en el plugin para iniciar un chat o para continuar uno preexistente con tu empresa, se envía a tu servidor una notificación de webhook que contiene lo siguiente:

• Información sobre la persona, como identificadores específicos de la página (PSID) o identificadores de referencia de usuarios
• Identificación de la fuente del mensaje como plugin de chat
• Información de referencia incluida en la notificación

Si implementaste la pantalla de bienvenida en el plugin y la persona hace clic en el botón "Empezar" para iniciar una conversación con tu empresa, se enviará una notificación de webhook messaging_postbacks a tu servidor. Tu empresa puede, entonces, usar el identificador de referencia de usuario para enviar mensajes a la persona dentro del intervalo de mensajes estándar de 24 horas.

Conversaciones preexistentes

Si la persona ya tiene una conversación iniciada con tu empresa, el historial de chat se cargará automáticamente en el plugin. Cuando la persona continúa la conversación (envía un mensaje, hace clic en un botón o realiza alguna otra acción que implementaste en la conversación), se envía una notificación del webhook messaging a tu servidor o una notificación del webhook messaging_referral si incluyes información de referencia. Tu empresa puede, entonces, usar el PSID para enviar mensajes a la persona dentro del intervalo de mensajes estándar de 24 horas.

Tipos de mensajes admitidos por el plugin de chat

El plugin no admite lo siguiente:

Antes de empezar

Necesitarás lo siguiente:

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

Las Condiciones de las herramientas empresariales de Meta se aplican al uso del plugin de chat.

Limitaciones

• Tu sitio web debe estar activo o estar incluido en una lista de autorizados para que el plugin de chat pueda implementarse correctamente.
• Si se establecieron 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 las personas que visiten tu sitio web sin haber iniciado sesión en sus cuentas de Facebook.
• El cuadro de diálogo de saludo no se almacena en caché en los navegadores Safari versión 12 y posteriores y Firefox.

Agregar el plugin de chat

Paso 1: Agregar el SDK

Agrega el SDK de Facebook para JavaScript a cada página de tu sitio web donde quieras que se muestre 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

Usar la API

Envía una solicitud POST al punto de conexión /PAGE-ID/chat_plugin para personalizar el saludo, el color, el icono y demás elementos de tu plugin.

Ejemplo de solicitud

curl -i -X POST "https://graph.facebook.com/v19.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 usan para personalizar el plugin.

Usar atributos HTML

Recomendamos que solo uses este método para las personalizaciones que no estén disponibles mediante la herramienta de configuración de la página o la API.

Notificaciones de webhook

Cuando una persona envía un mensaje a tu empresa, se envía una notificación de webhook a tu servidor.

Conversaciones preexistentes

Cuando una persona envía un mensaje a una conversación preexistente con tu empresa, se envía notificación del webhook messaging. La notificación incluirá el ID específico de la página de la persona y el parámetro source del objeto tags configurado en customer_chat_plugin.

Notificación de mensaje

{
    "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 referencia de mensajes

Si configuras el atributo ref en tu 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 una persona inicia una conversación haciendo clic en el botón "Empezar" de la pantalla de bienvenida del plugin, se envía una notificación del webhook messaging_postbacks.

Notificación de postback de mensaje

{
    "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 suscripción a mensajes de marketing

Consulta nuestra guía de mensajes de marketing para aprender a crear solicitudes de suscripción a mensajes de marketing.

Limitaciones

Solo se admite el tema Actualizaciones y promociones en las notificaciones recurrentes del plugin de chat.

Notificación de suscripción a mensajes

Se envía una notificación del webhook messaging_optins a tu servidor cuando una persona se suscribe para recibir mensajes de marketing de 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 configurar el valor de notification_messages_token con el valor del identificador del objeto recipient para enviar mensajes de marketing a una persona.

Consejos para solucionar problemas

• No se muestra...

  • Asegúrate de que se haya autorizado el dominio.
  • Asegúrate de que se haya configurado el encabezado Referrer-Policy de tal manera que se envíe la URL de referencia.

• No se muestra el plugin de chat en Firefox

  • Elimina la extensión del contenedor de Facebook para Firefox.
  • Desactiva el bloqueo de contenido (haz clic en el escudo de color gris en la barra de búsqueda) para que se muestre el plugin.

Próximos pasos

• Enviar una respuesta
• Enviar mensajes de marketing

Consulta también:

• Desactivar el menú persistente
• SDK de Facebook para JavaScript
• Modo de invitado: permite a los usuarios iniciar conversaciones sin iniciar sesión en Facebook.
• Mensajes para empezar una conversación: permite a los usuarios iniciar una conversación con una empresa usando una lista de preguntas frecuentes.
• Menú persistente: ayuda a las personas a descubrir tu funcionalidad durante la conversación y a acceder a dicha funcionalidad de manera sencilla.