Modificado el miércoles, 26 de junio a las 10:05 p.m.
El Webchat de Topchat.bot te permite incorporar un chatbot en tu sitio web.
Esta función independiente no requiere vinculación con plataformas de terceros como Facebook, Telegram, WhatsApp o Google. Esto elimina la necesidad de que tus clientes creen nuevas cuentas y facilita interacciones más sencillas.
Además, si recopilas correos electrónicos o números de teléfono de los clientes a través del webchat, tu negocio puede comunicarse fácilmente con ellos mediante SMS o correo electrónico cuando sea necesario.
Incorporar el Código de Webchat en tu Sitio Web
Navega a Ajustes > Canales > Web Chatbot > Gestionar
Agrega tu dominio de sitio web o subdominio a los sitios web autorizados. El chatbot solo se cargará en los sitios web autorizados.
Después de crear y guardar tu Webchat, haz clic en los tres puntos y obtén el código.
Copia e inserta el siguiente código en el cuerpo o pie de página de tu sitio web.
Copia el código
<script src="https://app.topchat.bot/webchat/plugin.js?v=5"></script>
<script>
ktt10.setup({ pageId: YOUR_ACCOUNT_ID});
</script>
Este sencillo fragmento de código incrustará un chat web en tu sitio web. Implementar el chat web como una página independiente:
Navega a la URL, reemplazando "YOUR_ACCOUNT_ID" con tu ID de cuenta: https://app.topchat.bot/webchat/?p=YOUR_ACCOUNT_ID
Personalización del esquema de colores
Para cambiar el color de la interfaz del chat web, incluye un atributo 'color' dentro de la función de configuración de la siguiente manera:
Copia el código:
<script src="https://app.topchat.bot/webchat/plugin.js"></script>
<script>
ktt10.setup({ pageId: YOUR_ACCOUNT_ID, color: "#36D6B5"});
</script>
Reemplaza "#ff0000" con el código de color deseado.
Cambiar plantillas de Webchat
Topchat.bot actualmente ofrece tres plantillas para webchat. Pronto ofreceremos más opciones de plantillas. Para cambiar la plantilla, incluye un atributo 'template' dentro de la función de configuración de la siguiente manera:
<script src="https://app.Topchat.bot/webchat/plugin.js"></script>
<script>
ktt10.setup(
{
pageId: YOUR_ACCOUNT_ID,
color: "#007BFF",
hideHeader: true,
template: "template1"
}
);
</script>
Mostrar la foto de perfil de la cuenta como una persona
Para mostrar la imagen de perfil de tu cuenta como una persona dentro del chat, utiliza el atributo 'showPersona' de la siguiente manera:
Copia el código:
<script src="https://app.Topchat.bot/webchat/plugin.js"></script>
<script>
ktt10.setup({ pageId: YOUR_ACCOUNT_ID, showPersona: true});
</script>
Modificar el ícono del chat
Para cambiar el ícono del chat, utiliza el atributo 'icon' y especifica la URL de la imagen deseada:
Copia el código:
<script src="https://app.Topchat.bot/webchat/plugin.js"></script>
<script>
ktt10.setup({ pageId: YOUR_ACCOUNT_ID, showPersona: true, icon: "YOUR_IMAGE_URL"});
</script>
Reemplaza "YOUR_IMAGE_URL" con la URL de la imagen que has elegido.
| Nombre de la opción | Valores posibles/Descripción | Predeterminado |
| type | floating: El chatbot se abrirá en una nueva ventana. | Flotante |
| window: El chatbot se abrirá en una nueva ventana. | ||
| container: Incluye el chatbot dentro de cualquier elemento HTML especificado | ||
| element | Solo se usa si "type" es "container". Ejemplo: "#div1 | |
| headerTitle | Título que se muestra en el encabezado del webchat | Nombre de la Cuenta |
| color | Nombre de color o código de color para personalizar la apariencia del webchat. | "#36D6B5". |
| hideHeader | Oculta el encabezado que contiene el nombre del negocio. Valores: true/false. | FALSE |
| ref | ID de referencia o paso que se enviará automáticamente cuando el usuario haga clic en el ícono del chat. Por ejemplo, "get_started_button" para enviar automáticamente el flujo de bienvenida. | |
| showPersona | Muestra la imagen de perfil de la cuenta como una persona en el chat. Valores: true/false. | FALSE |
| hideComposer | Oculta el campo de composición de mensajes. Valores: true/false | FALSE |
| template | Plantilla del webchat a utilizar. Por ejemplo: template1/template2 | |
| icon | ícono del chat que se muestra en la parte inferior|derecha. | |
| right | Distancia del ícono desde el borde izquierdo de la pantalla | 20px |
| bottom | Distancia del ícono desde el borde inferior de la pantalla. | 20px |
| loadMessages | Carga las conversaciones pasadas con el contacto cuando se abre el webchat. Valores: true/false | TRUE |
| setCustomFields | Permite configurar múltiples campos personalizados. Puedes usar nombres de campo del sistema como ID: email, phone, full_name, first_name, last_name. | [{id:”email”, value:”…@gmail.com”}, {id:348574, value:”Value here”}] |
Transición de la conversación desde cualquier canal a Webchat
No todos los canales admiten las funciones completas que ofrece el webchat. Por ejemplo, si un cliente está comunicándose con tu negocio a través de SMS y deseas mostrar una lista de galería de tus servicios, puedes transferir la conversación a webchat.
Simplemente envía al usuario un mensaje que contenga el siguiente campo personalizado del sistema: {{webchat}}
Para iniciar automáticamente un flujo o paso específico cuando el usuario accede a este enlace, agrega "&ref=ID_DE_FLUJO_O_PASO" al final.
Por ejemplo, si el ID_DE_FLUJO es 111111, el enlace sería:
{{webchat}}&ref=111111
Este enlace cargará los mensajes anteriores de la conversación entre el bot y el usuario.
Si prefieres no cargar los mensajes antiguos, agrega "&lc=0" al final del enlace:
{{webchat}}&ref=111111&lc=0
Ejemplo imagen y código:
<script src="https://app.topchat.bot/webchat/plugin.js"></script><script>ktt10.setup({"pageId":"1970516","headerTitle":"TopchatBot","ref":"1679880775117", "icon": "https://i.ibb.co/P9Kd08V/Untitled-2.png", "color": "#36D6B5", "template": "template1"});</script>
<script src="https://app.topchat.bot/webchat/plugin.js"></script><script>ktt10.setup({"pageId":"1970516","headerTitle":"TopchatBot","ref":"1679880775117", "icon": "https://i.ibb.co/P9Kd08V/Untitled-2.png", "color": "#36D6B5", "template": "template1", "hideHeader": "true"});</script>
iFreame
<div style="width:100%; padding-bottom:56.25%; position:relative;">
<iframe src="{{Tu enlace de WebChat AQUI}}" style="position:absolute; top:0px; left:0px;
width:100%; height:100%; border: none; overflow: hidden;">iframe>
div></iframe></div>
Cómo abrir automáticamente el chat web
Script de configuración del constructor de chatbots AI con tiempo de espera
Para configurar el plugin del constructor de chatbots AI e incluir una función setTimeout que haga clic en un botón después de 4 segundos, sigue el formato del script a continuación:
<script src="https://app.topchat.bot/webchat/plugin.js?v=5"></script>
<script>
ktt10.setup({
id: "uxZ1a5Wvqj3TpqlgNaZ",
accountId: "YOUR-ID-HERE",
color: "#36D6B5"
});
setTimeout(function() {
ktt10Btn.click();
}, 4000);
</script>
Desglose del Script
1. Cargando el Plugin
<script src="https://app.topchat.bot/webchat/plugin.js?v=5"></script>
2. Inicializando el Plugin
<script>
ktt10.setup({
id: "uxZ1a5Wvqj3TpqlgNaZ",
accountId: "YOUR-ID-HERE",
color: "#36D6B5"
});
3. Agregando la Función de Tiempo de Espera
setTimeout(function() {
ktt10Btn.click();
}, 4000);
</script>
Este script inicializa el plugin del Constructor de Chatbots AI con la configuración especificada y establece un temporizador para hacer clic automáticamente en el botón ktt10Btn después de 4 segundos.