Cómo añadir Facebook Messenger a tu sitio web con Elementor

Updated on November 14, 2025
|
Written by Sajjan Sharma Sajjan Sharma
Cómo añadir Facebook Messenger a tu sitio web con Elementor

Una de las mejores cosas de Elementor es el control total que tienes sobre el diseño de tu sitio web.

Pero incluso después de crear un sitio web atractivo, puedes seguir teniendo visitantes que se van sin registrarse o realizar una compra. Una razón común para ello son las preguntas sin respuesta. 

Un visitante que está confundido o inseguro rara vez se tomará el tiempo de rellenar un formulario de contacto y esperar una respuesta por correo electrónico.

Aquí es donde añadir Facebook Messenger a Elementor se convierte en una solución sencilla y potente.

Al añadir Facebook Messenger, puedes conectar con los visitantes utilizando una interfaz de chat que ya utilizan a diario. Les resulta familiar y de confianza, lo que hace que sea más probable que se pongan en contacto.

Te guiaré a través de los pasos exactos para implementarlo en tu sitio. Es una pequeña adición que hace que tus páginas de Elementor sean aún más efectivas para convertir visitantes.

Por qué añadir Facebook Messenger a tu sitio de Elementor

  • Muestra tu experiencia: Responde a preguntas sobre tus servicios en tiempo real, generando confianza antes de que los visitantes abandonen tu sitio.
  • Reduce los carritos abandonados: Atrapa a los visitantes antes de que se vayan, facilitándoles la formulación de preguntas sin tener que rellenar formularios.
  • Soporte al cliente fácil: Explica características, aborda preocupaciones y resuelve problemas de los clientes para convertir a más personas en embajadores de marca.
  • Plataforma familiar para los visitantes: La gente confía en Messenger porque lo usa a diario, lo que les hace sentirse más cómodos iniciando una conversación con tu negocio.
  • Permite mensajes de seguimiento: Mantente en contacto con los visitantes después de que abandonen tu sitio compartiendo ofertas exclusivas, nuevos productos o noticias importantes.

La mejor parte es que no necesitas ninguna habilidad de codificación para añadir esta función a tu sitio web de Elementor.

ejemplo de un asistente de chat en un sitio web

Te mostraré exactamente cómo configurarlo en solo unos minutos utilizando un sencillo plugin de WordPress.

Forma fácil de integrar Elementor y Facebook Messenger

Cuando se trata de añadir Facebook Messenger a tu sitio web, tienes 2 opciones para elegir: Manual o usando un plugin de WordPress.

Desafortunadamente, el método manual implica código y la configuración de los ajustes de la API de Facebook. 

Esto puede complicarse rápidamente, especialmente si no te sientes cómodo trabajando con código. Además, tendrás que dedicar mucho tiempo a configurarlo y mantenerlo.

Por eso recomiendo usar WPChat en su lugar. Es un plugin de chat para WordPress que se encarga de toda la configuración técnica por ti, haciendo el proceso mucho más sencillo.

página de inicio del plugin wpchat

WPChat está diseñado específicamente para añadir funciones de chat a sitios de WordPress y se integra perfectamente con Elementor.

Esto es lo que hace de WPChat una opción sólida para esta guía:

  • Soporte Multiplataforma: Añade opciones de chat para Facebook Messenger, Telegram, Instagram y WhatsApp desde un solo plugin.
  • Una vez activado el plugin, estarás listo para crear tu asistente de chat y conectarlo a Facebook Messenger.
  • Funciones de Gestión de Equipo: Crea varios agentes para representar a los miembros de tu equipo de soporte, dando a tu chat un toque personal y humano.
agente de wpchat con varias cuentas
  • No se Requiere Codificación: Crea y personaliza tu asistente de chat de Facebook utilizando una interfaz visual con controles de apuntar y hacer clic.
  • Distribución Inteligente de Carga de Trabajo: Asigna automáticamente los chats entrantes a diferentes agentes, asegurando una carga de trabajo equilibrada y tiempos de respuesta más rápidos.
  • Preguntas Frecuentes Integradas: Configura respuestas automáticas a preguntas comunes y crea flujos de conversación que capturen clientes potenciales mientras duermes.
crear preguntas frecuentes para tu sitio de Elementor

Simplemente conecta tu cuenta de Facebook Messenger, personaliza el aspecto del widget de chat y elige dónde aparece en tu sitio.

Consigue tu copia de WPChat hoy mismo y empieza a conectar con tus visitantes a través de Facebook Messenger.

Cómo Añadir Facebook Messenger a Elementor (en 5 Pasos)

Permíteme guiarte a través de los pasos exactos para configurar un asistente de chat para Facebook Messenger.

Todo el proceso lleva solo unos minutos y no tienes que tocar una sola línea de código.

Paso 1: Añadir el plugin WPChat al sitio web de Elementor

Primero, consigue tu copia de WPChat aquí, luego instala y activa este plugin en tu sitio web.

Si necesitas ayuda con este paso, consulta esta guía para principiantes sobre cómo instalar un plugin de WordPress.

Una vez activado el plugin, estará listo para crear su asistente de chat y conectarlo a Facebook Messenger.

Paso 2: Crear un nuevo asistente de chat

Después de activar WPChat, verás un nuevo elemento de menú WPChat en tu panel de WordPress. Haz clic en él para abrir la configuración del plugin.

En la pantalla de WPChat, haz clic en el botón Configurar para empezar a crear tu asistente de chat.

empezar a configurar wpchat

Desde aquí, puedes introducir el nombre de usuario para tu Facebook Messenger.

También puedes introducir los datos de contacto de cualquiera de las otras aplicaciones de mensajería aquí.

conectar tu widget de chat de Facebook Messenger

Como puedes ver, WPChat ofrece a tus visitantes muchas formas de contactarte desde tu sitio de Elementor.

Simplemente introduce tu número y haz clic en Siguiente para continuar.

haz clic en siguiente para confirmar la conexión

Después de eso, puedes elegir un tema para tu asistente de chat. WPChat ofrece 3 opciones prediseñadas: Básico, Noche y Pastel.

Una vez que hayas seleccionado un tema, haz clic en Siguiente para pasar a la configuración de visibilidad.

elige un tema para tu asistente de chat de Facebook

Paso 3: Elegir la visibilidad para el asistente de chat de Facebook

Ahora decidirás dónde aparece la opción de chat en tu sitio de Elementor. Tienes 2 opciones principales para eso: mostrar en todas las páginas o mostrar solo en páginas específicas.

elegir dónde quieres mostrar tu chat de Facebook Messenger en WordPress

Si elegiste la opción mostrar en todas las páginas, puedes desplazarte hacia abajo y excluir ciertas partes de tu sitio web.

Simplemente elige las páginas, categorías, etiquetas o tipos de publicación personalizados donde no quieras mostrar el asistente de chat.

Después de configurar tus filtros, haz clic en Siguiente para continuar.

excluir partes de tu sitio web del asistente de chat

En caso de que elijas mostrar solo en páginas específicas, puedes usar los filtros para controlar dónde aparece el asistente.

Como antes, configura tus filtros y haz clic en el botón Siguiente.

selecciona las páginas, categorías, etiquetas o tipos de publicación personalizados

Finalmente, puedes introducir la clave de licencia que recibiste con el plugin WPChat.

Introduce la clave y haz clic en Finalizar configuración y habrás terminado con la configuración inicial.

introduce tu clave de licencia de wpchat para completar la configuración

Así de fácil, tu asistente de chat de Messenger ya está creado y listo para ser personalizado.

Paso 4: Personalizar el asistente de chat de Facebook

En el panel de WPChat, haz clic en el botón Personalizar.

empezar a personalizar tu asistente de chat de Messenger

Esto abre el editor en vivo, donde verás las opciones de personalización en la barra lateral izquierda.

Para seguir tus cambios, verás una vista previa en vivo de tu asistente de chat de Messenger en la derecha.

personalizador en vivo para el asistente de chat de Messenger

Empecemos ajustando los colores para mostrarte cómo funciona el personalizador.

Selecciona Paleta de colores en el menú de la izquierda para ver tus opciones. 

empieza a editar tu paleta de colores

WPChat proporciona varias paletas de colores predefinidas que puedes aplicar con un solo clic:

  • Predeterminado
  • Flor mística
  • WhatsApp
  • WhatsApp Oscuro
  • Minimalista

Si quieres aún más control, haz clic en Personalizado y elige el color tú mismo.

opciones de esquema de color para tu asistente de chat

Una vez que estés satisfecho con tus elecciones de color, haz clic en Guardar para confirmar los cambios.

A continuación, haz clic en el botón Atrás para volver al menú principal de personalización.

volver a las opciones de personalización principales

Para la siguiente personalización, selecciona Encabezado.

Aquí es donde puedes añadir un mensaje de bienvenida que los visitantes verán después de hacer clic en tu asistente de chat.

empezar a editar la cabecera de tu chat

Introduce un saludo amistoso en el campo Encabezado.

Recuerda que sea corto y conciso para que los visitantes puedan leerlo fácilmente.

introducir el encabezado para el asistente de chat de Facebook

Como antes, haz clic en Guardar para conservar tus cambios.

Como puedes ver, es bastante fácil personalizar tu asistente de chat de Messenger, todo sin tocar ningún tipo de código.

También puedes probar otras opciones de personalización, incluyendo el avatar del asistente, el icono de chat, las secciones visibles y más.

Paso 5: Configura tu agente de chat

En tu panel de WordPress, navega hasta el menú WPChat » Agentes

Estos agentes pueden representar a tu equipo de soporte, completos con fotos y nombres coincidentes.

Para continuar, haz clic en el botón Editar.

comienza a editar tu agente de chat de messenger

Primero, vamos a personalizar este agente.

Haz clic en Subir para seleccionar una imagen que te represente a ti o a tu equipo.

empieza a configurar una foto de perfil para el agente de chat de Facebook Messenger

Podría ser una foto profesional tuya o el logotipo de tu empresa.

A continuación, introduce un nombre adecuado para el agente en el campo Nombre.

También puedes actualizar la información de contacto de Facebook u otras plataformas de mensajería desde aquí.

edita el nombre y número de teléfono de tu agente

Una vez que hayas hecho eso, haz clic en el botón Guardar cambios en la parte superior de la página.

¡Eso es todo! Tu asistente de chat de Facebook Messenger ya está activo en tu sitio de Elementor. 

Los visitantes ahora pueden hacer clic en el asistente para empezar a chatear contigo usando Facebook Messenger, así de fácil.

ejemplo de un widget de Facebook Messenger

Conclusión y reflexiones finales

Ahora sabes cómo añadir Facebook Messenger a tu sitio web de Elementor de forma sencilla. Así de fácil, puedes conectar fácilmente con los visitantes, generar confianza, aumentar las ventas y mucho más.

Si quieres llevar tu sitio web de Elementor al siguiente nivel, también puedes usar WPChat para añadir preguntas frecuentes. De esta manera, los visitantes de tu sitio web podrán obtener respuestas instantáneas donde quieran.

¿Listo para conectar con los visitantes en tiempo real? ¡Empieza hoy mismo con WPChat!

¿Quieres que tu asistente de chat sea aún más atractivo? También puedes consultar nuestra guía sobre cómo personalizar tu asistente de chat de WordPress.