COMO PERSONALIZAR A URL DE COMPARTILHAMENTO E INCORPORAR O BOT?
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".
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.
3º 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:
https://vimeo.com/1015310358?share=copy
🚨 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.
4º 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.
5º 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.
