HTML & Javascript

Padrão

Você obtém o código HTML e JavaScript padrão clicando no botão "HTML & Javascript", na aba "Compartilhar" do seu bot.

Ali você também ajusta as dimensões do contêiner. Veja um exemplo:

<script type="module">
  import Typebot from "https://cdn.jsdelivr.net/npm/@typebot.io/js@0/dist/web.js";

  Typebot.initStandard({
    typebot: "my-typebot",
  });
</script>

<typebot-standard style="width: 100%; height: 600px; "></typebot-standard>

Este código cria um contêiner com 100% de largura (acompanhando o elemento pai) e 600px de altura.

Vários bots

Se você tiver bots diferentes na mesma página, precisa distingui-los com a propriedade id:

<script type="module">
  import Typebot from 'https://cdn.jsdelivr.net/npm/@typebot.io/js@0/dist/web.js'

  Typebot.initStandard({
    id: 'bot1'
    typebot: 'my-typebot',
  })

  Typebot.initStandard({
    id: 'bot2'
    typebot: 'my-typebot-2',
  })
</script>

<typebot-standard
  id="bot1"
  style="width: 100%; height: 600px; "
></typebot-standard>
...
<typebot-standard
  id="bot2"
  style="width: 100%; height: 600px; "
></typebot-standard>

Popup

Você obtém o código HTML e JavaScript do popup clicando no botão "HTML & Javascript", na aba "Compartilhar" do seu bot.

Veja um exemplo:

<script type="module">
  import Typebot from "https://cdn.jsdelivr.net/npm/@typebot.io/js@0/dist/web.js";

  Typebot.initPopup({
    typebot: "my-typebot",
    autoShowDelay: 3000,
  });
</script>

Este código abre a janela do popup automaticamente após 3 segundos.

Balão

Você obtém o código HTML e JavaScript do balão clicando no botão "HTML & Javascript", na aba "Compartilhar" do seu bot.

Veja um exemplo:

<script type="module">
  import Typebot from "https://cdn.jsdelivr.net/npm/@typebot.io/js@0/dist/web.js";

  Typebot.initBubble({
    typebot: "my-typebot",
    previewMessage: {
      message: "I have a question for you!",
      autoShowDelay: 5000,
      avatarUrl: "https://avatars.githubusercontent.com/u/16015833?v=4",
    }, // Defaults to undefined
    theme: {
      button: { backgroundColor: "#0042DA", iconColor: "#FFFFFF" },
      previewMessage: { backgroundColor: "#ffffff", textColor: "black" },
      chatWindow: { backgroundColor: "#ffffff", maxWidth: "100%" },
    },
  });
</script>

Este código exibe o balão e faz uma mensagem de prévia aparecer após 5 segundos.

Posição personalizada do botão

Você pode mover o botão com CSS no seu site. Por exemplo, este CSS coloca o botão do balão mais para cima:

typebot-bubble::part(button) {
  bottom: 60px;
}

typebot-bubble::part(bot) {
  bottom: 140px;
  height: calc(100% - 140px)
}

Se você usa uma mensagem de prévia, precisa posicioná-la também:

typebot-bubble::part(preview-message) {
  bottom: 140px;
}

Ocultar a mensagem de prévia após a interação

Você pode ocultar a mensagem de prévia depois que o usuário interagir com o bot. Este código, por exemplo, mostra a prévia apenas até o usuário abrir o bot ou dispensar a mensagem:

Typebot.initBubble({
  typebot: "my-typebot",
  previewMessage: localStorage.getItem("hideBotPreviewMessage")
    ? undefined
    : { message: "I have a question for you!" },
  onPreviewMessageDismissed: () => {
    localStorage.setItem("hideBotPreviewMessage", "true");
  },
  onInit: () => {
    localStorage.setItem("hideBotPreviewMessage", "false");
  },
});

Isso usa a API localStorage para lembrar o estado da mensagem de prévia.

Comandos

Estes são os comandos que você pode usar para controlar o bot incorporado:

• Typebot.open(): abre o popup ou o balão

• Typebot.close(): fecha o popup ou o balão

• Typebot.toggle(): alterna entre aberto e fechado

• Typebot.showPreviewMessage(): exibe a mensagem de prévia do balão

• Typebot.hidePreviewMessage(): oculta a mensagem de prévia do balão

• Typebot.reset(): limpa o estado lembrado do bot (útil apenas com a opção Lembrar do usuário ativada)

• Typebot.setPrefilledVariables(...): define variáveis preenchidas previamente. Exemplo:

  Typebot.setPrefilledVariables({
    Name: "Jhon",
    Email: "john@gmail.com",
  });

  Para mais detalhes, veja Configuração adicional.

• Typebot.setInputValue(...): define o valor do campo exibido no momento.

• Typebot.submitInput(): envia o campo exibido no momento.

• Typebot.sendCommand(...): envia um comando ao bot.

• Typebot.reload(): recarrega o bot.

Você pode associar esses comandos a um botão, por exemplo:

<button onclick="Typebot.open()">Contact us</button>

Retornos de chamada

Se você precisa disparar eventos no site que hospeda o bot conforme o usuário interage, use estes retornos de chamada:

Typebot.initStandard({
  typebot: "my-typebot",
  onNewInputBlock: (inputBlock) => {
    console.log("New input block displayed", inputBlock.id);
  },
  onAnswer: (answer) => {
    console.log("Answer received", answer.message, answer.blockId);
  },
  onInit: () => {
    console.log("Bot initialized");
  },
  onEnd: () => {
    console.log("Bot ended");
  },
});

Configuração adicional

Você pode preencher previamente os valores das variáveis no código de incorporação, com a opção prefilledVariables. Veja um exemplo:

Typebot.initStandard({
  typebot: "my-typebot",
  prefilledVariables: {
    "Current URL": "https://my-site/account",
    "User name": "John Doe",
  },
});

Isso preenche a variável Current URL com "https://my-site/account" e a User name com "John Doe". Mais sobre variáveis: aqui.

Vale notar que, se a URL do seu site tiver parâmetros de consulta (por exemplo, https://ggchatbot.com?User%20name=John%20Doe), as variáveis serão injetadas automaticamente no bot. Ou seja, você não precisa repassá-los manualmente na configuração da incorporação.