Artículo sobre cómo hacerlo

Cómo añadir Facebook Messenger a tu sitio web (2021)

Gerardo Salandra
Director General, Respond.io
10 de febrero de 2019

¿Necesitas un plugin de chat en vivo en tu sitio web? Sería estupendo que los visitantes de tu web chatearan contigo a través de Facebook Messenger y que tú pudieras devolverles el mensaje en cualquier momento. Sin embargo, necesitarías algún tipo de Widget de Messenger en tu sitio web. ¿Adivina qué? Hay uno. Se llama Facebook Customer Chat Plugin, y tenemos la forma de añadir Messenger a la página web.

¿Qué es un widget de Facebook Messenger?

Facebook Messenger Widget (también conocido como Facebook Chat Plugin) es un plugin para sitios web que permite a los visitantes de tu sitio web chatear con tu página de Facebook a través de Messenger.

Esta es una imagen de Facebook Messenger Widget. Facebook Messenger Widget (también conocido como Facebook Chat Plugin) es un plugin para sitios web que permite a los visitantes de tu sitio web chatear con tu página de Facebook a través de Messenger.
Botón de mensajería en el sitio web

Una vez que los visitantes del sitio web envíen su primer mensaje, podrás devolverles el mensaje y obtener más información sobre ellos a través de la bandeja de entrada de Facebook Business Suite. También puedes acceder a las conversaciones a través de la bandeja de entrada de un tercero como respond.io.

Por qué utilizar un widget de Facebook Messenger

Hay varias razones por las que deberías añadir Facebook Messenger a tu sitio web. Para empezar, el chat web de Facebook crea un compromiso persistente y constante. Además, puedes crear una lista de contactos de Facebook Messenger con un Widget de Facebook Messenger.

El chat web de Facebook crea un compromiso persistente y constante

Con el plugin de chat tradicional, perderá al usuario para siempre una vez que abandone su sitio web. Tu única esperanza de continuar la conversación es que vuelvan a tu sitio. Este ya no es el caso una vez que añades Messenger a tu sitio web.

Con un botón de Facebook Messenger en tu sitio web, todas tus conversaciones se guardan en la bandeja de entrada de Facebook Business Suite. Esto significa que puedes reanudar una conversación con un usuario que chateó contigo aunque haya abandonado tu sitio web.

Todas tus conversaciones del widget de mensajería se guardarán en la bandeja de entrada de Facebook. Esta es una ventaja cuando añades Facebook Messenger a tu sitio web.
Bandeja de entrada de Facebook Business Suite

Además de la conversación, puedes ver algunos datos básicos de su perfil, como el nombre, la foto de perfil, la fecha de nacimiento y la ubicación, lo que te ayuda a atender al cliente mejor que cualquier chat en directo.

Un widget de Facebook Messenger te permite crear una lista de contactos de Facebook Messenger

Ahora que las personas pueden enviarte mensajes fácilmente a través de Facebook mediante el chat para clientes de Facebook, se añadirán a tu lista de contactos para siempre.

Esta es una imagen que muestra que Facebook Messenger tiene mayores tasas de apertura y clics que el correo electrónico. Ahora que la gente puede enviarte mensajes fácilmente a través de Facebook mediante el chat para clientes de Facebook, se añadirán a tu lista de contactos para siempre. Puedes pensar en una lista de suscriptores de Facebook Messenger del mismo modo que en una lista de suscriptores de correo electrónico. Utilízala como un nuevo canal de comunicación con tu audiencia o incluso úsala para enviar difusiones por Messenger, que tiene la friolera de un 92% de tasa de apertura.
Facebook Messenger tiene mayores tasas de apertura y clics que el correo electrónico

Puedes pensar en una lista de suscriptores de Facebook Messenger de la misma manera que en una lista de suscriptores de correo electrónico. Utilízala como un nuevo canal de comunicación con tu audiencia o incluso úsala para enviar mensajes por Messenger, que tienen una tasa de apertura del 92%.

Messenger Widget es sólo una forma de construir una lista de suscriptores de Facebook Messenger. Para conseguir más contactos de Messenger, puedes configurar la respuesta automática de los comentarios de Facebook o utilizar los códigos de Messenger.

Ten en cuenta que tus clientes deben iniciar sesión en sus cuentas de Facebook para ser añadidos a una lista de suscriptores. No puedes añadir a tu lista de contactos a los clientes que te envían mensajes en modo invitado.

Widget de mensajería: Modo invitado

Facebook introdujo el Modo Invitado en 2020, lo que permite a los clientes chatear con las empresas a través del widget de Messenger sin iniciar sesión en su cuenta de Facebook. Para entrar en el Modo Invitado, solo tienes que tocar Continuar como invitado.

El Modo Invitado ofrece a los clientes la flexibilidad de chatear con una empresa de forma anónima. Pero esta función tiene algunas desventajas para las empresas.

Esta es una imagen con un widget de Facebook Messenger con un botón de Modo Invitado. Facebook introdujo el Modo Invitado en 2020, permitiendo a los clientes chatear con las empresas a través del widget de Messenger sin tener que iniciar sesión en su cuenta de Facebook. Para entrar en el Modo Invitado, basta con pulsar Continuar como invitado.
Widget de Facebook Messenger con modo invitado

Para empezar, el Modo Invitado impide a las empresas establecer conexiones duraderas con los clientes. Las empresas no pueden reabrir las conversaciones de los invitados una vez que estos terminan el chat o 24 horas después del inicio de la conversación, lo que ocurra primero.

El modo de invitado también dificulta el ofrecer una experiencia personalizada al cliente, ya que no se puede acceder a la información del perfil de los clientes, incluidos los nombres. Aquellos que chateen con usted en el Modo Invitado tendrán sus nombres mostrados como Invitado seguido de una corta cadena numérica.

Afortunadamente, puedes desactivar el Modo Invitado durante el proceso de configuración del widget. Sigue leyendo para saber cómo.

Cómo configurar un widget de Facebook Messenger

Hay dos partes para añadir Facebook Messenger a un sitio web:

  • Creación de un código de widget de Facebook Messenger
  • Cómo añadir el código del widget de Messenger a su sitio web

Cómo crear un código de widget de Facebook Messenger

Puedes generar un código de widget de Messenger en Facebook Business Suite Inbox o en respond.io. Aunque ambas plataformas tienen el mismo propósito, ofrecen diferentes características. Facebook Business Inbox te da la opción de desactivar el Modo Invitado, mientras que respond.io te permite configurar automatizaciones avanzadas como las encuestas automáticas.

Las empresas B2C deberían optar por Facebook Business Suite Inbox, que permite desactivar el Modo Invitado. Con el Modo Invitado desactivado, podrás ofrecer una experiencia de cliente personalizada y volver a captar a tus clientes después de que abandonen el sitio web.

Dicho esto, desactivar el Modo Invitado puede alejar a los compradores B2B que quieran permanecer en el anonimato. Si eres una empresa B2B que necesita tener activado el Modo Invitado, te recomendamos que optes por respond.io, que te permite añadir un código de referencia a un widget de Messenger y configurar una automatización avanzada.

Generar un código de widget de Messenger en la bandeja de entrada de Facebook Business Suite

Para empezar, ve a la sección del plugin de chat en la bandeja de entrada de Facebook Business Suite. Ve a Configuración de la página > Mensajería > Añadir Messenger a tu sitio web y haz clic en Comenzar.

Esta es una imagen que muestra cómo generar un código de widget de Messenger en la bandeja de entrada de Facebook Business Suite. Para empezar, ve a la sección del plugin de chat en la bandeja de entrada de Facebook Business Suite. Ve a Configuración de la página > Mensajería > Añadir Messenger a tu sitio web y haz clic en Comenzar.
Acceso al plugin de chat desde la configuración de la página

1. Haga clic en el botón azul de Configuración.

Esta es una imagen que muestra cómo generar un código de widget de Messenger en la bandeja de entrada de Facebook Business Suite. Haz clic en el botón azul de Configuración.
Plugin de chat en la bandeja de entrada de Facebook Business Suite

2. Seleccione el idioma para su Widget de Messenger.

Esta es una imagen que muestra cómo generar un código de widget de Messenger en la bandeja de entrada de Facebook Business Suite. Selecciona el idioma para tu Widget de Messenger.
Elección de la lengua

3. Añade el dominio del sitio web en el que quieres que aparezca el widget de Facebook Messenger.

Esta es una imagen que muestra cómo generar un código de widget de Messenger en la bandeja de entrada de Facebook Business Suite. Añade el dominio del sitio web en el que quieres que aparezca el widget de Facebook Messenger.
Añadir el dominio del sitio web

4. Haga clic en Copiar código y luego en Siguiente.

Esta es la imagen que muestra cómo añadir Facebook Messenger a la página web. Haga clic en copiar el código y luego haga clic en Siguiente.
Copiar el código

5. Pega el fragmento de código en tu sitio web. Aprende a añadir este código a Wordpress, Wix, Shopify y Squarespace.

Esta es la imagen que muestra cómo añadir Messenger a la página web. Pega el código en tu sitio web. Aprende a añadir este código a Wordpress, Wix, Shopify y Squarespace.
Cómo pegar el código en el sitio web

Haz clic en Finalizar cuando hayas terminado. Tu widget de Messenger está ahora listo para ser utilizado. Opcionalmente, puedes desactivar el Modo Invitado para tu Widget de Messenger.

6. Desactive el interruptor del chat de invitados para desactivar el modo de invitados. Puedes encontrar la palanca en Personalizar tu plugin de chat.

Esta es una imagen que muestra cómo desactivar el Modo Invitado de un Widget de Facebook Messenger.Desactiva el toggle de Chat Invitado para desactivar el Modo Invitado. Puedes encontrar la palanca en Personalizar tu plugin de chat.
Desactivación del modo invitado

A continuación, haz clic en Publicar para que los cambios se hagan efectivos. Y así es como se añade Facebook Messenger a un sitio web. También puedes crear un código de widget de Messenger en respond.io.

Generar un código de widget de Messenger en Respond.io

Para crear un código de widget de mensajería en respond.io, necesitarás una cuenta gratuita de respond.io. Una vez que tengas tu cuenta de respond.io lista, sigue los siguientes pasos.

1. Navega hasta el módulo de Canales. A continuación, pulsa Añadir canal para conectar una página de Facebook.

Comienza creando un canal en el panel de control de respond.io
Cómo hacer un widget de mensajería para el sitio web: el módulo de canales

2. Seleccione Messenger en la lista de canales.

Antes de crear el script para el widget de Facebook Messenger, tendrás que conectar tu página de Facebook a la plataforma respond.io.
Cómo hacer un widget de mensajería para el sitio web: Conexión de canales de Respond.io

3. Pulse Conectar con Facebook. Inicia sesión con la cuenta de Facebook que tiene acceso de administrador a la página a la que quieres conectarte.

Esta es la imagen que muestra cómo añadir Facebook Messenger a respond.io Pulse Conectar con Facebook. Accede a la cuenta de Facebook que tiene acceso de administrador a la página a la que quieres conectarte.

Si está gestionando varias páginas, se le dará la opción de elegir a qué página conectarse. Pulsa "Hecho" para completar la configuración.

4. Pulsa Chat Plugin para empezar a crear el código del widget de Facebook Messenger.

Comienza a crear el plugin de chat para clientes de Facebook pulsando Chat Plugin en la página del canal de Respond.io.
Cómo hacer un widget de Messenger para el sitio web: Página de canales de Respond.io

5. Añade tu sitio web a la lista blanca. Esto es necesario para añadir Facebook Messenger a tu sitio web.

Antes de que puedas insertar el código del plugin de chat personalizado de Facebook en tu sitio web, tendrás que añadir el dominio de tu sitio web a la lista blanca.
Cómo hacer un widget de Messenger para el sitio web: Facebook Messenger Widget Whitelist

6. Copie el Script y péguelo en el pie de página de su sitio web.

El último paso es añadir el script del plugin de Facebook Chat a tu sitio web.
Cómo hacer un widget de Messenger para el sitio web: Facebook Messenger Widget Script

Haz clic en Done después de añadir el código a tu sitio web. Ahora puedes estar pensando en cómo insertar el código del plugin de Facebook Chat en tu sitio web. Eso depende de tu CMS.

Cómo añadir el código del widget de Facebook Messenger a un sitio web

A continuación, encontrarás guías para instalar el código del Widget de Messenger en sitios web como WordPress, Wix, Shopify y Squarespace.

Cómo añadir el código del widget de Facebook Messenger a un sitio web de WordPress

Antes de integrar Messenger en un sitio web de WordPress, asegúrate de haber creado un código de widget de Messenger en Facebook Business Suite Inbox o en respond.io.

1. Añadir la consola de encabezado y pie de página en Wordpress.

Una vez que tengas el código del plugin de chat de Facebook listo, puedes añadir el plugin de encabezados y pies de página a tu wordpress.
Cómo integrar Messenger en el sitio web: Añadir la consola de cabecera y pie de página

2. Navegue a Encabezados y Pies de Página.

Una vez que tenga el plugin de encabezados y pies de página añadido, navegue hasta él.
Cómo integrar Messenger en el sitio web: Abrir la consola de cabecera y pie de página

3. Añade el script de Facebook Messenger Widget al pie de página.

Ahora pega el código del plugin de Facebook Customer Chat en el pie de página de tu sitio web de wordpress.
Cómo integrar Messenger en el sitio web: Añadir el script Abrir la consola de cabecera y pie de página

Ya has añadido el chat en directo de Facebook Messenger a tu sitio web de WordPress.

Cómo añadir el código del widget de Facebook Messenger a un sitio web de Wix

Entonces, ¿cómo se agrega el chat en vivo a un sitio web de Wix? Una vez que hayas generado un script para el widget de Facebook Messenger, sigue los siguientes pasos para añadirlo a tu sitio web de Wix.

1. Vaya a Configuración > Configuración avanzada > Seguimiento y análisis > + Nueva herramienta > Personalizada.

Ahora que tienes listo el código de tu widget de Facebook Messenger, navega hasta Custom Code dentro de Wix.
Herramientas de seguimiento y análisis de Wix

2. Pegue Facebook Messenger Widget Code y seleccione las páginas en las que desea que se aplique el código. Asegúrate de colocar el código en Body - end.

Toma el script del plugin de Facebook Chat y pégalo dentro del diálogo de código personalizado.
Rellene el formulario de código personalizado

Ahora has añadido el plugin de chat de Facebook a tu sitio web de Wix.

Ahora el widget de Facebook Messenger aparecerá en tu sitio web de Wix.
Tu nuevo plugin de chat para clientes de Facebook está instalado

Cómo añadir el código del widget de Facebook Messenger a Shopify

Una vez que tengas el script del plugin de Facebook Chat, sigue estos pasos para que puedas integrar Facebook Messenger en un sitio web de Shopify.

1. Navegue hasta la tienda online y edite el código.

Una vez que tengas listo el script del plugin de chat para clientes de Facebook, ve a tus temas de Spotify y edita el código.
Chat de Shopify Messenger: Edita el código de tu tienda online

2. Abre la sección footer.liquid y pega el script de Facebook Messenger Widget.

Toma el código del Widget de Facebook Messenger y añádelo en la sección footer.liquid de tu sitio web de Spotify.
Chat de Shopify Messenger: Añade el Script

Ahora has añadido el chat en vivo de Facebook Messenger a tu sitio web de Shopify.

Cómo añadir el código del widget de Facebook Messenger a Squarespace

Una vez que tengas el script del plugin de Facebook Chat, es hora de incrustar Messenger en un sitio web de Squarespace.

1. Inicie sesión en Squarespace, seleccione su sitio y abra Configuración.

Una vez que tengas el código del widget de Facebook Messenger listo, inicia sesión en squarespace para comenzar el proceso de instalación.
Abra la configuración de su sitio

2. Navegue hasta la configuración avanzada.

Hay formas de añadir Facebook Messenger a tu sitio web. Para integrar Facebook Messenger en tu sitio web de Squarespace, abre la configuración avanzada. Así es como se agrega Facebook Messenger a tu sitio web.
Abrir la configuración avanzada

3. Vaya a Inyección de código.

Hay formas de añadir Facebook Messenger a tu sitio web. Para integrar Facebook Messenger en tu sitio web de Squarespace, abre la inyección de código. Esta es la forma de añadir Facebook Messenger a tu sitio web.
Inyección de código abierto

4. Pega el script del Widget de Facebook Messenger.

Hay formas de añadir Facebook Messenger a tu sitio web. Para integrar Facebook Messenger en tu sitio web de Squarespace añade el script. Esta es la forma de añadir Facebook Messenger a tu sitio web.
Añadir el guión

Ahora has añadido el plugin de chat en vivo de Squarespace a tu sitio web.

Más información

Y así es como se añade Facebook Messenger a tu sitio web. Si te interesa saber más sobre el uso de la mensajería instantánea para empresas, deberías consultar estas publicaciones del blog.

Etiquetas:
Copiado en el portapapeles.

¿Listo para empezar?

Gracias. Está siendo redirigido al formulario de inscripción.
Oops! Algo ha ido mal, actualiza tu navegador e inténtalo de nuevo.
Gracias. Hemos recibido su envío.
Ups! Algo salió mal al enviar el formulario.
Inscríbase gratis