Aprende a integrar tu Chatbot personalizado en tu sitio web con facilidad.

Integrar el chatbot Swiftron en su sitio web es simple y rápido. Con una integración única y sin necesidad de cambios continuos, puede mejorar la interacción con sus clientes de manera fluida. Siga estos sencillos pasos para comenzar:

Paso 1: Copiar el Código de Integración

Ve a Página de Integración de Swiftron y copia el siguiente código:

<script async type="module" project-id="YOUR_PROJECT_ID" lang="auto" src="https://swiftron.eu/static/js/chatbot-boot.min.js"></script>
  • project-id: Este es su ID de Proyecto único y se completará automáticamente.
  • lang: El idioma objetivo para su chatbot. Puede usar:
    • Cualquier código de idioma válido de códigos de idioma ISO 639 (por ejemplo, 'es' para español, 'de' para alemán).
    • 'auto', que selecciona el idioma según la configuración del navegador del usuario.
    • 'site', que utiliza el idioma especificado en el encabezado HTML del sitio web. Esto lee el valor de document.documentElement.lang y establece el idioma del chatbot en consecuencia.

Paso 2: Pegar el código en tu sitio web

Usando un creador de sitios web:

Si estás utilizando creadores de sitios web como Jimdo, WordPress o Squarespace, sigue sus instrucciones para insertar código personalizado:

Gestionando tu propio código:

Inserta el código de integración copiado en el HTML de cada página donde desees que aparezca el chatbot. Aquí tienes un ejemplo:

<! DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Your Site</title>
  </head>
  <body>
    <div>Your Content</div>
  </body>
  <script async type="module" project-id="YOUR_PROJECT_ID" lang="auto" src="https://swiftron.eu/static/js/chatbot-boot.min.js"> </script>
</html>

Configurar el Botón de Alternar Chatbot (Opcional)

Si ya tienes un cuadro de comunicación existente o deseas crear tu propio botón para abrir o cerrar el chatbot, puedes integrarlo fácilmente añadiendo su ID en la 'Configuración del Botón de Alternar Chatbot' en la Página de Integración de Swiftron.

Ejemplo:

<button id="btn-toggle-chatbot">Tu Icono de Chatbot</button>

Simplemente establece el 'Campo del Botón de Alternar Chatbot' al ID de tu botón, por ejemplo, 'btn-toggle-chatbot'. El tipo de botón puede ser cualquier cosa (por ejemplo, div, span). No necesitas añadir ningún JavaScript o controladores de eventos; el chatbot de Swiftron detectará automáticamente este botón y manejará la lógica necesaria.

Si no se encuentra ningún elemento con el ID proporcionado, o si el campo 'Botón de Alternar Chatbot' está vacío, Swiftron creará su propio botón de alternar chatbot en tu sitio.

Personalizar la Ubicación del Chatbot (Opcional)

Puede renderizar el chatbot en un elemento específico especificando su ID en el 'Personalizar la Ubicación del Chatbot' en la Página de Integración de Swiftron. El chatbot aparecerá dentro de este elemento y reemplazará cualquier contenido existente en él.

En este caso, no se renderizará ni se utilizará un botón de alternancia del chatbot. El chatbot siempre será visible dentro del elemento especificado y no podrá ser minimizado por el usuario.