Passar para o conteúdo principal
Todas as coleçõesToolzz Bots - Tutoriais Embed ✅
COMO PERSONALIZAR A URL DE COMPARTILHAMENTO E INCORPORAR O BOT?
COMO PERSONALIZAR A URL DE COMPARTILHAMENTO E INCORPORAR O BOT?
Atualizado há mais de um mês

Sobre

Compartilhar seu bot através de URLs permite que ele seja facilmente acessado por qualquer pessoa com o link, tornando a distribuição e o alcance do bot mais eficientes. A personalização dessas URLs oferece a possibilidade de criar links mais amigáveis e identificáveis, facilitando a memorização e o compartilhamento.

Incorporar o bot em outras plataformas, como websites e aplicativos, em tipos de linguagens, como HTML & Javascript, amplia sua funcionalidade e acessibilidade, permitindo uma interação mais direta e integrada com os usuários. Essas funcionalidades não só aumentam a visibilidade do seu bot, mas também melhoram a experiência do usuário, tornando a interação com o bot mais intuitiva e conveniente.

Passo a passo

1º passo: ao entrar no seu bot, acesse a página "Embed".

Bot URL

Neste campo você encontrará a URL de compartilhamento do seu bot.

2º passo: clique em "Edit" para editar a parte personalizável da URL de compartilhamento do seu bot. Digite o texto que deseja e, para finalizar, clique fora do box de texto.

Para copiar a URL basca clicar no botão "Copiar".

3º passo: clique no botão "Add my domain" (adicionar meu domínio) e depois em "Connect new" (conectar novo) para vincular um domínio personalizado ao seu bot.

4º passo: insira o domínio personalizado para gerar, automaticamente, dados que devem ser adicionados ao seu provedor DNS. E, para finalizar, clique em "Save".

🚨Atenção!

Talvez seja preciso esperar alguns minutos para que o registro seja atualizado.

Incorpore seu bot

Seu bot criado no Toolzz Bots pode ser incorporado em diversos formatos:

  • WhatsApp;

  • Shopify;

  • Wix;

  • Google Tag Manager;

  • HTML & Javascript;

  • React;

  • Nextjs;

  • API;

  • Notion;

  • Webflow;

  • FlutterFlow;

  • Framer;

  • Script;

  • Iframe.

1º passo: clique no nome do formato que deseja realizar a configuração da incorporação do bot.

Na maioria dos formatos o próximo passo será escolher o modelo de layout que vai utilizar.

Você pode optar entre três padrões diferentes de layout:

  • Standart (padrão): incorpora o bot em uma caixa com o tamanho de sua escolha em qualquer lugar do seu aplicativo. E você pode definir a largura e a altura desta caixa. Observe um exemplo a seguir:

  • Pop-up (aparecer): incorpora o bot em um pop-up que se sobrepõe à página do seu site. Pode ser acionado após um atraso ou com o clique de um botão, por exemplo. Confira um exemplo abaixo:

  • ​Bubble (bolha): incorpora o bot como um “balão de bate-papo” no canto inferior direito do seu site. Pode ser acionado automaticamente ou com um clique. Também pode vir com uma “mensagem proativa”. Veja um exemplo no vídeo abaixo:

🚨 Atenção!

Nos formatos WhatsApp, API, Notion, FlutterFlow e Iframe não é preciso escolher um modelo de layout, basta seguir para as configurações necessárias.

2º passo: para cada opção de layout escolhida, haverá configurações diferentes a serem feitas. Elas são práticas e intuitivas.

Para cada opção que você clicar aparecerá um mini tutorial de como realizar as configurações.

3º passos: faça as configurações necessárias, copie o código gerado e cole dentro do <body> do seu código.

❗Informações importantes

  • Repare que, ao alterar os campos de configurações, seu código será atualizado, automaticamente.

  • A cada configuração é gerado um novo código e elas não ficam salvas. Toda vez que abrir as configurações de incorporação, encontrará a configuração nativa da plataforma.

Neste artigo mostraremos mais detalhes das configurações de incorporação das três plataformas mais utilizadas pelos usuários:

WhatsApp

  • Crie conexão com um número do WhatsApp.

    • É importante ressaltar que você precisa ter criado um aplicativo WhatsApp Meta, terá que fazer algumas configurações no Facebook Business e também no WhatsApp na Meta for Developers.

  • Configure a integração com o WhatsApp:

    • Tempo limite de expiração da sessão: escolha um número de 0 a 48 para definir quanto tempo uma sessão pode ficar sem atividade antes de expirar. Se o usuário não interagir por mais tempo que esse limite, a sessão será encerrada. Enviando uma nova mensagem, o usuário começará um novo chat. O tempo padrão é 4 horas.

    • Condição de início do bot: uma condição que será avaliada quando um usuário iniciar uma conversa com seu bot. Se a condição não for atendida, o bot não será acionado.

    • Não se esqueça de ativar a chave de habilitar a integração do WhatsApp e de clicar no botão "Publicar".

    Você pode seguir o tutorial bem detalhado que temos na nossa própria plataforma: COMO INCORPORAR O BOT NO WHATSAPP.

Google Tag Manager

  • Ao escolher o layout Standart:

    • No painel da sua conta Google Tag Manager, clique em "Adicionar uma nova TAG", depois escolha "Custom HTML tag" e selecione "Support document.write".

      Cole o código gerado pelo Toolzz Bot.

    • Defina se a janela do chat aparecerá em tela cheia ou configure as dimensões da janela do bot;

    • Na sua página web, você precisa ter um elemento no qual o bot será incorporado. Insira o código gerado pelo Toolzz Bots neste elemento.

  • Ao escolher o layout Pop-up:

    • No painel da sua conta Google Tag Manager, clique em "Adicionar uma nova TAG", depois escolha "Custom HTML tag" e selecione "Support document.write".

    • Defina se o pop-up será exibido automaticamente e quando ele deve ser exibido.

    • Copie o código gerado e cole na sua conta GTM.

  • Ao escolher o layout Bubble:

    • No painel da sua conta Google Tag Manager, clique em "Adicionar uma nova TAG", depois escolha "Custom HTML tag" e selecione "Support document.write".

    • Ative a opção "Visualizar mensagem" para que junto com o ícone do bot seja mostrada uma mensagem e o avatar do bot. Você pode personalizar estes itens inserindo uma URL de imagem e editando a mensagem inicial.

    • Defina se a mensagem será exibida automaticamente e após quantos segundos ela deve ser exibida.

    • Clique em "Tema" para personalizar o tamanho, a cor e a imagem do ícone do bot.

    • Caso você tenha ativado a opção "Visualizar mensagem", também poderá personalizar as cores dos itens "Background", "Cor do texto", "Fechar fundo do botão" e "Fechar cor do ícone".

    💡Dica

    Você pode ver todas as mudanças realizadas na parte de "Preview".

    • Copie o código gerado e cole dentro do <body> do seu código.

HTML & Javascript

  • Ao escolher o layout Standart:

    • Defina se a janela do chat aparecerá em tela cheia ou configure as dimensões da janela do bot;

    • Copie o código gerado e cole dentro do <body> do seu código.

    • Se você tiver bots diferentes na mesma página, você terá que diferenciá-los com uma id de propriedade adicional:

      <script type="module">
        import Typebot from 'https://cdn.jsdelivr.net/npm/@typebot.io/js@0.3/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>

  • Ao escolher o layout Pop-up:

    • Defina se o pop-up será exibido automaticamente e quando ele deve ser exibido.

    • Copie o código gerado e cole em qualquer lugar de seu código: <body>.

  • Ao escolher o layout Bubble:

    • Ative a opção "Visualizar mensagem" para que junto com o ícone do bot seja mostrada uma mensagem e o avatar do bot. Você pode personalizar estes itens inserindo uma URL de imagem e editando a mensagem inicial.

    • Defina se a mensagem será exibida automaticamente e após quantos segundos ela deve ser exibida.

    • Clique em "Tema" para personalizar o tamanho, a cor e imagem do ícone do bot.

    • Caso você tenha ativado a opção "Visualizar mensagem", também poderá personalizar as cores dos itens "Background", "Cor do texto", "Fechar fundo do botão" e "Fechar cor do ícone".

    💡Dica

    Você pode ver todas as mudanças realizadas na parte de "Preview".

    • Copie o código gerado e cole em qualquer lugar de seu código: <body>.

    • Posição personalizada do botão:
      Você pode mover o botão com algum CSS personalizado em seu site. Por exemplo, você pode colocar o botão de bolha mais alto com o seguinte CSS:

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

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

      Se você tiver uma mensagem de visualização, também terá que posicioná-la manualmente:

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

  • Comandos

    Aqui estão os comandos que você pode usar para acionar seu typebot incorporado:

    Typebot.open(): abra pop-up ou balão;

    Typebot.close(): fechar pop-up ou balão;

    Typebot.toggle(): alterna o estado de bolha ou pop-up aberto/fechado;

    Typebot.showPreviewMessage(): mostrar mensagem de pré-visualização do balão;

    Typebot.hidePreviewMessage(): ocultar mensagem de pré-visualização do balão;

    Typebot.setPrefilledVariables(...): defina variáveis ​​pré-preenchidas. Exemplo:

    Typebot.setPrefilledVariables({ Name: 'Jorge', Email: 'jorge@gmail.com', })

    Typebot.setInputValue(...): defina o valor na entrada exibida atualmente. Você pode vincular esses comandos a um elemento de botão, por exemplo:

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

  • Retornos de chamada

    Se precisar acionar eventos em seu site principal quando o usuário interagir com o bot, você poderá usar os seguintes 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 ​​do bot em seu código incorporado adicionando prefilledVariables a opção. Aqui está um exemplo:

    Typebot.initStandard({
      typebot: 'my-typebot',
      prefilledVariables: {
        'Current URL': 'https://my-site/account',
        'User name': 'Jorge Silva',
      },
    })

    Ele preencherá previamente a variável Current URL com “https://my-site/account” e a variável User name com “Jorge”. Você encontra mais informações sobre variáveis no artigo CONDICIONAIS.

    Observe que se a URL do seu site contiver parâmetros de consulta (por exemplo, https://bots.toolzz.ai?User%20name=Jorge%20Silva), as variáveis ​​serão injetadas automaticamente no Toolzz Bots. Então você não precisa transferir manualmente os parâmetros de consulta para a configuração de incorporação do bot.

Pronto! Agora você já sabe como personalizar a URL de compartilhamento e incorporar o bot.

Respondeu à sua pergunta?