¿Cómo integrar y personalizar el canal de Webchat?
Este artículo describe la integración y personalización del canal de webchat.
El webchat es un sistema que utiliza interfaces web de fácil acceso. Al conectar este canal con Botmaker en tu sitio web para automatizar respuestas o brindar atención con agentes de live chat, podrás comunicarte con los usuarios en tiempo real, brindando una mejor experiencia de atención al cliente.
Lectura estimada: 06 minutos
¿Cómo integrar el canal?
Para integrar el canal de webchat, ingresa a la plataforma y ve a Configuración>Canales (https://go.botmaker.com/#/integrations/channels).
Selecciona Webchat y haz clic en Conectar.
Así, en esta sección de Canales puedes crear y administrar webchats, e integrarlos en tu sitio web.
¿Cómo personalizar el canal con estilos y colores e integrarlo en tu sitio web?
La interfaz del canal de webchat ofrece una versión simplificada para la integración en el sitio web mediante el código script que debes incluir en el tag body de tu página web.
El panel de control del webchat presenta, de esta manera, tres pestañas importantes:
- Instalación: para integrar el canal con tu sitio web mediante el código script.
- General: permite seleccionar la posición del webchat dentro de tu sitio, como así también la tipografía.
- Personalización: situándote en la ventana del webchat a la izquierda, puedes personalizarlo utilizando distintos estilos y colores.
- En la pestaña Instalación podrás acceder al código script para integrar el webchat en tu sitio web.
Nota: la barra deslizable azul permite habilitar o deshabilitar el webchat. Recuerda activarla toda vez que desees que el webchat esté disponible en tu página web.
- La pestaña General te permite definir la posición del webchat, las formas de visualización y la tipografía que se utilizará en las conversaciones con los usuarios.
- La pestaña de Personalización te permite cambiar los colores y estilos de tu webchat, posicionándote en él.
Adicionalmente, haciendo clic en +Nuevo webchat, puedes acceder a distintos temas con diseños y colores. Haciendo clic en Crear webchat, se creará un nuevo webchat con el tema seleccionado, al que podrás personalizar de acuerdo a tus preferencias.
¿Cómo personalizar mensajes del webchat?
Puedes configurar un menú persistente que esté siempre visible en el webchat. Esta opción le permite al usuario acceder fácilmente a las funcionalidades de tu chatbot. Para ello, ingresa opciones que dirijan al usuario a flujos importantes de tu chatbot haciendo clic en el botón Configurar mensajes por defecto, que se encuentra a la derecha de la pantalla en la parte superior.
En este caso, hemos configurado tres opciones para el menú persistente, tal como se muestra a continuación:
Consideraciones adicionales
Haciendo clic en Descartar cambios, es posible deshacer las configuraciones o cambios de estilo de tu webchat. Por otro lado, para que los cambios o configuraciones de estilo, fuentes, mensajes, etc., estén visibles para los usuarios, deberás hacer clic en Publicar cambios.
Finalmente, en la sección de Chatbots, podrás seleccionar el chatbot de tu interés y probar tu webchat en tiempo real para ver si el mismo cumple con lo que necesitas.
Uso de variables en Webchat
Puedes editar las variables existentes al comienzo de una conversación Webchat.
Establecer variables
Dentro del fragmento de código utilizado para integrar webchat en tu sitio, puedes establecer variables con información externa.
Se debe agregar un nuevo objeto que contenga las variables con los valores a editar. El objeto es BOTMAKER_VAR.
<script>
<!-- Aquí deben ser definidas todas las variables-->
var BOTMAKER_VAR = {
firstName: 'newValueForFirstName',
lastName: 'newValueForLastName',
customVar: 'newValueForCustomVar'
};
(function () {
let js = document.createElement('script');
js.type = 'text/javascript';
js.async = 1;
js.src = 'https://go.botmaker.com/rest/webchat/p/XXXXX/init.js';
document.body.appendChild(js);
})();
</script>
Puedes editar tus propias variables, como firstName y lastName, o nuevas variables. La única condición es que estas variables ya existan en el bot.
¿Cómo mantener el ID de tu sistema?
Si quieres mantener o usar un ID único o de tu sistema asociado al chat, puedes enviar ese dato en la variable userIdOnBusiness dentro de BOTMAKER_VAR
<script>
<!-- Aquí deben ser definidas todas las variables-->
var BOTMAKER_VAR = {
userIdOnBusiness : 'myBusinessId',
...
};
(function () {
let js = document.createElement('script');
js.type = 'text/javascript';
js.async = 1;
js.src = 'https://go.botmaker.com/rest/webchat/p/XXXXX/init.js';
document.body.appendChild(js);
})();
</script>
Integración en App Mobile
Para integrar el webchat en tu app mobile, puedes optar por:
- Embeber el webchat en un webview. Se utiliza el mismo script que la web. Para una mejor experiencia en la mobile, es recomendable utilizar los métodos expuestos del webchat. Por ejemplo:
- Integrarla a un chat propio de tu App mobile incoporando y procesando los mensajes de salida y entrada por medio de la API Botmaker. En este caso, se utiliza el servicio /intent/processMessage (para procesar la pregunta del usuario y recibir la respuesta del bot) y para atención manual por medio de agentes, se utiliza el servicio /message/v3 para enviar los mensajes del agente.
El canal de webchat es una herramienta flexible y útil para tus usuarios, ya que no se requiere instalar ningún software específico y les permite conversar directamente desde el sitio web. De este modo, tendrás un servicio de atención acorde con las expectativas de tu público en un canal digital que acerca a personas que ya han tenido contacto con tu negocio anteriormente o lo están conociendo por primera vez.
Recuerda visitar nuestro Centro de Ayuda para mayor información.