Aparência do widget

Esta página é para quem já tem o widget no ar e quer que ele pareça parte do site, e não um enxerto. Tudo aqui é visual e textual — nada muda o que o agente sabe ou responde.

Todos os ajustes ficam em AI Agents (“Agentes de IA”) → Configure (“Configurar”) no cartão do agente → aba Chat Customization (“Personalização do chat”). O que você mexe aparece na hora na pré-visualização ao lado. Nada é gravado até você clicar em Save Changes (“Salvar alterações”), no rodapé.

Os 8 estilos

A seção Chat design (“Design do chat”) traz oito estilos prontos. Escolher um troca de uma vez o fundo, a cor do texto, a cor do balão, a cor de destaque e a fonte — você pode ajustar cada um depois.

Estilo	Como o painel descreve
Legacy	O visual original: claro, neutro, chatbot clássico.
Ask Anything	Estilo de assistente moderno, para perguntas gerais.
Glass	Vidro escuro fosco, brilho suave e balões arredondados.
Terminal	Fonte monoespaçada, cara de terminal, cantos retos.
Playful	Claro, amigável, muito arredondado, com acentos quentes.
Calm Mint	Verde-azulado escuro e limpo, com bordas discretas.
Aurora	O novo “pergunte o que quiser”: escuro, com um orbe brilhante de avatar.
Sunrise	Claro, quente e arejado, com um acento coral suave.

Legacy e Ask Anything aparecem agrupados como os estilos antigos; os outros seis vêm marcados como New (“Novo”).

Dois desses estilos — Ask Anything e Aurora — não desenham um balão de conversa no canto, e sim um painel central de perguntas. Isso muda quais opções de posicionamento ficam disponíveis, como você vê mais abaixo.

Cores e fonte

Brand color (“Cor da marca”) define a cor de destaque. Há seis cores prontas e um seletor de cor livre ao lado. Abaixo dela vêm três ajustes finos:

• Background (“Fundo”) — o fundo da janela do chat.
• Text color (“Cor do texto”) — a cor das letras.
• Chat bubble (“Balão do chat”) — a cor do balão de mensagem.

Em Typography (“Tipografia”) você escolhe a fonte. Há quatro atalhos — Instrument Sans, Space Grotesk, JetBrains Mono e System — e um campo de busca com mais opções.

Bom saber: o campo de cor de destaque nasce com a cor do estilo escolhido. Se você trocar de estilo depois de ajustar as cores à mão, o estilo novo sobrescreve tudo — refaça os ajustes depois de escolher o estilo, não antes.

Onde o widget fica na página

A seção Widget placement (“Posicionamento do widget”) tem quatro formatos:

• Floating bubble (“Balão flutuante”) — o botão clássico no canto, que abre uma janela de chat.
• Right drawer (“Gaveta à direita”) — um painel de altura inteira que entra pela borda direita.
• Left drawer (“Gaveta à esquerda”) — o mesmo, pela borda esquerda.
• Search bar (“Barra de busca”) — uma barra de “pergunte o que quiser” que abre o painel de perguntas. Só fica disponível com os estilos Ask Anything ou Aurora; com outro estilo, a opção aparece bloqueada com o aviso Needs the Ask Anything or Aurora design (“Precisa do design Ask Anything ou Aurora”).

Abaixo, o campo Side (“Lado”) escolhe entre Left (“Esquerda”) e Right (“Direita”), e mais alguns números permitem ajuste fino:

Campo	Para que serve	Faixa aceita
Window width (px)	Largura da janela flutuante	280 a 800
Window height (px)	Altura da janela flutuante	400 a 900
Drawer width (px)	Largura do painel nas gavetas	320 a 640
Bottom offset (px)	Distância da borda de baixo	0 a 200
Side offset (px)	Distância da borda lateral	0 a 200
Search bar text	O texto dentro da barra de busca	até 80 caracteres

Valores fora dessas faixas são recusados ao salvar.

Há ainda a chave Hide launcher — I’ll use my own button (“Esconder o botão — vou usar o meu”), que remove o botão padrão. Use quando o seu site já tem um botão de “Fale conosco” — a ligação entre os dois está em Instalar o widget.

Os textos que o visitante lê

Há dois momentos distintos, e o painel separa os dois de propósito.

Antes de abrir o chat. A seção Greeting messages (“Mensagens de saudação”) define os balõezinhos que aparecem acima do botão, chamando a atenção de quem ainda não clicou. Vêm cinco prontos, você pode editar, remover ou acrescentar os seus (até 100 caracteres cada). O botão Load defaults (“Carregar padrões”) devolve a lista original.

Depois de abrir o chat. A seção Welcome message & quick actions (“Mensagem de boas-vindas e ações rápidas”) define o que aparece dentro da janela.

• Welcome message (“Mensagem de boas-vindas”) — o balão de saudação, até 300 caracteres. Deixando vazio, a própria primeira resposta do agente faz as vezes de saudação.
• Quick actions (“Ações rápidas”) — botões de um toque, até 60 caracteres cada. Os padrões são Track my order, Start a return e Talk to a human; troque pelos assuntos reais do seu negócio. Eles somem depois da primeira mensagem do visitante.

Com o estilo Ask Anything, aparecem dois campos a mais: Welcome Title (“Título de boas-vindas”, até 100 caracteres) e Welcome Subtitle (“Subtítulo de boas-vindas”, até 250 caracteres). Deixando vazios, o painel usa o nome do agente.

As quatro chaves de comportamento

Ainda na seção de design, quatro chaves mudam o que o visitante vê:

• Show citations (“Mostrar citações”) — vem desligada. Ligando, cada resposta passa a mostrar, em etiquetas embaixo, de quais fontes da base de conhecimento ela saiu. Enquanto estiver desligada, as respostas não indicam origem nenhuma.
• Collect email before chat (“Coletar e-mail antes do chat”) — vem desligada. Ligando, o visitante precisa informar o e-mail antes de conseguir escrever.
• Show AI disclaimer (“Mostrar aviso de IA”) — vem ligada. Acrescenta ao rodapé do chat a frase “AI can make mistakes. Check important info.” (“A IA pode errar. Confira informações importantes.”). Some sozinha quando um atendente humano assume a conversa.
• Let visitors start a new chat (“Permitir começar uma conversa nova”) — vem desligada. Ligando, aparece um controle de New chat que encerra a conversa atual e começa outra. Fica escondido enquanto um humano está atendendo.

Atenção: ligar Show citations é a diferença entre uma resposta que a pessoa pode conferir e uma que ela precisa aceitar no escuro. Se você tem base de conhecimento montada, ligue.

O que não tem tela

Três coisas existem no sistema mas não têm campo no painel nesta versão: ícone próprio do botão, cor do ícone e CSS personalizado. Não há onde preencher — mesmo que você veja referência a esses ajustes em outro lugar, aqui não existe tela para eles.

Também não há seletor de tom de voz. O jeito de escrever do agente sai das instruções de texto — veja Personalidade e instruções.

A foto do agente

A foto não fica nesta aba. Ela é editada no topo da tela do agente: passe o mouse sobre a imagem redonda e clique em Change (“Trocar”). Abre a janela Choose a picture (“Escolha uma imagem”), com avatares prontos e a opção Upload your own (“Enviar a sua”). São aceitos arquivos JPEG, PNG e WebP de até 5 MB.

Próximo passo

Para deixar o cliente mandar print e documento na conversa, veja Anexos de arquivo.