Principal WIDGET COMO CRIAR E PERSONALIZAR O WIDGET (VISUAL) DO AGENTE DE IA NO TOOLZZ AI?

COMO CRIAR E PERSONALIZAR O WIDGET (VISUAL) DO AGENTE DE IA NO TOOLZZ AI?

Última atualização em Jun 26, 2025

Sobre

O widget do agente de IA é a janela de bate-papo do chatbot que aparece na tela e permite os usuários interagirem diretamente com o bot.

Como funciona

Neste artigo você vai aprender como configurar e personalizar o visual do widget. Isso engloba elementos visuais e interativos como caixas de texto, cor do texto, botões, ícones, imagem do avatar, etc.

Depois, basta copiar o script, instalar na sua aplicação e seus clientes terão experiência prática e interativa com o agente de IA.

🚨Atenção! Cada widget pode ser usado em apenas um agente de IA.

Passo a Passo

Existem dois caminhos que podem ser usados para criar widgets: através do menu lateral ou no formulário de criação/edição do agente de IA. Vamos mostrar os dois neste artigo.

❗Informação importante: o formulário para criação do widget e os campos a serem preenchidos são os mesmos nos dois caminhos.​

Ao criar um widget, ele será salvo no banco de dados da sua plataforma. Depois disso, você poderá usá-lo em qualquer agente de IA que quiser.

Acessando o formulário de criação de widget através do menu lateral

1º passo: no menu lateral, clique na opção "Widget".

Depois, clique no botão "+ Criar Widget" localizado no canto superior direito da tela.

💡Dica: se você estiver criando seu primeiro widget, verá este mesmo botão no centro da tela.

2º passo: se você já tiver criado ao menos um agente de IA, selecione em qual deles deseja usar este widget que vai criar.
​
Se não tiver criado nenhum, essa opção não ficará visível.

Acessando o formulário de criação de widget através da criação/edição de agente de IA

1º passo: dentro do formulário de criação/edição de agente de IA, após configurar a parte de "Agente" e de "Cérebro", acesse a aba "Visual".

💡Dica: se você já criou algum widget no Toolzz AI e ele ainda não está sendo usado em nenhum agente de IA, a opção 'Selecionar widget' ficará disponível nas configurações de 'Visual'. Assim, você poderá escolher um dos widgets disponíveis, que esteja ativado, para ser usado no seu agente de IA.

​

Criando um Widget

Daqui para frente, todos os passos de configurações e todas as telas referentes a criação de widget são os mesmos, independente do caminho que você seguiu anteriormente.

❗Informação importante: todas as configurações realizadas e edições feitas serão mostradas, em tempo real, no modelo de pré-visualização do widget no lado direito da tela.

Configurar Cabeçalho

1º passo: dê um título e um subtítulo para a interface do chatbot do agente de IA.

2º passo: insira a imagem que aparecerá como logo no cabeçalho.

3º passo: insira a imagem que representará o avatar do agente de IA.

4º passo: defina as cores da interface do widget.

Você pode definir a cor de duas formas: clicar no círculo colorido e escolher uma cor ou digitar o código da cor no campo de texto.

  • Cor primária: cor de fundo do cabeçalho. No nosso exemplo escolhemos a cor cinza.

  • Cor secundária: cor dor texto do cabeçalho. No nosso exemplo escolhemos a cor preto.

Configurar chat

Agora, serão feitas as configurações relacionadas ao chat da interface, ou seja, às mensagens trocadas entre bot e usuários.

5º passo: insira a imagem que será o ícone do widget.

Essa imagem aparecerá no botão inicializador do widget (o círculo, localizado no canto inferior direito da tela).

6º passo: digite a primeira mensagem que o agente de IA enviará quando o usuário acessar o chat.

7º passo: clique no círculo colorido para selecionar uma cor ou digite o código da cor no campo de texto para definir as cores dos balões de conversa.

  • Escolha as cores de fundo e do texto dos balões que exibem as respostas do agente de IA.

  • Escolha as cores de fundo e do texto dos balões que exibem as respostas do usuário.

8º passo: na opção "Iniciador de conversas" clique no botão "+" para configurar opções de perguntas prontas, que o usuário pode usar como atalhos, para iniciar a conversa com o agente de IA. Ou seja, ao invés dele digitar o que deseja enviar, basta ele clicar em uma das opções disponíveis.

  • Digite a sugestão de pergunta na caixa de texto;

  • Caso queira adicionar mais opções, clique "+Novo item";

  • Para excluir uma opção, basta clicar no botão de "x" referente a ela.

Selecionar voz

Se você quiser que seu agente de IA além de enviar as mensagens por escrito, também responda falando as mensagens, basta selecionar uma voz par ele.

9º passo: clique no campo da opção "Voz" e clique em um nome para selecionar uma voz.

💡Dica: você pode testar os estilos de vozes disponíveis. Para isso, escolha uma voz e, no topo do cabeçalho da pré-visualização do widget, clique no ícone de alto-falante para ativar o áudio. Envie uma mensagem e espere pela resposta a IA.

Gerar Widget

Antes de gerar o widget, confira se você completou todas as tarefas obrigatórias no contador de tarefas. São três tarefas: "Adicionar um título", "Adicionar um sub-título" e "Adicionar primeira mensagem".

A medida que você cumpre cada uma, ela é sinalizada com o símbolo de check e a barra de porcentagem é preenchida.

10º passo: após realizar todas as configurações, clique no botão "Criar widget".

Código e link de incorporação

O código de incorporação do widget será gerado. Ele deve ser adicionado ao seu site para que o ícone do chatbot apareça no canto da tela e possa e possa ser acessado pelos visitantes.

Cada aba (HTML, React, Script, Vue, Angular e Curl.) representa uma forma diferente de integrar o widget à sua aplicação, de acordo com a tecnologia que você usa no seu site ou sistema.

11º passo: escolha um dos formatos e depois clique no botão "Copiar". Use a informação para instalar o bot no seu site ou aplicação.

Você também terá acesso ao link de compartilhamento do widget. Ele permite que você disponibilize o seu agente de IA de forma rápida e simples, sem precisar integrá-lo diretamente em um site. Esse link pode ser enviado para os usuários ou usado em diferentes canais para que qualquer pessoa possa interagir com o bot.

Embed

Link direto para uma página independente onde o widget do agente de IA é exibido como uma janela flutuante no canto da tela.

Web

Link direto para uma página independente onde o widget do agente de IA é exibido em tela cheia.

12º passo: você pode escolher se deseja deixa o link publico (qualquer pessoa terá acesso) ou privado (apenas membros do Toolzz AI podem acessar o chat).
​
​❗Informação importante: a configuração vale tanto para link embed quanto web.

13º passo: navegue pelas abas "Embed" e "Web" para abrir os widgets em uma nova aba ou copiar o link de compartilhamento correspondente a cada opção.

14º passo: escolha o estado inicial para o widget no modo Embed.

Nessa funcionalidade você pode definir se o chatbot será iniciado aberto (já mostrando a janela de conversa do chat) ou fechado (exibindo apenas o ícone).

🚨Atenção! Lembrando que essa configuração só afeta o modo Embed.

15º passo: não se esqueça de clicar no botão "Concluir", localizado no canto superior direito da tela, para salvar todas as configurações.

Gerenciando Widgets

Todos os widgets criados ficam expostos na página de widgets, que pode ser acessada pelo menu lateral.

16º passo: ao ser criado, um widget é ativado, automaticamente. Para desativá-lo, clique na chave de ativação no card. Repare que ela ficará cinza.
​
Para ativá-lo, basta clicar na chave novamente.

17º passo: clique no ícone de três pontos para ter acesso à algumas opções.

  • Chat: clique para abrir, em uma nova aba, o widget em modo "web";

  • Embed: clique para abrir, em uma nova aba, o widget em modo "embed";

  • Editar: clique para abrir o formulário de criação de widget e editar configurações;

  • Duplicar: clique para criar um novo widget com as mesmas configurações;

    💡Dica: duplique um widget quando quiser usar as mesmas configurações visuais em outro agente de IA, já que cada widget só pode ser usado em apenas um agente de IA.

  • Excluir: clique para apagar o widget.

18º passo: clique no ícone de estrela, no card do widget, para favoritá-lo. Assim, ele aparecerá no começo da listagem e você poderá encontrá-lo mais facilmente.

💡Dica: você consegue identificar o status do link de compatilhamento de um widget pelo ícone em seu card. O ícone de cadeado quer dizer que o link está configurado como privado. Já o ícone de globo com linhas verticais e horizontais cruzadas, mostra que o ícone está configurado como público.

Pronto! Agora você já sabe criar e personalizar o widget do seu agente de IA.