Saltar al contenido principal

Integrar Typebot en tu Sitio

Opciones de integración​

1. Chat bubble (flotante)​

Botón en esquina inferior:

<script type="module">
  import Typebot from 'https://cdn.jsdelivr.net/npm/@typebot.io/[email protected]/dist/web.js'
  Typebot.initBubble({
    typebot: "tu-typebot-id",
    theme: {
      button: { backgroundColor: "#0042DA" },
    },
  });
</script>

2. Embed estándar​

Insertado en la página:

<script type="module">
  import Typebot from 'https://cdn.jsdelivr.net/npm/@typebot.io/[email protected]/dist/web.js'
  Typebot.initStandard({
    typebot: "tu-typebot-id",
    container: document.querySelector("#typebot-container"),
  });
</script>

<div id="typebot-container" style="height: 500px;"></div>

3. Popup​

Aparece después de X segundos:

<script type="module">
  import Typebot from 'https://cdn.jsdelivr.net/npm/@typebot.io/[email protected]/dist/web.js'
  Typebot.initPopup({
    typebot: "tu-typebot-id",
    delay: 3000, // 3 segundos
  });
</script>

WordPress​

  1. Instala plugin Insert Headers and Footers
  2. Pega el código en Footer Scripts

Obtener tu typebot ID​

  1. Abre tu typebot
  2. Share > Get embed code
  3. Copia el ID del código

Webhooks​

Envía respuestas a tu sistema:

  1. Añade bloque Webhook
  2. Configura URL destino
  3. El body incluye todas las variables