Saltar al contenido principal

El chat en tu web

Para que tus visitantes hablen con tu chatbot, basta con pegar una línea de código en tu web. Funciona en cualquier web: WordPress, Shopify, PrestaShop, Wix, una web a medida o una landing. Se pega una sola vez y el chat aparece en todas las páginas, como un botón flotante en la esquina inferior derecha.

Primero, pruébalo

Antes de ponerlo en tu web, comprueba en la página demo que responde como quieres.

1. Copia el código de tu chat​

  1. En el menú lateral, entra en Configuración y abre la pestaña Integración.
  2. En Código del widget, pulsa Copiar.

El código tiene esta forma, con el identificador de tu chatbot ya puesto:

<script src="https://chat.indedlabs.com/widget/widget-chatbot.js" data-chatbot-uuid="TU-IDENTIFICADOR"></script>

2. Pégalo en tu web​

Pégalo justo antes de la etiqueta </body> de tu plantilla, para que se cargue en todas las páginas.

  • En WordPress, lo más sencillo es un plugin de los que insertan código en el pie de página (hay varios gratuitos), o el editor de tu tema si permite añadir código al pie.
  • En otras plataformas, busca en los ajustes de tu web la opción de añadir código personalizado al pie o antes del cierre del body.
  • Si tu tienda es WooCommerce, mejor instala nuestro plugin: además de poner el chat, conecta tu catálogo. Lo explicamos en Conectar tu tienda WooCommerce.

Recarga tu web: el botón del chat aparecerá abajo a la derecha. Si tu chatbot está Inactivo, no aparecerá hasta que lo actives (en Configuración, bloque Estado).

3. Indica en qué webs puede funcionar​

El código de tu chat se ve en tu página, y quien lo copie podría pegarlo en otra web: tu chat respondería allí, gastando tus mensajes y ensuciando tus estadísticas. Para evitarlo, dile en qué dominios tiene permiso para abrirse.

  1. En Configuración, pestaña Integración, ve al bloque Dónde puede usarse tu chat.
  2. Escribe tu dominio (por ejemplo, mitienda.com) y pulsa Añadir.

Lo más cómodo: debajo verás Dominios donde se ha abierto tu chat, los sitios donde ya lo hemos visto funcionar. Pulsa uno para añadirlo. Si ves alguno que no reconoces, no lo añadas.

  • Mientras la lista esté vacía, tu chat funciona en cualquier web.
  • Los subdominios entran solos: con mitienda.com vale también tienda.mitienda.com.
  • Si un día pones el chat en una web nueva, acuérdate de añadirla, o no aparecerá.

4. Personaliza su aspecto​

En el menú lateral, entra en Apariencia. Desde ahí cambias:

  • El avatar del chat y el del botón flotante: elige uno de la galería o sube tu imagen (JPG, PNG, GIF o WebP, de hasta 2 MB).
  • La burbuja flotante: puedes mostrar solo el icono, el icono con un mensaje al lado (como «¿Te ayudo?») o solo el mensaje. Puedes hacer que se oculte sola pasados unos segundos y que tenga botón de cerrar.
  • Los colores, para que vaya con tu marca.
  • Lo que se ve mientras prepara la respuesta.

Los cambios se aplican en tu web sin volver a tocar el código.

Cambiar el chat de sitio​

El botón aparece abajo a la derecha, a 24 píxeles de los bordes. Para moverlo:

  • Con nuestro plugin de WooCommerce: en sus ajustes, en Widget Position (lo explicamos en Conectar tu tienda).
  • Con el código: añade estos atributos a la línea que pegaste. Por ejemplo, para ponerlo abajo a la izquierda y a 40 píxeles del borde:
<script src="https://chat.indedlabs.com/widget/widget-chatbot.js" data-chatbot-uuid="TU-IDENTIFICADOR"
        data-position-vertical="bottom" data-position-horizontal="left"
        data-position-vertical-distance="40" data-position-horizontal-distance="40"></script>

data-position-vertical puede ser bottom (abajo) o top (arriba), y data-position-horizontal, right (derecha) o left (izquierda). Las distancias van en píxeles.

En el móvil​

El chat funciona igual en el ordenador, la tablet y el móvil. En pantallas pequeñas se abre a pantalla completa y el teclado no tapa lo que se escribe. Tus clientes no tienen que instalar nada.

La conversación se mantiene aunque el cliente cambie de página o recargue: al volver, sigue donde lo dejó.

Siguiente paso​

Si vendes online con WooCommerce, conecta tu catálogo para que el chatbot recomiende tus productos: Conectar tu tienda WooCommerce.