El widget de chat del sitio web permite a los visitantes del sitio web comunicarse contigo a través del chat en vivo o mediante otros canales de mensajería a los que se haya conectado.
Mira el vídeo de abajo para una guía paso a paso sobre Cómo conectar el chat del sitio web a respond.io.
Paso 1: Ve a Ajustes > Canales
Paso 2: Haga clic en Añadir canal > Chat del sitio web > Conectar
Paso 3: Rellena la(s) página(s) web donde se añadirá el Widget.
Consulte las siguientes opciones sobre cómo se pueden incluir en la lista blanca los sitios web.
Si el usuario agregahttps://app.respond.io, entonces solohttps://app.respond.ioserá incluido en la lista blanca. Cualquier otro subdominio o root no debería funcionar.
Si el usuario añadehttps://*.respond.io, entonces todos los subdominios incluyendo el dominio raíz se incluirán en la lista blanca.
Si el usuario añadehttps://respond.io, entonces solo el dominio raíz será incluido en la lista blanca.
Paso 4:Seleccione un tema Color para el Widget usando el selector de colores interactivo.
Elige un color que coincida con tu marca color y sitio web.
Paso 5:Seleccione un ícono para que el widget se muestre en el sitio web. Si prefiere subir un icono personalizado, puede subir un icono cuadrado con un tamaño recomendado de 256px x 256px.
Los Widgets pueden ser personalizados una vez conectados.
Paso 6: Haga clic enSiguiente> Agregue el script a su sitio web preferido. También puede enviar las instrucciones de instalación a otra persona por correo electrónico.
Puede requerir que un webmaster o administrador técnico ayude a instalar el widget de chat en el sitio web. Por favor, solicite ayuda si es necesario.
Dependiendo de qué sistema usas para crear y administrar tu sitio web, hemos creado una guía paso a paso para guiarte a través de la instalación de un Widget de Chat en tu sitio web.
Para otras plataformas o servicios, vaya a la fuente HTML de la página. Pegue el script antes de la etiqueta </body>.
<body>
...
...
...
<Pegue el script aquí>
</body>Si necesita ayuda, puede reenviar el script junto con las instrucciones de instalación al administrador de su sitio web. Seleccione la casilla de verificación respectiva e introduzca la dirección de correo electrónico de alguien que puede ayudarle a instalar el plugin de chat.
El Widget de chat del sitio web respond.io aparecerá en su sitio una vez que el script se haya instalado correctamente.
Paso 1:En tu espacio de trabajo, ve aAjustes>Canal
Paso 2: Busque el Canal de Chat del Sitio Web > haga clic en Personalizar
Personalice el widget del sitio web para que coincida con la apariencia del sitio web 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 hecha al widget reflejará sobre el widget para ayudarle a tener una mejor idea de lo que está personalizando.
Puede personalizar lo siguiente para cambiar la apariencia del widget en el sitio web.
Campo | Descripción |
|---|---|
Color del tema | El color seleccionado se utilizará como el color principal de su widget. |
Color del texto | El color seleccionado se utilizará como el 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. Puedes subir 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 está definido, no aparecerá ningún mensaje emergente a los visitantes del sitio web. |
Validación del icono de chat del sitio web:
Tamaño máximo de archivo: 1MB
Dimensión máxima del archivo: 256 x 256 px
Forma: Cuadrado
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 del 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 del chat del sitio web y el lado de la pantalla. |
Tamaño del widget | Los usuarios pueden elegir el tamaño del widget desde pequeño, estándar o grande. |
Opciones de visualización | Los usuarios pueden elegir mostrar este widget en el escritorio, dispositivos móviles o ambos. |
Campo | Descripción |
|---|---|
Título | El título se mostrará en la parte superior de su widget de chat. |
Lema | El Tagline se mostrará bajo el título. |
Logo del chat del sitio web | Arrastra tu imagen del logotipo aquí para que se muestre en la parte superior del chat del sitio web. El formato puede estar en PNG, SVG o JPG y el tamaño del archivo no es superior a 4,0 MB. |
Iconos del canal | Esta opción permitirá que los Contactos se pongan en contacto contigo a través de su Canal preferido siempre que se den las opciones. Puedes añadir hasta seis Canales y se mostrará en la parte superior del Widget de Chat del Sitio Web. |
Color de los iconos del canal | Los iconos del canal pueden mostrarse de forma blanca o coloreada en tu widget de chat. Seleccione Blanco o Coloreado para ir con el tema Color de su widget de chat. |
Validación del Logotipo de Chat del Sitio Web:
Tamaño máximo de archivo: 4MB
Dimensión máxima del archivo: 1024 x 1024 px
Forma: Cuadrado
Si el Widget de Chat del Sitio Web nunca ha sido configurado antes, los canales conectados con información adecuada aparecerán por defecto como enlaces al Canal de Widget.
Puede añadir los enlaces del canal del widget y especificar la información necesaria para el canal seleccionado.
Aquí está la lista de Campo de Entrada requerido para cada uno de los Enlaces de Canal soportados.
Enlaces de canal | Campo de entrada requerido |
|---|---|
Número de teléfono de WhatsApp. | |
Facebook Messenger | ID de página de Facebook |
Telegram | Nombre del bot de telegrama |
Twitter ID | |
LINE | ID de LINE |
Viber | Nombre de cuenta pública de Viber |
SMS | Número de teléfono de 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 QR e icono |
Validación del icono del canal:
Tamaño máximo de archivo: 1MB
Dimensión máxima del archivo: 256 x 256 px
Forma: Cuadrado
Al activar esta opción, se añadirá un formulario de pre-chat a tu chat de sitio web. Si está habilitado, los visitantes de su sitio web recibirán un formulario para rellenar antes de iniciar el chat.
Con esta opción activada, puede incluir campos personalizados adicionales cuando sea necesario. Además de eso, también puede personalizar la etiqueta para los campos por defecto en cómo aparecen a sus contactos.
Las etiquetas de campo se pueden personalizar a un idioma diferente para que coincida con el idioma de la página web.
Campo | Descripción |
|---|---|
Texto de la barra de entrada | Este texto funcionará como un marcador de posición en el área de tecleo. |
Tipo de letra del texto | La fuente que se utilizará para mostrar la fuente en el widget de chat del sitio web. |
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.
Cuando se utiliza esta opción, el widget se ocultará por completo. Hasta que se haya hecho clic en la referencia de fondo o cuando se abra el chat a través de la API programática.
#webchat_widget
Usando el ancla anterior puede crear un botón en su página, para abrir el widget una vez que haga clic.
Usando esta opción puedes eliminar la marca respond.io de tu Widget.
Paso 1: Haga clic en Ajustes > Canales
Paso 2: Localice el Chat del Sitio Web > haga clic en Administrar
Paso 3: En la página Configuración del Chat del Sitio Web verá las siguientes configuraciones:
Chat Link - El enlace URL para que tu Contacto llegue a tu Canal.
Nombre del Canal - El Nombre del Canal se puede cambiar y se utiliza internamente para identificar el Canal.
Dominios web - Sitio(s) web que están conectados a tu Widget.
Website Chat Code - 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
Los usuarios registrados de su sitio web pueden ser identificados añadiendo un simple código JavaScript al código de su sitio web. Una vez que el identificador pasado se iguale 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, seguimos denominándolos como “Contactos”.
window.__respond_settings = {
identifier: "customer@example. om",
firstName: "Jane",
last tName: "Doe",
phone: "60123456789",
email: "customer@example. om",
profilePic: "https://static.independent.co. k/s3fs-public/miniaturas/image/2015/07/08/14/pic. pg",
countryCode: "MY",
language: "es",
// Campos personalizados
custom_fields: {
// slugs de los campos personalizados
número: 123,
descripción: "algún texto",
},
};Guía sobre cómo usar el código
Editar el código (dado a continuación) para enviar respond.io el identificador del usuario conectado actualmente. Esta puede ser la dirección de correo electrónico o el ID de contacto o basado en cualquier otro campo de Contacto. Tenga en cuenta que un identificador es un campo obligatorio.
Pegue el código justo en la etiqueta head de cada página donde quiera que aparezca el chat del sitio web.
El script para identificar a los usuarios registrados debe colocarse por encima del código de chat del sitio web que se puede encontrar en el diálogo de configuración del chat del sitio web.
También puede enviar campos de contactos respond.io asociados con sus contactos para que almacenemos el campo Contacto durante el proceso de creación de contactos. El nombre del campo (o slug) se puede encontrar en el módulo Campos de contacto.
Tenga en cuenta que si está utilizando esta característica, el formulario de pre-chat será ignorado, lo que significa que los Contactos no necesitan rellenar su información antes de iniciar una conversación.
El ejemplo anterior es pasar una dirección de correo electrónico como identificador y durante el proceso de creación de Contacto, todos los campos pasados serán almacenados.
El Widget de Chat del Sitio Web se puede abrir y cerrar a través de su código JavaScript del Sitio Web. Esto le permite crear un "Chat personalizado con nosotros" botón en su sitio web. y activa el widget de chat del sitio web para abrir cuando un visitante haga clic en el botón.
Abrir chat
Descripción: Abre el widget del chat.
Sintaxis: $respond.do("chat:open")
Cerrar chat
Descripción: Cierra el widget del chat.
Sintaxis: $respond.do("chat:close")
Se abrió la caja de chat
Descripción: Maneja el evento abierto del widget del chat (activa la función callback).
Sintaxis:$respond.on("chat:opened", callback)
La caja de chat fue cerrada.
Descripción: Maneja el evento cerrado del widget del chat (activa la función callback).
Sintaxis:$respond.on("chat:closed", callback)
¿Está abierto el chat?
Descripción: Devuelve verdadero si el widget del chat está abierto, sino falso.
Sintaxis: $respond.is("chat:open")
¿Está cerrado el chat?
Descripción: Devuelve verdadero si el widget del chat está cerrado, sino falso.
Sintaxis: $respond.is("chat:closed")
Podría haber algunas razones por las que los mensajes no se están enviando:
El contacto ha abandonado el sitio web.
La inactividad del contacto'puede exceder el periodo de espera.
El cliente de contacto'puede tener problemas de conexión a Internet.
Asegúrese de que el código está instalado correctamente. Consulte 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. Refiérase al paso 3 de Conectando el widget de chat del sitio web sobre cómo incluir tu dominio en la lista blanca.
Artículos relacionados 👩💻