Chat en vivo para sitios web

Explicación de la configuración del chat en vivo del sitio web

Este documento le ayudará a configurar completamente el chat en vivo de su sitio web. Explica cómo crear y usar los ajustes adicionales para la bandeja de entrada del sitio web deseado. Compatibilidad y requisitos​ El panel web y el widget de chat en vivo funcionan con la mayoría de los navegadores web modernos. Estas son las versiones de navegador compatibles: - Mozilla Firefox: desde la v52 en adelante - Google Chrome: desde la v57 en adelante - Chromium: desde la v57 en adelante - Apple Safari: desde la v14.1 en adelante - Microsoft Edge: desde la v16 en adelante Estas son las versiones de sistema operativo móvil compatibles para la aplicación móvil de Chatwoot: - Android: desde la v5.0 en adelante - iOS: desde la v11.0 en adelante ¿Cómo crear un canal de sitio web en Chatwoot? Paso 1. Vaya a la página de Bandejas de entrada. Diríjase a Configuración → Bandejas de entrada → botón "Agregar bandeja de entrada". Paso 2. Haga clic en el ícono "Sitio web". Paso 3. Ingrese el nombre de su sitio web, URL y otros detalles como se describe a continuación. Los campos disponibles se explican a continuación. 1. Nombre del sitio web Ingrese el nombre de su sitio web. Por ejemplo, Example Inc. 2. Dominio del sitio web Ingrese la URL de su sitio web. Por ejemplo, www.example.com 3. Color del widget Haga clic en la paleta y seleccione un color para el widget de chat en vivo de su sitio web. 4. Encabezado de bienvenida Escriba un mensaje de saludo para sus clientes. Por ejemplo, ¡Hola! 👋 5. Lema de bienvenida Por ejemplo, Estamos aquí para ayudarte con tus preguntas. Escríbenos lo que quieras, o comparte tu feedback. 6. Activar/desactivar saludo del canal Active para enviar el mensaje de saludo cuando el cliente inicie la conversación 7. Mensaje de saludo del canal Escriba un saludo para iniciar la conversación. Por ejemplo: Hola. ¿En qué podemos ayudarte? Una vez ingresados todos los detalles, haga clic en el botón “Crear bandeja de entrada”. Paso 4. "Agregue agentes" a la bandeja de entrada de su sitio web. Las conversaciones serán asignadas a los agentes solo si están asociados a la bandeja de entrada. Incluso si es Administrador, debe agregarse como agente a la Bandeja para poder verla en su pantalla. Seleccione los agentes del menú desplegable y haga clic en Agregar agentes. Si no hay agentes añadidos, siga los pasos para agregar agentes. Paso 5. ¡Listo! Ha creado exitosamente una bandeja de entrada de sitio web. Ahora, agregue el widget a su sitio web. Copie y pegue el fragmento de código que aparece en la página en su sitio web y comience a atender a sus clientes. Puede hacer clic en el botón Copiar para copiar y luego pegarlo en el archivo raíz de su sitio web. Si hace clic en el botón "Más ajustes", será dirigido a la Configuración Adicional de la Bandeja de Entrada. Si hace clic en el botón "Llévame allí", será dirigido a la bandeja de entrada que acaba de crear. Paso 6. Si desea actualizar los agentes con acceso a la bandeja de entrada, vaya a Configuración → Bandejas de entrada. Podrá ver la bandeja de entrada de su sitio web en la lista. Haga clic en Configuración. Podrá ver el código así como la lista de agentes que tienen acceso a la bandeja. Complete la configuración de la bandeja de entrada del sitio web Ya tiene una bandeja de entrada funcional en su sitio web. Veamos los ajustes adicionales de la Bandeja de Entrada.​ En su pantalla de Bandejas de entrada, haga clic en el ícono de engranaje para llegar a la página de Configuración. Verá la siguiente pantalla: Pestaña de Configuración Desplácese hacia abajo para ver más ajustes, donde podrá configurar las notificaciones que desea recibir cuando la bandeja de entrada de su sitio web comience a funcionar. Aquí tiene un par de ejemplos para su comprensión: Activar caja de recolección de correo electrónico está activado por defecto. Esto significa que se mostrará un mensaje automático para solicitar el correo electrónico del usuario una vez que inicie la conversación. El cliente/usuario final recibirá un mensaje solicitando introducir su dirección de correo. Habilitar CSAT. Una vez activado, la encuesta de Satisfacción del Cliente se mostrará cada vez que un ticket sea resuelto. Los resultados del CSAT se podrán consultar después en la sección de Informes. Haga clic en el botón "Actualizar" para guardar los cambios realizados. Pestaña de Colaboradores​ Haga clic en la pestaña "Colaboradores". Aquí puede agregar Agentes a la Bandeja de entrada o eliminar Agentes ya añadidos. También puede activar o desactivar la asignación automática de nuevas conversaciones a los agentes añadidos en esta bandeja. Haga clic en Actualizar para guardar los cambios. Pestaña de Horario Laboral​ Haga clic en la pestaña "Horario laboral". En esta sección, puede establecer el horario laboral de su equipo. Marque la casilla para Activar disponibilidad horaria para esta bandeja de entrada si tiene un horario laboral bien definido. Una vez marcado, se abrirá una nueva sección como se muestra a continuación. Puede escribir el mensaje que se mostrará a los clientes fuera del horario laboral. Nota: Cuando Captain está habilitado en una bandeja de entrada, el mensaje de no disponibilidad se suprime automáticamente. Captain gestionará las conversaciones directamente, incluso fuera del horario laboral. El mensaje de no disponibilidad solo se enviará si Captain transfiere la conversación a un agente humano o si Captain no está configurado para la bandeja. También puede seleccionar el horario laboral disponible para cada día de la semana junto con la zona horaria correspondiente. Haga clic en el botón Actualizar ajustes de horario laboral. Pestaña de Formulario previo al Chat​ Haga clic en la pestaña "Formulario previo al chat". Con esto, podrá recopilar información de sus clientes tan pronto como ingresen a la ventana de chat en vivo/widget. Puede utilizar esto para recabar nombre, correo electrónico y más antes de iniciar el chat. Los campos que se ven, se describen a continuación: 1. Activar formulario previo al chat Seleccione Sí o No. Sí si quiere usar el formulario previo al chat. No si desea mantenerlo desactivado. 2. Mensaje previo al chat Escriba un mensaje para iniciar la conversación con el cliente. Por ejemplo: Hola, necesitamos algunos datos para atenderte mejor. 3. Campos del formulario previo al chat Marque los necesarios. Importante: "Nombre," "Correo electrónico" y "Teléfono" son los únicos atributos estándar para el formulario previo al chat. Los demás campos se crean mediante atributos personalizados. Si necesita campos personalizados en su formulario, créelos como atributos personalizados primero. Haga clic en el botón "Actualizar". El formulario previo al chat ya está habilitado. Pestaña de Configuración​ Haga clic en la pestaña “Configuración”. Aquí puede encontrar el fragmento de código para copiar en su sitio web. Puede hacer clic en el botón Copiar para copiar el código y pegarlo en el archivo raíz de su sitio web. Pestaña Constructor de Widget​ Puede personalizar su widget web con los ajustes simples que se encuentran en esta página. Podrá ver los cambios en tiempo real.

¿Cómo instalar chat en vivo usando Google Tag Manager?

Si estás utilizando Google Tag Manager en tu sitio web, puedes instalar Chatwoot desde el panel de Google Tag Manager creando una nueva etiqueta para Chatwoot. Para instalar el widget de chat en vivo de Chatwoot, sigue los pasos a continuación. Paso 1. Accede a la consola de Tag Manager​ Inicia sesión en el espacio de trabajo de Tag Manager con tu cuenta de Google. Verás un espacio de trabajo similar al que se muestra a continuación. Haz clic en el botón "Agregar una nueva etiqueta" desde el panel. Paso 2. Crea una nueva etiqueta con Configuración de Etiqueta​ Se mostrará una ventana emergente para crear una etiqueta. Cambia el nombre de "Etiqueta sin título" a "Chatwoot" o el nombre que prefieras. Haz clic en la configuración de la etiqueta y selecciona el tipo de etiqueta "HTML personalizado" de la lista. Copia el script desde la configuración de la bandeja de entrada en Chatwoot al área de texto del script HTML, como se muestra a continuación. Selecciona la casilla "Admitir document.write". Paso 3. Configura la Activación​ Haz clic en "Activación" y selecciona "Todas las páginas" de la lista. Haz clic en "Guardar" para guardar la etiqueta. Podrás ver la etiqueta listada bajo Cambios en el Espacio de Trabajo. Haz clic en "Enviar" para desplegar la etiqueta. Proporciona un nombre de versión y despliega los cambios haciendo clic en "Publicar". Paso 4. Márcalo como completado en tu lista de tareas​ Has implementado correctamente el widget de chat en vivo de Chatwoot en tu sitio web. Actualiza tu sitio web para ver el widget de chat en vivo aparecer en todas las páginas.

¿Cómo instalar un chat en vivo en un sitio web de Docusaurus?

Chatwoot se integra perfectamente con Docusaurus mediante el plugin @chatwoot/docusaurus-plugin. Este plugin te ayuda a instalar fácilmente el widget de chat en vivo de Chatwoot en un sitio web impulsado por Docusaurus. Para instalar el plugin, sigue los pasos rápidos que se explican a continuación. Paso 1. Añade el plugin a tu proyecto. yarn add @chatwoot/docusaurus-plugin o npm install @chatwoot/docusaurus-plugin --save Paso 2. Configura el plugin en docusaurus.config.js // docusaurus.config.js module.exports = { plugins: ["@chatwoot/docusaurus-plugin"], themeConfig: { chatwoot: { websiteToken: "Your website inbox token", baseURL: "https://app.chatwoot.com", // opcional enableInDevelopment: false, // opcional chatwootSettings: { hideMessageBubble: false, position: "left", // Esto puede ser left o right locale: "en", // Idioma a configurar useBrowserLanguage: false, // Establecer el idioma del widget desde el navegador del usuario darkMode: "auto", // [light, auto] type: "expanded_bubble", launcherTitle: "Chatea con nosotros", } } } };

¿Cómo instalar un chat en vivo en un sitio web de Webflow?

Si tu sitio web está creado con Webflow y quieres hablar en tiempo real con los visitantes de tu web, puedes añadir el widget de chat en vivo de Chatwoot a tu sitio. Sigue los pasos descritos a continuación. Paso 1. Crea una bandeja de entrada de sitio web en Chatwoot​ Consulta esta guía para obtener instrucciones detalladas sobre cómo configurar una bandeja de entrada de sitio web en Chatwoot. Paso 2. Instala el script generado en Webflow​ Inicia sesión en tu cuenta de Webflow y selecciona tu sitio web. Selecciona Configuración. ​Ve a Código personalizado -> Código del pie de página. Pega el script en "Código del pie de página". Guarda los cambios. Paso 3. Publica los cambios​ Haz clic en Publicar -> Selecciona el sitio web -> Publica en los dominios seleccionados. Paso 4. Verifica Visita tu sitio web y comprueba si el widget aparece en la página.

¿Cómo instalar un chat en vivo en un sitio web de Gatsby?

Si tienes un sitio web creado en Gatsby, puedes añadir un widget de chat en vivo de Chatwoot y hablar con tus visitantes en tiempo real. Esto se puede hacer en 3 sencillos pasos usando el plugin de Chatwoot para Gatsby. Paso 1. Agrega el plugin de Gatsby a tu proyecto​ Agrega gatsby-plugin-chatwoot a tu proyecto de Gatsby. npm install --save gatsby-plugin-chatwoot Si usas yarn, utiliza lo siguiente: yarn add gatsby-plugin-chatwoot Paso 2. Añade el plugin a tu archivo de configuración de Gatsby​ // En tu gatsby-config.js plugins: [ { resolve: `gatsby-plugin-chatwoot`, options: { baseUrl: "BASE_URL", // Obligatorio websiteToken: "WEBSITE_TOKEN", // Obligatorio includeInDevelopment: false, // Opcional chatwootSettings: {}, // Opcional }, }, ]; Puedes obtener tu token del sitio web y la URL base desde la configuración de la Bandeja de entrada en tu cuenta de Chatwoot. Si necesitas crear un nuevo canal para tu sitio web, sigue el procedimiento ilustrado aquí. Paso 3. Inicia tu servidor​ Ahora deberías poder ver el widget de Chatwoot en la página.

¿Cómo instalar chat en vivo en un sitio web de WordPress?

WordPress es un sistema de gestión de contenidos (CMS) popular. Si alojas tu sitio web en WordPress, puedes agregar un widget de chat en vivo de Chatwoot y hablar con tus visitantes en tiempo real. Esto se puede hacer en 4 pasos sencillos usando el plugin de WordPress de Chatwoot. Paso 1. Descarga el plugin de Chatwoot Descarga el archivo Zip del plugin de WordPress de Chatwoot más reciente desde GitHub, como se muestra a continuación. Paso 2. Sube el plugin a tu sitio web de WordPress Inicia sesión en tu cuenta de WordPress. Navega al Panel de Administración y haz clic en "Plugins" en la barra lateral. Podrás ver el botón "Agregar nuevo". Verás una opción para subir el plugin, como se muestra en la captura de pantalla a continuación. Haz clic en "Subir" y selecciona el archivo Zip que descargaste en el paso 1. Paso 3. Activa el plugin Una vez que el plugin se haya subido, verás una pantalla de éxito con la opción "Activar plugin", como se muestra a continuación. Haz clic en el botón "Activar plugin". ¡Felicidades! El plugin está instalado. Para completar la configuración, debes compartir las credenciales de la app de Chatwoot, como se muestra en los pasos siguientes. Paso 4. Configura el plugin Ahora, podrás ver "Chatwoot Settings" en el menú "Settings". Haz clic ahí para actualizar la configuración del chat en vivo. Se te presentará la pantalla de configuración como se muestra a continuación. Configura tu plugin de Chatwoot aquí para que funcione. Debes crear una bandeja de entrada de sitio web en tu instalación de Chatwoot. Por favor, consulta esta guía para crear un canal de bandeja de entrada de sitio web. Los campos del formulario se explican a continuación. 1. Chatwoot Website Token / Chatwoot Installation URL Una vez que crees una bandeja de entrada de canal de sitio web en tu instalación de Chatwoot, obtendrás un script. Puedes copiar el Token y la URL como se muestra a continuación. 2. Diseño del Widget Chatwoot soporta dos diseños para el widget de chat en vivo: diseño estándar y diseño de burbuja expandida. Elige el que prefieras. 3. Posición del Widget Puedes seleccionar en qué parte del sitio web colocar el widget de chat en vivo según tu preferencia. Las opciones disponibles son Izquierda y Derecha. 4. Idioma Chatwoot soporta más de 30 idiomas. El idioma predeterminado es inglés. 5. Texto del Lanzador Este es un campo opcional. Si usas el diseño de burbuja expandida, puedes usar el texto del lanzador para personalizar el texto que se muestra en la burbuja. Una vez que completes el formulario, haz clic en el botón "Guardar cambios". Además, asegúrate de haber configurado la bandeja de entrada del sitio web desde Chatwoot. Paso 5. Verifica que el plugin funcione correctamente ¡Visita tu sitio web y comprueba si el widget aparece en el sitio!

¿Cómo instalar un chat en vivo en una aplicación React Native?

Si tienes una aplicación React Native, puedes agregar el widget de chat en vivo de Chatwoot y hablar con tus visitantes en tiempo real. Esto se puede hacer en 3 simples pasos usando el plugin de Chatwoot. Paso 1. Crea una bandeja de entrada de sitio web en Chatwoot​ Por favor, consulta esta guía para obtener instrucciones detalladas sobre cómo configurar una bandeja de entrada de sitio web en Chatwoot. Paso 2. Agrega el plugin a tu proyecto​ Agrega uno de los siguientes plugins a tu proyecto. yarn add @chatwoot/react-native-widget o npm install --save @chatwoot/react-native-widget --save Esta librería depende de react-native-webview y async-storage. Por favor, sigue las instrucciones proporcionadas en la documentación. Instalación en iOS​ Si estás utilizando versiones de React Native > 60.0, es relativamente sencillo. cd ios && pod install Paso 3. Úsalo de la siguiente manera​ Reemplaza websiteToken y baseUrl con los valores correspondientes. import React, { useState } from 'react'; import { StyleSheet, View, SafeAreaView, TouchableOpacity, Text } from 'react-native'; import ChatWootWidget from '@chatwoot/react-native-widget'; const App = () => { const [showWidget, toggleWidget] = useState(false); const user = { identifier: 'john@gmail.com', name: 'John Samuel', avatar_url: '', email: 'john@gmail.com', identifier_hash: '', }; const customAttributes = { accountId: 1, pricingPlan: 'paid', status: 'active' }; const websiteToken = 'WEBSITE_TOKEN'; const baseUrl = 'CHATWOOT_INSTALLATION_URL'; const locale = 'en'; return ( <SafeAreaView style={styles.container}> <View> <TouchableOpacity style={styles.button} onPress={() => toggleWidget(true)}> <Text style={styles.buttonText}>Abrir widget</Text> </TouchableOpacity> </View> { showWidget&& <ChatWootWidget websiteToken={websiteToken} locale={locale} baseUrl={baseUrl} closeModal={() => toggleWidget(false)} isModalVisible={showWidget} user={user} customAttributes={customAttributes} /> } </SafeAreaView> ); }; const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', }, button: { height: 48, marginTop: 32, paddingTop: 8, paddingBottom: 8, backgroundColor: '#1F93FF', borderRadius: 8, borderWidth: 1, borderColor: '#fff', justifyContent: 'center', }, buttonText: { color: '#fff', textAlign: 'center', paddingLeft: 10, fontWeight: '600', fontSize: 16, paddingRight: 10, }, }); export default App; Y... Listo. Consulta el ejemplo completo aquí.

¿Cómo instalar un chat en vivo en una aplicación Next.js?

Si tienes una aplicación Next.js, puedes agregar el widget de chat en vivo de Chatwoot y hablar con tus visitantes en tiempo real. Para integrar Chatwoot con tu aplicación Next.js, necesitas un componente que cargue el script de Chatwoot. Puedes hacerlo en dos pasos rápidos. A continuación te lo ilustramos con un ejemplo. Este ejemplo muestra un componente de React que carga el script de Chatwoot de forma asíncrona. Paso 1. ¡Copia y crea! Copia el siguiente código y crea un archivo en tu carpeta components con el nombre ChatwootWidget.js. import React from 'react'; class ChatwootWidget extends React.Component { componentDidMount () { // Add Chatwoot Settings window.chatwootSettings = { hideMessageBubble: false, position: 'right', // This can be left or right locale: 'en', // Language to be set type: 'standard', // [standard, expanded_bubble] }; // Paste the script from inbox settings except the <script> tag (function(d,t) { var BASE_URL="<your-installation-url>"; var g=d.createElement(t),s=d.getElementsByTagName(t)[0]; g.src=BASE_URL+"/packs/js/sdk.js"; s.parentNode.insertBefore(g,s); g.async=!0; g.onload=function(){ window.chatwootSDK.run({ websiteToken: '<your-website-token>', baseUrl: BASE_URL }) } })(document,"script"); } render () { return null; } } export default ChatwootWidget Paso 2. Importar Importa el componente en tus páginas o en el componente de layout, como se muestra a continuación. import React, { Fragment } from 'react' // ... import ChatwootWidget from '../components/ChatwootWidget' const Page = () => ( <Fragment> <ChatwootWidget /> <Component {...}> </Fragment> ) export default Page Ahora deberías poder ver el widget de Chatwoot en la página.

¿Cómo instalar un chat en vivo en una aplicación Vue.js?

Para integrar Chatwoot con tu aplicación Vue.js, necesitas pegar el script del widget de Chatwoot en el archivo index.html de tu aplicación Vue.js. Aquí te mostramos cómo hacerlo: Paso 1. Obtén tu script del widget​ Tu script del widget se puede encontrar en la configuración de tu Buzón de Sitio Web. Ve a Configuración -> Buzones -> Selecciona tu canal de Sitio Web > pestaña Configuración. Si aún no has creado un buzón de sitio web, puedes encontrar las instrucciones paso a paso aquí. Paso 2. Copia el script​ Copia el script que fue creado en el campo code del canal. Paso 3. Pega el script aquí​ Abre tu proyecto Vue y pega el script en el archivo index.html, justo antes de la etiqueta de cierre </body>. <body> <noscript> <strong >Lo sentimos, pero <%= htmlWebpackPlugin.options.title %> no funciona correctamente si JavaScript no está habilitado. Por favor, actívalo para continuar.</strong > </noscript> <div id="app"></div> <!-- built files will be auto injected --> <!-- Chatwoot script goes here --> <script> (function (d, t) { var BASE_URL = "https://example.com"; var g = d.createElement(t), s = d.getElementsByTagName(t)[0]; g.src = BASE_URL + "/packs/js/sdk.js"; g.defer = true; g.async = true; s.parentNode.insertBefore(g, s); g.onload = function () { window.chatwootSDK.run({ websiteToken: "yZ7USzaEs7hrwUAHLGwjbxJ1", baseUrl: BASE_URL, }); }; })(document, "script"); </script> <!-- Chatwoot script goes here --> </body> Paso 4. Verifica​ Ahora deberías poder ver el widget de Chatwoot en la página. Se verá algo así: Módulo Vue.js, Nuxt.js​ Está disponible un módulo mantenido por la comunidad (Hecho por el increíble equipo de @huntersofbook) para integrar Chatwoot en tus proyectos Vue 3 y Nuxt 3. Puedes encontrar una demo aquí. - Ver módulo Vue 3. - Ver módulo Nuxt 3.

¿Cómo enviar información adicional del usuario a Chatwoot utilizando el SDK?

El SDK para sitios web de Chatwoot te permite enviar información adicional del usuario a Chatwoot. Si has instalado nuestro código en tu sitio web, el SDK expondrá el objeto window.$chatwoot. Para asegurarte de que el SDK se haya cargado completamente, por favor asegúrate de escuchar el evento chatwoot:ready de la siguiente manera: window.addEventListener("chatwoot:ready", function () { // Usa window.$chatwoot aquí // ... }); Si deseas escuchar los mensajes en el widget, puedes usar el siguiente evento. window.addEventListener('chatwoot:on-message', function(e) { console.log('chatwoot:on-message', e.detail) }) Configuraciones del SDK​ Para ocultar la burbuja, puedes utilizar la configuración mencionada a continuación. Nota: Si usas esto, también debes activar el widget. window.chatwootSettings = { hideMessageBubble: false, showUnreadMessagesDialog: false, // Deshabilita el cuadro de mensajes no leídos position: "left", // Esto puede ser left o right locale: "en", // Idioma a establecer useBrowserLanguage: false, // Establece el idioma del widget desde el navegador del usuario type: "standard", // [standard, expanded_bubble] darkMode: "auto", // [light, auto] // baseDomain: "yourdomain.com" // configura si deseas rastrear usuarios entre subdominios }; Usar el idioma del navegador automáticamente en tu widget de chat en vivo Para mostrar el widget de chat en vivo en la configuración de idioma del navegador del usuario, establece useBrowserLanguage en true en window.chatwootSettings como se indicó arriba. Nota: Si useBrowserLanguage está en true, se ignorará el locale especificado. Si el idioma del navegador no es compatible con chatwoot, se utilizará el valor indicado en locale. Si ese también falta, el widget utilizará el locale del panel de agente. Modo Oscuro​ El widget de chat en vivo de Chatwoot es compatible con modo oscuro desde la versión v2.4.0. Para habilitar el modo oscuro, sigue los pasos mencionados aquí. Diseños del widget​ Chatwoot admite dos diseños para el widget. 1. Estándar (por defecto) 2. Burbuja expandida Si utilizas la burbuja expandida, puedes personalizar el texto usado en la burbuja estableciendo el parámetro launcherTitle en chatwootSettings como se muestra a continuación. window.chatwootSettings = { type: "expanded_bubble", launcherTitle: "Chatea con nosotros", }; Habilitar ventana emergente​ Para habilitar la ventana emergente, agrega la siguiente configuración a chatwootSettings. Esta opción está deshabilitada por defecto. window.chatwootSettings = { // ...Otras configuraciones showPopoutButton: true, } También puedes abrir la ventana de chat programáticamente con el método `popoutChatWindow()`. Mensajes personalizados​ Personaliza el mensaje de bienvenida y los mensajes de disponibilidad que se muestran en el encabezado del widget y los indicadores de estado del equipo. window.chatwootSettings = { // ...Otras configuraciones welcomeTitle: "¿Necesitas ayuda?", // Encabezado personalizado del widget welcomeDescription: "Estamos aquí para apoyarte.", // Subtítulo del encabezado availableMessage: "¡Estamos en línea y listos para chatear!", // Cuando el equipo está disponible unavailableMessage: "Actualmente estamos fuera de línea." // Cuando el equipo no está disponible }; Alternar funciones Habilita o deshabilita funciones opcionales de la interfaz en el widget: window.chatwootSettings = { // ...Otras configuraciones enableFileUpload: true, // Mostrar botón de adjuntar archivos enableEmojiPicker: true, // Habilitar selector de emojis en la caja de texto enableEndConversation: true // Permite que el usuario termine la conversación }; Abrir programáticamente la ventana emergente​ Puedes abrir la ventana emergente programáticamente con el método popoutChatWindow(). Para iniciar esto, llama al método como se muestra a continuación. window.$chatwoot.popoutChatWindow(); Alternar la visibilidad de la burbuja del widget​ Si deseas ocultar/mostrar la burbuja del widget de Chatwoot, puedes hacerlo con toggleBubbleVisibility('show/hide') Ejemplo window.$chatwoot.toggleBubbleVisibility("show"); // para mostrar la burbuja window.$chatwoot.toggleBubbleVisibility("hide"); // para ocultar la burbuja Activar el widget programáticamente Si deseas abrir la ventana de chat haciendo clic en un enlace de tu sitio web, sigue el método a continuación. En tu acción, llama al SDK de Chatwoot como se describe abajo. window.$chatwoot.toggle(); // Alterna el widget pasando el estado window.$chatwoot.toggle("open"); // Para abrir el widget window.$chatwoot.toggle("close"); // Para cerrar el widget Establecer el usuario en el widget​ window.$chatwoot.setUser("<unique-identifier-key-of-the-user>", { email: "<email-address-of-the-user@your-domain.com>", name: "<name-of-the-user>", avatar_url: "<avatar-url-of-the-user>", phone_number: "<phone-number-of-the-user>", }); setUser acepta un identificador que puede ser un user_id en tu base de datos o cualquier parámetro único que represente a un usuario. Puedes pasar email, name, avatar_url, phone_number como parámetros. El soporte para parámetros adicionales está en desarrollo. Asegúrate de restablecer la sesión cuando el usuario cierre sesión en tu aplicación. Validación de identidad usando HMAC​ Para no permitir la suplantación y mantener la conversación con tus clientes privada, recomendamos configurar la validación de identidad en Chatwoot. La validación de identidad se habilita generando un HMAC (código de autenticación de mensajes basado en hash) basado en el atributo identifier, utilizando SHA256. Junto con el identifier, puedes pasar identifier_hash como se muestra a continuación para asegurarte de que el usuario es el correcto. window.$chatwoot.setUser(`<unique-identifier-key-of-the-user>`, { name: "", // Nombre del usuario avatar_url: "", // URL del avatar email: "", // Correo electrónico del usuario identifier_hash: "", // Hash del identificador generado en base a webwidget hmac_token phone_number: "", // Número de teléfono del usuario description: "", // descripción sobre el usuario country_code: "", // Código de país de dos letras city: "", // Ciudad del usuario company_name: "", // Nombre de la compañía social_profiles: { twitter: "", // Nombre de usuario en Twitter linkedin: "", // Nombre de usuario en LinkedIn facebook: "", // Nombre de usuario en Facebook github: "", // Nombre de usuario en Github }, }); Para generar el HMAC, lee validación de identidad. Ten en cuenta que implementar autenticación HMAC permitirá que el historial de chat persista entre sesiones. Establecer atributos personalizados​ Para establecer información adicional sobre el cliente, puedes utilizar el campo de atributos personalizados del cliente. Lee más sobre atributos personalizados aquí. Para establecer un atributo personalizado, usa setCustomAttributes como se muestra: window.$chatwoot.setCustomAttributes({ accountId: 1, pricingPlan: "paid", // Aquí la clave ya está definida en el atributo personalizado // El valor debe ser según el tipo (Actualmente soporta Number, Date, String y Number) }); Puedes ver esta información en el panel lateral de una conversación. Para eliminar un atributo personalizado, usa deleteCustomAttribute así: window.$chatwoot.deleteCustomAttribute("attribute-key"); Establecer el idioma manualmente​ window.$chatwoot.setLocale("en"); Para establecer el idioma manualmente, utiliza la función setLocale. Establecer etiquetas en la conversación​ Ten en cuenta que las etiquetas se establecerán en una conversación si el usuario no ha iniciado una conversación. En ese caso, los siguientes elementos no tendrán ningún efecto: window.$chatwoot.setLabel("support-ticket"); window.$chatwoot.removeLabel("support-ticket"); Refrescar la sesión (usa esto al cerrar sesión del usuario en tu app)​ window.$chatwoot.reset(); Errores del widget​ Para ver cualquier error en el widget, asegúrate de escuchar el evento chatwoot:event como se muestra: window.addEventListener("chatwoot:error", function () { // ... }); Nota: Esta funcionalidad está disponible en la versión v2.3.0 y posteriores. Personalizar el encabezado y descripción de bienvenida Puedes cambiar: - El título y la descripción de bienvenida - Los mensajes que se muestran cuando tu equipo está en línea o fuera de línea - Habilitar selectivamente funciones de la interfaz como carga de archivos, selector de emojis y botón para terminar la conversación window.chatwootSettings = { welcomeTitle: '¿Necesitas ayuda?', welcomeDescription: 'Estamos aquí para apoyarte.', availableMessage: '¡Estamos en línea y listos para chatear!', unavailableMessage: 'Actualmente estamos fuera de línea.', enableFileUpload: true, enableEmojiPicker: true, enableEndConversation: true };

¿Cómo continuar conversaciones por correo electrónico?

Tus clientes pueden continuar sus conversaciones de chat con tus agentes a través de hilos de correo electrónico. Esto puede ser necesario bajo las siguientes circunstancias. - No hay agentes disponibles y el cliente deja un mensaje en el chat. - El cliente abandona el chat antes de que el agente responda. Para que esto funcione, el contacto debe tener una dirección de correo electrónico en el CRM de Chatwoot. Obtención de direcciones de correo electrónico de contactos​ Puedes solicitar o actualizar los correos electrónicos de los clientes en Chatwoot de las siguientes maneras. 1. Desde el Chatwoot SDK​ Si se conoce el correo electrónico del cliente, puedes proporcionarlo a chatwoot usando el método setUser en nuestro SDK. 2. Desde el formulario previo al chat​ Si habilitas un formulario obligatorio previo al chat, la conversación inicia con una pantalla como la que se muestra a continuación: 3. Desde el mensaje emergente para recolección de correo​ Cuando el formulario previo al chat está deshabilitado y el correo del cliente es desconocido, Chatwoot inicia una conversación con un mensaje emergente para solicitar el correo electrónico. Nota: Cuando Captain está habilitado en una bandeja de entrada, el mensaje emergente de recolección de correo se suprime automáticamente. Captain manejará las conversaciones directamente, incluso fuera del horario laboral. El mensaje emergente solo se enviará si Captain transfiere la conversación a un agente humano o si Captain no está configurado para la bandeja de entrada. Continuidad de la conversación​ Nota: Habilita la continuidad de la conversación en instalaciones autohospedadas con la ayuda de esta guía. Si la dirección de correo electrónico del cliente se actualiza por cualquiera de las opciones mencionadas anteriormente y abandona el chat después de que el agente haya respondido, sucederá lo siguiente. - El cliente recibe un hilo de correo electrónico con un resumen de la conversación. Puede responder a ese correo para continuar la conversación. - El agente recibe las respuestas del cliente por correo electrónico en su panel de Chatwoot, continuando sobre el mismo hilo de conversación existente. El icono de correo electrónico en la burbuja de chat indica que el cliente ha respondido a través del correo electrónico.

¿Cómo habilitar la validación de identidad en Chatwoot?

La validación de identidad ayuda a garantizar que las conversaciones entre tus clientes y los agentes de soporte sean privadas. También ayuda a evitar la suplantación de identidad. La validación de identidad se puede habilitar generando un HMAC. La clave utilizada para generar el HMAC de cada widget web es diferente y puede copiarse desde Bandejas de entrada -> Configuración -> Configuración -> Validación de identidad -> Copiar el token que se muestra allí. Puedes generar HMAC en diferentes lenguajes, como se muestra a continuación. Generar HMAC​ PHP​ <?php $key = '<webwidget-hmac-token>'; $message = '<identifier>'; $identifier_hash = hash_hmac('sha256', $message, $key); ?> Javascript (Node.js)​ const crypto = require('crypto'); const key = '<webwidget-hmac-token>'; const message = '<identifier>'; const hash = crypto.createHmac('sha256', key).update(message).digest('hex'); Ruby​ require 'openssl' require 'base64' key = '<webwidget-hmac-token>' message = '<identifier>' OpenSSL::HMAC.hexdigest('sha256', key, message) Elixir​ key = '<webwidget-hmac-token>' message = '<identifier>' signature = :crypto.hmac(:sha256, key, message) Base.encode16(signature, case: :lower) Golang​ package main import ( "crypto/hmac" "crypto/sha256" "encoding/base64" "encoding/hex" ) func main() { secret := []byte("<webwidget-hmac-token>") message := []byte("<identifier>") hash := hmac.New(sha256.New, secret) hash.Write(message) hex.EncodeToString(hash.Sum(nil)) } Python​ import hashlib import hmac import base64 secret = bytes('<webwidget-hmac-token>', 'utf-8') message = bytes('<identifier>', 'utf-8') hash = hmac.new(secret, message, hashlib.sha256) hash.hexdigest()

¿Cómo habilitar el modo oscuro en el widget de chat en vivo?

Los sitios web modernos permiten a los usuarios cambiar entre los modos claro y oscuro. Por lo tanto, es importante que un chat en vivo funcione con ambos temas. Esta guía te ayuda a configurar el modo oscuro para el widget de chat en vivo de Chatwoot en tu sitio web. Aquí tienes un vistazo rápido de cómo funciona el modo oscuro en el widget de chat en vivo: Para activar el modo oscuro en el widget de Chatwoot, utiliza el parámetro darkMode junto con chatwootSettings. El parámetro darkMode admite dos valores. 1. light - Habilita solo el modo claro. Este es el valor predeterminado. 2. auto - Habilita el modo oscuro según la preferencia del sistema operativo. window.chatwootSettings = { //... other Settings darkMode: "auto", }; Nota: Por ahora, dark únicamente no es compatible. Agregaremos el soporte en futuras versiones.

Comprendiendo la Identidad de Contacto y la Validación de Identidad en Chatwoot

Cuando un cliente contacta a tu equipo, Chatwoot crea o actualiza un perfil de contacto para él. Este perfil ayuda a los agentes a entender quién es el cliente, qué conversaciones han tenido antes y por qué canal se comunicó. Por ejemplo, el mismo cliente puede contactarte a través de: - Chat en vivo en el sitio web - WhatsApp - Correo electrónico - Un widget de soporte dentro de la aplicación Chatwoot puede usar identificadores como una dirección de correo electrónico, número de teléfono o un ID de cliente único para conectar estas interacciones al mismo perfil de cliente. Coincidencia de contacto vs. validación de identidad Hay dos conceptos relacionados pero diferentes: Coincidencia de contacto ayuda a Chatwoot a reconocer que dos conversaciones pueden pertenecer al mismo cliente. Validación de identidad ayuda a Chatwoot a confirmar que el cliente realmente tiene permiso para usar esa identidad. Esta distinción es importante porque alguien podría escribir la dirección de correo electrónico de otro cliente en un formulario de chat público. La coincidencia de contacto por sí sola puede almacenar el correo, pero no prueba que el visitante sea dueño de ese correo electrónico o cuenta. Qué ven los agentes cuando la identidad no está verificada Cuando la identidad de un cliente no está verificada, Chatwoot muestra un indicador de advertencia cerca del nombre del contacto. Esto ayuda a los agentes a comprender que el visitante no ha sido verificado de manera segura por tu aplicación. Esto no siempre significa que el cliente sea sospechoso. Simplemente significa que Chatwoot no ha recibido un token confiable de validación de identidad para ese visitante. Para solicitudes sensibles, los agentes deben tener cuidado antes de hablar sobre información privada como facturación, detalles de la cuenta, transacciones o estado de verificación. Por qué es importante la validación de identidad La validación de identidad ayuda a proteger las conversaciones privadas con los clientes. Reduce el riesgo de suplantación, especialmente cuando el soporte ocurre dentro de un portal de clientes con sesión iniciada, aplicación bancaria, plataforma de trading, panel SaaS o cualquier producto basado en cuentas. Por ejemplo, si un cliente logueado inicia un chat desde tu portal, tu sistema puede decir de forma segura a Chatwoot: “Este visitante es el cliente 12345, y lo hemos verificado desde nuestro lado.” Chatwoot puede confiar en la identidad porque fue verificada por tu sistema backend, no solo escrita en un formulario de chat. Configuración recomendada Para visitantes de sitios web públicos, puedes usar campos de contacto normales como nombre, correo electrónico y número de teléfono. Para usuarios con sesión iniciada, recomendamos habilitar la validación de identidad. Esto es útil cuando los agentes pueden discutir información sensible como: - detalles de la cuenta - información de facturación - pedidos o transacciones - estado KYC o de verificación - solicitudes internas de empleados - problemas de soporte sujetos a regulación Dónde habilitar la validación de identidad La validación de identidad se puede configurar desde los ajustes del buzón de tu sitio web. Ir a: Ajustes -> Buzones -> Seleccionar buzón del sitio web -> Configuración -> Validación de Identidad En esta sección, Chatwoot muestra la clave secreta usada para generar tokens de identidad seguros. También puedes elegir si la validación de identidad debe ser obligatoria para todas las conversaciones. Si Requerir validación de identidad para todas las conversaciones está habilitado, los visitantes deben proporcionar un token de identidad válido antes de iniciar conversaciones. Las solicitudes sin tokens válidos serán rechazadas. Cómo funciona en términos simples Tu aplicación crea una firma segura para el usuario con sesión iniciada. Chatwoot verifica esa firma antes de confiar en la identidad del usuario. El secreto usado para crear esta firma permanece en tu servidor. No debe exponerse en el navegador. Si la firma es válida, Chatwoot trata la identidad del cliente como verificada. Si la validación de identidad es obligatoria y la firma falta o es inválida, Chatwoot rechaza la solicitud. Qué deben saber los agentes Los agentes no necesitan comprender la configuración técnica. Lo importante es: Si la validación de identidad está habilitada, la identidad del cliente mostrada en Chatwoot proviene de la sesión iniciada del cliente, no de un valor que él mismo haya escrito manualmente en el chat. Esto da mayor confianza a los equipos de soporte al manejar conversaciones sensibles. Cuándo usar la validación de identidad Usa la validación de identidad cuando el widget de chat se muestre dentro de un producto o portal de clientes con sesión iniciada. Ejemplos: - portal de clientes fintech - panel bancario - área de cuenta de ecommerce - aplicación SaaS - portal de soporte interno para empleados - portal de salud o seguros Para un sitio web público de marketing, la validación de identidad puede ser opcional. Para soporte de clientes con sesión iniciada, se recomienda encarecidamente. Para desarrolladores Este artículo explica el concepto a alto nivel. Si estás listo para configurar la validación de identidad, utiliza esta guía técnica de configuración.