Agrega el chat a tu sitio web
Copia una línea de código en tu sitio para poner una burbuja de chat en cada página — o inserta el chat dentro del contenido — y controla cómo se ve antes del primer clic.
Necesitarás: Un Web Bot en tu cuenta y la posibilidad de editar el HTML de tu sitio web.
Insertar un bot toma una línea de código. El resto de este artículo trata de lograr que aparezca como tú quieres.
#Consigue el código de inserción
- Ve a Bots y abre Configuración de bot. Llegas a la Lista de Web Bots.
- Abre el bot que quieras, o elige Nuevo Web Bot para crear uno.
- En el Widget Studio, abre la pestaña Código de inserción.
- Elige Copiar al Portapapeles junto al primer fragmento.
Ese fragmento es una sola etiqueta <script>. Pégalo entre las etiquetas
<head> y </head> de cada página donde quieras la burbuja — o, más común,
dentro de la parte de la plantilla de tu sitio que genera el <head> de todas
las páginas a la vez.
La burbuja aparece entonces en la esquina inferior derecha de esas páginas.
#Inserta el chat dentro del contenido
El segundo fragmento de la misma pestaña es un <iframe>. Pégalo exactamente
donde quieras que quede el chat — dentro de una página, en una barra lateral, en
una sección propia — en lugar de flotando en la esquina. Puedes cambiar su
width y su height.
Usa el script para una burbuja que sigue al lector; usa el iframe cuando el chat sea el contenido de esa parte de la página.
#En un sitio web que Tayon creó para ti
No necesitas el código para nada.
- Abre el sitio en el editor de sitios web.
- Elige el botón ⚙ y abre la pestaña Complementos.
- En Web Bot, agrega el bot que quieras.
Queda en todas las páginas del sitio publicado, y también aparece en la vista previa del editor, así puedes verlo antes de publicar. Quitarlo ahí lo saca de todas las páginas otra vez. Mira Publica tu sitio web.
#Elige cómo se ve el botón de chat
La pestaña Tipo decide qué ven los visitantes antes de abrir el chat.
| Tipo | Cómo se ve |
|---|---|
| Burbuja | Un botón redondo en la esquina. La opción por defecto, y casi siempre la correcta |
| Barra de búsqueda | Una barra que invita a preguntar, para sitios donde el chat es la llamada a la acción principal |
| Video | Un botón que reproduce un video. Necesita un Título y una URL del Video |
#Elige cómo se comporta
La pestaña Comportamiento:
- Abrir el chat automáticamente — el chat ya está abierto cuando carga la página. Efectivo en una página de aterrizaje, molesto en un blog.
- Iniciar siempre un chat nuevo — cada visita empieza una conversación en blanco en vez de retomar la anterior. Déjalo apagado si quieres que quienes regresan vean su historial.
- Ventana amplia — un panel de chat más grande.
Acuérdate de elegir Guardar. La Vista previa de la derecha muestra tus cambios sin guardar, así puedes revisar antes de confirmar.
#Controla dónde puede cargar el bot y qué flujo corre
AutomatizaciónBotsAcceso de bot
Acceso de bot abre la Lista de sitios web. Registra ahí un dominio, agrega las páginas que te interesan y elige qué flujo corre en cada una — así tu página de precios puede abrir una conversación distinta a la de tu página de inicio.
No tienes que registrar un dominio solo para que el widget funcione. Registrarlo es la forma de enviar distintas páginas a distintos flujos, y de apagar un dominio si alguna vez necesitas que el bot deje de cargar ahí.
#Apagar un bot
Cada fila de la Lista de Web Bots tiene un estado que puedes alternar entre Activo e Inactivo.
#Si la burbuja no aparece
- Confirma que el fragmento está dentro de
<head>y que estás viendo una página que realmente lo incluye. Mira el código fuente de tu página y buscatwidget.js. - Revisa que el estado del bot sea Activo en la Lista de Web Bots.
- Revisa que tu cuenta esté al día — el widget de una cuenta inactiva deja de cargar.
- Si la burbuja aparece pero el chat dice Conectando…, el motor de conversación está momentáneamente inaccesible. Se recupera solo; recarga en un momento.
- Si la burbuja queda encima de otra cosa en la esquina, cambia el Tipo del botón de chat o mueve tu propio elemento fijo.
Actualizado: