El widget de chat del sitio web permite a los visitantes del sitio web comunicarse con usted a través del chat en vivo o mediante otros canales de mensajería a los que se haya conectado.
Conectando un widget de chat del sitio web
Mire el video a continuación para obtener una guía paso a paso sobre cómo conectar el chat del sitio web a respond.io.
Paso 1: Vaya a Configuración > Canales
Paso 2: Haz clic en Agregar canal > Chat del sitio web > Conectar
Paso 3: Complete el(los) sitio(s) web donde se agregará el widget.
Consulte lo siguiente para obtener información sobre cómo incluir sitios web en la lista blanca.
Si el usuario agrega
https://app.respond.io, solohttps://app.respond.ioserá incluido en la lista blanca. Cualquier otro subdominio o raíz no debería funcionar.Si el usuario agrega
https://*.respond.io, entonces todos los subdominios, incluido el dominio raíz, serán incluidos en la lista blanca.Si el usuario agrega
https://respond.io, solo el dominio raíz será incluido en la lista blanca.
Paso 4:Seleccione un color de tema para el widget usando el selector de color interactivo.
Elija un color que combine con su marca color y sitio web.
Paso 5:Seleccione un ícono para que el widget se muestre en el sitio web. Si prefiere cargar un ícono personalizado, puede cargar un ícono cuadrado con un tamaño recomendado de 256px x 256px.
Los widgets se pueden personalizar aún más una vez conectados.
Paso 6: Haga clic enSiguiente> Agregue el script a su sitio web preferido. Alternativamente, puede enviar las instrucciones de instalación a otra persona por correo electrónico.
Instalación del widget de chat
Es posible que necesite un webmaster o administrador técnico para ayudar a instalar el widget de chat en el sitio web. Si es necesario, busque ayuda.
Dependiendo del sistema que utilice para crear y administrar su sitio web, hemos creado una guía paso a paso para guiarlo en el proceso de instalación de un widget de chat en su sitio web.
Para otras plataformas o servicios, navegue hasta el código fuente HTML de la página. Pegue el script antes de la etiqueta </body> .
<body>
...
...
...
<Paste Script Here>
</body>Si necesita ayuda, puede optar por reenviar el script junto con las instrucciones de instalación al administrador de su sitio web. Seleccione la casilla de verificación correspondiente e ingrese la dirección de correo electrónico de alguien que pueda ayudarlo a instalar el complemento de chat.
El widget de chat del sitio web respond.io aparecerá en su sitio una vez que el script se haya instalado correctamente.
Personalizar el widget de chat
Paso 1:En su espacio de trabajo, vaya aConfiguración>Canal
Paso 2: Ubica el canal de chat del sitio web > haz clic en Personalizar
Personaliza el widget del sitio web para que coincida con la apariencia de su sitio, para que el widget se vea sin problemas. En el lado derecho de la página, hay una vista previa del widget de chat del sitio web. Cualquier personalización realizada en el widget se reflejará en el mismo para ayudarle a tener una mejor idea de lo que está personalizando.
Pantalla & Apariencia
Puede personalizar lo siguiente para cambiar la apariencia del widget en el sitio web.
Campo | Descripción |
|---|---|
Color del tema | El color elegido se utilizará como color principal de su widget. |
Color del texto | El color elegido se utilizará como color de texto principal de su widget. |
Icono de chat del sitio web | El icono seleccionado se utiliza dentro de la burbuja del widget junto con el color del tema. Puede cargar un icono personalizado si es necesario. |
Mensaje emergente | El mensaje emergente se muestra a los visitantes del sitio web una vez al día, 5 segundos después de la carga de la página. Si no se define, no aparecerá ningún mensaje emergente para los visitantes del sitio web. |
Validación del ícono de chat del sitio web:
Tamaño máximo de archivo: 1 MB
Dimensión máxima del archivo: 256 x 256 px
Forma: Cuadrada
Posición
Campo | Descripción |
|---|---|
Alinear a | Los usuarios pueden elegir especificar una posición para mostrar el widget a la izquierda o a la derecha de la plataforma. |
Espaciado vertical | Los usuarios pueden especificar la cantidad de espacio vertical entre el widget de chat del sitio web y la parte inferior de la pantalla. |
Espaciado horizontal | Los usuarios pueden especificar la cantidad de espacio horizontal entre el widget de chat del sitio web y el costado de la pantalla. |
Tamaño del widget | Los usuarios pueden elegir el tamaño del widget entre Pequeño, Estándar o Grande. |
Opciones de visualización | Los usuarios pueden elegir mostrar este widget en el escritorio, en dispositivos móviles o en ambos. |
Elementos del encabezado
Campo | Descripción |
|---|---|
Título | El título se mostrará en la parte superior de tu widget de chat. |
Lema | El eslogan se mostrará debajo del título. |
Logotipo del chat del sitio web | Coloque la imagen de su logotipo aquí para que se muestre en la parte superior del chat del sitio web. El formato puede ser PNG, SVG o JPG y el tamaño del archivo no debe superar los 4,0 MB. |
Iconos de canal | Esta opción permitirá que los contactos se comuniquen con usted a través de su canal preferido, siempre que se brinden las opciones. Puedes agregar hasta seis canales y se mostrarán en la parte superior del widget de chat del sitio web. |
Color de los iconos del canal | Los íconos del canal se pueden mostrar en forma blanca o de color en su widget de chat. Seleccione Blanco o Color para combinar con el color del tema de su widget de chat. |
Validación del logotipo del chat del sitio web:
Tamaño máximo de archivo: 4 MB
Dimensión máxima del archivo: 1024 x 1024 px
Forma: Cuadrada
Iconos de canal
Si el widget de chat del sitio web nunca se ha configurado antes, los canales conectados con información adecuada aparecerán de manera predeterminada como enlaces de canales del widget.
Puede agregar el widget Enlaces de canal y especificar la información necesaria para el canal seleccionado.
Aquí está la lista de campos de entrada necesarios para cada uno de los enlaces de canal admitidos.
Enlaces del canal | Campo de entrada obligatorio |
|---|---|
Número de teléfono de WhatsApp | |
Facebook Messenger | ID de página de Facebook |
Telegrama | Nombre del bot de Telegram |
Gorjeo | ID de Twitter |
Línea | ID de Línea |
Viber | Nombre de la cuenta pública de Viber |
SMS | Número de teléfono SMS |
Correo electrónico | Dirección de correo electrónico |
Llamada telefónica | Número de teléfono |
Enlace personalizado | Dirección URL e icono |
QR personalizado | Imagen e icono QR |
Validación para el ícono del canal:
Tamaño máximo de archivo: 1 MB
Dimensión máxima del archivo: 256 x 256 px
Forma: Cuadrada
Formulario previo al chat
Al habilitar esta opción, se agregará un formulario previo al chat de su sitio web. Si está habilitado, a los visitantes de su sitio web se les presentará un formulario para completar antes de comenzar el chat.
Con esta opción habilitada, puede incluir campos personalizados adicionales cuando sea necesario. Además de eso, también puedes personalizar la etiqueta de los campos predeterminados para que aparezcan en tus contactos.
Las etiquetas de campo se pueden personalizar a un idioma diferente para que coincida con el idioma de la página web.
Ajustes adicionales
Campo | Descripción |
|---|---|
Texto de la barra de entrada | Este texto funcionará como marcador de posición en el área de escritura. |
Fuente del texto | La fuente que se utilizará para mostrar la fuente en el widget de chat del sitio web. |
Restringir archivos adjuntos entrantes
Cuando esta opción está marcada, el visitante del sitio web no tiene la opción de adjuntar un archivo adjunto en el widget de chat del sitio web.
Mantener oculto el chat del sitio web
Al utilizar esta opción el widget quedará completamente oculto. Hasta que se haga clic en la referencia de anclaje o cuando se abra el chat a través de la API programática.
#widget de chat web
Usando el ancla anterior puedes crear un botón en tu página, para abrir el widget una vez que hagas clic.
Ocultar la marca de Respond.io
Usando esta opción puedes eliminar la marca respond.io de tu widget.
Configuración del canal
Paso 1: Haz clic en Configuración > Canales
Paso 2: Ubica el chat del sitio web > haz clic en Administrar
Paso 3: En la página de configuración del chat del sitio web verá las siguientes configuraciones:
Enlace de chat - El enlace URL para que tu contacto acceda a tu canal.
Nombre del canal - El nombre del canal se puede cambiar y se usa internamente para identificar el canal.
Dominios de sitios web - Sitios web que están conectados a su widget.
Código de chat del sitio web : el código que puede pegar en la fuente HTML de su sitio web si necesita recuperar el fragmento de código generado.
Si no incluyes tu sitio web en esta lista, tu widget no se cargará. Puedes agregar múltiples URLs si usas el plugin en varios sitios web.
Paso 4: Haga clic en Guardar cambios para actualizar la página de configuración del chat del sitio web
Identificación de usuarios conectados
Los usuarios que han iniciado sesión en su sitio web se pueden identificar agregando un código JavaScript simple al código de su sitio web. Una vez que el identificador pasado coincida con un contacto existente, se reanudará la conversación actual.
El término “usuario” se utiliza en el contexto de su sitio web. En la plataforma respond.io, continuamos refiriéndonos a ellos como “Contactos”.
window.__respond_settings = {
identifier: "customer@example.com",
firstName: "Jane",
lastName: "Doe",
phone: "60123456789",
email: "customer@example.com",
profilePic: "https://static.independent.co.uk/s3fs-public/thumbnails/image/2015/07/08/14/pic.jpg",
countryCode: "MY",
language: "en",
// Campos personalizados
custom_fields: {
// slugs de campos personalizados
number: 123,
description: "some text"
}
};Guía sobre cómo utilizar el código
Edite el código (que aparece a continuación) para enviar a respond.io el identificador del usuario que ha iniciado sesión actualmente. Esta puede ser la dirección de correo electrónico o el ID de contacto o basarse en cualquier otro campo de contacto. Tenga en cuenta que el campo
identifieres obligatorio.Pegue el código directamente en la etiqueta de encabezado
de cada página donde quiera que aparezca el chat del sitio web.El script para identificar a los usuarios conectados debe colocarse encima del código de chat del sitio web, que se puede encontrar en el cuadro de diálogo de configuración del chat del sitio web.
También puede enviar campos de contactos de respond.io asociados con sus contactos para que almacenemos el campo de contacto durante el proceso de creación del contacto. El nombre del campo (o slug) se puede encontrar en el módulo Campos de contacto.
Tenga en cuenta que si utiliza esta función, se ignorará el formulario previo al chat, lo que significa que los contactos no necesitarán completar su información antes de iniciar una conversación.
El ejemplo anterior pasa una dirección de correo electrónico como identificador y durante el proceso de creación de contacto, se almacenarán todos los campos de contacto pasados.
Control programático (API para usuarios)
El widget de chat del sitio web se puede abrir y cerrar a través del código JavaScript de su sitio web. Esto le permite crear un botón personalizado "Chatea con nosotros" en su sitio web y activar el widget de chat del sitio web para que se abra cuando un visitante haga clic en el botón.
Comportamiento
Abrir el chat
Descripción: Abre el widget de chat.
Sintaxis:
$respond.do("chat:open")
Cerrar chat
Descripción: Cierra el widget de chat.
Sintaxis:
$respond.do("chat:close")
Oyentes de eventos
Se abrió el chatbox
Descripción: Maneja el evento de apertura del widget de chat (activa tu función de devolución de llamada
).Sintaxis:
$respond.on("chat:opened", callback)
Se cerró la chatbox.
Descripción: Maneja el evento cerrado del widget de chat (activa tu función de devolución de llamada
).Sintaxis:
$respond.on("chat:closed", callback)
Métodos de verificación de estado
¿Está abierto el chat?
Descripción: Devuelve
verdaderosi el widget de chat está abierto, de lo contrariofalso.Sintaxis:
$respond.is("chat:open")
¿El chat está cerrado?
Descripción: Devuelve
verdaderosi el widget de chat está cerrado, de lo contrariofalso.Sintaxis:
$respond.is("chat:cerrado")
Preguntas frecuentes y solución de problemas
¿Por qué mis mensajes no llegan a Contactos?
Podría haber algunas razones por las cuales los mensajes no se entregan:
El contacto ha abandonado el sitio web.
La inactividad del contacto puede exceder el período de espera.
Es posible que el cliente de contacto tenga problemas de conexión a Internet.
¿Por qué no aparece mi widget en mi sitio web?
Asegúrese de que el código esté instalado correctamente. Consulta las instrucciones aquí sobre cómo instalar el widget de chat del sitio web.
Asegúrese de incluir en la lista blanca el sitio web donde se instalará el widget. Consulta el Paso 3 de Conectar el widget de chat del sitio web sobre cómo incluir tu dominio en la lista blanca.
