Cómo añadir Webchat a su sitio web

¿CÓMO AÑADIR WEBCHAT A SU SITIO WEB?

Telenet permite integrar un chatbot directamente en su sitio web.

Esta funcionalidad es independiente y no exige conexión a plataformas externas como Facebook, Telegram, WhatsApp o Google. Así se evita que sus clientes tengan que crear cuentas adicionales y se facilita la interacción.

Además, si recoge correos electrónicos o números de teléfono mediante el chat web, su empresa podrá contactar con esos clientes por SMS o correo electrónico cuando sea necesario.

Incrustar el código del Webchat en su sitio

  • Vaya a Configuración de canales → Chat Web → Administrar.

  • Añada los sitios web autorizados. El chatbot solo se cargará en los dominios que autorice.

  • Tras crear y guardar su chat, haga clic en los tres puntos y elija “obtener el código”.

Ese pequeño fragmento de código insertará el chat web en su sitio.

Personalizar el esquema de color

Para modificar el color de la interfaz del webchat, añada un atributo 'color' dentro de la función de configuración.

Cambiar las plantillas del Webchat

Telenet ofrece actualmente tres plantillas para el chat web y ampliará las opciones próximamente. Para cambiar la plantilla, incluya el atributo 'plantilla' en la configuración.

Las plantillas disponibles son: la predeterminada y otras dos llamadas 'template1' y 'template2'. Se introducirán más opciones en el futuro.

Mostrar la imagen de perfil como persona

Si desea que en el chat aparezca la imagen de perfil de la cuenta como una “persona”, use el atributo 'showPersona'.

Modificar el icono del chat

Para cambiar el icono del chat, utilice el atributo 'icon' y proporcione la URL de la imagen deseada.

Opciones disponibles (nombre | valores/descripcion | valor por defecto)

  • tipo | 'flotar' / 'contenedor' / 'ventana' — 'contenedor': inserta el chatbot dentro de un elemento HTML; 'ventana': abre el chatbot en una nueva ventana | 'flotar'

  • elemento | solo se usa si tipo = 'contenedor' (selector del elemento HTML) | —

  • title (Cabecera) | texto que aparece en la cabecera del chat web | Nombre de la cuenta

  • color | cualquier nombre de color o código hexadecimal | #007BFF

  • hideHeader | ocultar la cabecera que muestra el nombre del negocio (true/false) | false

  • ref | cualquier ID de ref/flow/step que se envíe automáticamente cuando el usuario haga clic en el icono del chat; permite iniciar un flujo o paso concreto | —

  • showPersona | true/false | false

  • hideComposer | true/false (oculta el cuadro de texto para escribir) | false

  • plantilla | 'template1' / 'template2' | —

  • icon | URL del icono del chat que se mostrará | —

  • right | distancia desde el borde derecho de la pantalla hasta el icono (ej.: 20px) | 20px

  • bottom | distancia desde el borde inferior de la pantalla hasta el icono (ej.: 20px) | 20px

  • loadMessages | cargar conversaciones anteriores con el contacto cuando se abre el chat web (true/false) | true

Transfiriendo la conversación desde cualquier canal al Webchat

No todos los canales soportan todas las funciones del webchat. Por ejemplo, si un cliente está chateando por SMS y necesita ver una galería o contenido más rico, puede transferir la conversación al chat web.

Envíe al usuario un mensaje que incluya el campo personalizado del sistema: "webchat".

Si quiere que al acceder a ese enlace se inicie automáticamente un flujo o paso específico, añada "&ref=FLOW-OR-STEP-ID" al final.

Ejemplo: si el FLOW-ID es 111111, el enlace quedaría así: -webchat-&ref=111111

Ese enlace cargará los mensajes previos de la conversación entre el bot y el usuario.

Si no desea cargar mensajes antiguos, añada "&lc=0" al final: -webchat-&ref=111111&lc=0

Frame

Use una estructura tipo:

div style="width:100%; padding-bottom:56.25%; position:relative;" iframe src="Your WebChat Link HERE" style="position:absolute; top:0; left:0; width:100%; height:100%; border:none; overflow:hidden;" /iframe /div

Plugin de chat de Facebook

Como alternativa, puede usar el plugin de chat web que proporciona Facebook.

Last updated