> ## Documentation Index > Fetch the complete documentation index at: https://docs.chatnorris.ai/llms.txt > Use this file to discover all available pages before exploring further. # Personalizar o widget > Como ajustar as cores, o avatar, os textos e a aparência geral do widget do ChatNorris. # Personalizar o widget O widget do ChatNorris é totalmente personalizável. Você pode ajustar a aparência dele para combinar com a identidade visual da sua empresa. A personalização está disponível em dois momentos: * **Durante a criação do agente** — no passo 6 do assistente, com prévia em tempo real. * **A qualquer momento** — nos detalhes do agente, na aba **Personalizar**. ![TODO: captura do widget flutuante personalizado sobre um site](https://mintcdn.com/chatnorris/_RNPg7jBCB9AE-Bf/images/PLACEHOLDER-widget-preview.png?fit=max\&auto=format\&n=_RNPg7jBCB9AE-Bf\&q=85\&s=8498d482f969b21b6d3a93983b82a0b2) ## Opções de personalização ### Cor primária A cor principal do widget. Ela é usada: * No fundo do header (barra superior do chat) * No botão flutuante que abre o widget * No botão de envio de mensagens Você pode digitar qualquer código de cor hexadecimal (`#RRGGBB`) ou usar o seletor visual de cores. > [!TIP] > > Se você criou o agente com a URL do seu site, o ChatNorris detecta automaticamente a cor primária da sua marca e a aplica como valor inicial. ### Cor do texto A **Cor foreground** (em **Branding → Cores**) é a cor dos textos, ícones e outros elementos exibidos sobre a cor primária (no header e no botão de envio). Por padrão, é branca, e você pode alterá-la com o seletor de cores. Se você criou o agente com a URL do seu site, o assistente de criação a escolhe de acordo com a luminosidade da cor primária detectada: escura se a primária for clara, branca se for escura, para garantir o contraste. ### Fundo do chat Além da cor primária, você pode personalizar o fundo do painel da conversa: cor sólida ou degradê (duas cores). Isso é configurado em **Branding → Fundo do chat**. ### Aparência avançada Em **Branding → Aparência avançada** você pode ajustar, além das cores: * **Tipografia** — Default, Serif, Monoespaçada ou Poppins. * **Arredondamento do painel** — um controle deslizante de 0 a 24px para os cantos do painel do widget. * **Densidade das mensagens** — **Confortável** ou **Compacta**, para controlar o espaçamento entre as mensagens. ### Nome do agente e mensagem de boas-vindas Esses campos ficam na subseção **Textos** (veja a tabela mais abaixo), não em Interface: * **Nome do agente** — o nome do bot que aparece no header do widget. Exemplos: `"Sofia"`, `"Assistente IA"`. * **Mensagem de boas-vindas** — a primeira mensagem que o agente envia automaticamente ao abrir o widget. Exemplos: `"Olá! Como posso ajudar você hoje?"`, `"Olá 👋 Estou aqui para tirar suas dúvidas sobre nossos produtos."` ### Avatar do agente (Bot Avatar) Em **Branding → Bot Avatar** você escolhe a imagem que aparece ao lado dos balões de resposta do bot. Há duas opções: * **Logo:** usa o logo que você enviou em **Branding → Logo**. * **Custom:** envie uma imagem própria (PNG, JPG, SVG ou WebP, de até 2 MB). Você pode escolher se ela aparece em **Formato circular**. Se não houver nenhuma imagem, é exibido o ícone de chat sobre a cor primária. O Bot Avatar afeta apenas os balões de resposta: o header do widget sempre usa o **Logo** (seção **Header Icon**), e o botão flutuante que abre o chat é configurado à parte em **Chat Button** (imagem e tamanho). ### Ocultar o botão com o chat aberto Em **Branding → Chat Button**, a chave **Ocultar com o chat aberto** faz o botão flutuante desaparecer enquanto o chat está aberto: o painel do chat desce e ocupa o lugar dele, e o visitante o fecha com o **X** do cabeçalho. Com o chat fechado, o botão aparece normalmente. Vem desativada. ### Foto e nome do operador Quando uma pessoa da sua equipe responde uma conversa do widget, o visitante vê, por padrão, o ícone 🎧 e o nome do bot. Se você ativar **Mostrar foto e nome do operador** em **Branding → Operador humano**, o widget mostra a foto de perfil e o primeiro nome de quem responde. Vem desativada. Cada pessoa envia a própria foto em **Minha conta → Perfil** (veja [Gerenciar sua conta](https://docs.chatnorris.ai/pt/cuenta-y-facturacion/gestionar-cuenta.md#foto-de-perfil)). ### Quick replies (respostas rápidas) Botões de sugestão que aparecem abaixo da mensagem de boas-vindas para que o visitante comece a conversa com um clique (até 6). São configurados em **Textos → Quick replies**. Cada resposta rápida pode ter, opcionalmente, um ícone — há um seletor de emojis integrado para escolhê-lo sem sair do formulário. #### Respostas rápidas flutuantes Você também pode mostrar as respostas rápidas como botões **sobre o ícone do chat fechado**, para que o visitante comece a conversar sem abrir o widget antes. Ao tocar em uma, o chat se abre e essa pergunta é enviada (assim que o chat estiver pronto, por exemplo depois de um Lead Form obrigatório). Em **Textos**, ative **Mostrar sobre o ícone do chat no desktop** e/ou **no celular**, e escolha: * **Comportamento** — mostrar uma vez a cada 24 horas por visitante, ou em cada visita. * **Duração do atraso** — segundos desde o carregamento da página até os botões aparecerem (0 = imediatamente). Sobre o ícone, são exibidas apenas as 3 primeiras respostas rápidas. Se a [mensagem flutuante](#mensagem-flutuante) também estiver ativa, os botões aparecem abaixo dela, com o mesmo estilo e a mesma frequência, mas cada um com seu próprio tempo de espera (por exemplo, a mensagem aos 2 s e os botões aos 4 s). O **×** fecha os dois. ### Texto de carregamento O texto exibido enquanto o agente está gerando uma resposta (por padrão, algo como "Digitando..."). Personalizável em **Textos → Texto de carregamento**, até 60 caracteres. ### Texto do rodapé (footer) Texto livre no rodapé do widget, configurável em **Textos → Texto do footer**. ## Como editar a personalização depois da criação **1. Acesse os detalhes do agente** No menu lateral, clique em **Agentes** e depois no agente que você quer modificar. **2. Entre na aba Personalizar** Lá você vai encontrar cinco subseções: | Subseção | O que inclui | | - | - | | **Branding** | Logo, cores (primária e foreground), Header Icon, Bot Avatar, Chat Button, fundo do chat (cor ou degradê) e aparência avançada (tipografia, arredondamento, densidade das mensagens). | | **Interface** | Largura e **altura máxima** do chat no desktop (altura entre 400 e 900 px, 700 por padrão), idioma do widget, posição (embaixo à direita ou à esquerda) e espaçamento horizontal e vertical. Em telas mais baixas, o chat diminui sozinho para que o cabeçalho fique sempre visível. | | **Visibilidade** | Status **Público** ou **Privado** do widget, um horário de visibilidade e a opção de ocultá-lo em páginas específicas do seu site. | | **Textos** | Nome do agente, mensagem de boas-vindas, quick replies (com ícones opcionais e a opção de mostrá-las sobre o ícone do chat), texto de carregamento e texto do footer. | | **Configurar** | Veja os detalhes completos na tabela abaixo. | **3. Faça as alterações** Modifique os campos que precisar. As alterações aparecem na prévia em tempo real. A prévia também mostra o chat fechado, com a mensagem flutuante e os botões flutuantes (sem o tempo de espera, para que você os veja na hora). **4. Salve** Clique em **Salvar**. As alterações são aplicadas imediatamente no widget instalado no seu site. ### O que inclui Configurar A subseção **Configurar** agrupa as demais chaves de comportamento: | Opção | O que controla | | - | - | | **Ocultar texto "Com a tecnologia do ChatNorris"** | Oculta a marca do ChatNorris no rodapé do widget. Requer o plano Premium ou o add-on para remover a marca. | | **Texto de marca personalizado** | Só aparece se você já removeu o branding — permite mostrar seu próprio texto nesse lugar do footer em vez de deixá-lo vazio. | | **Avaliação das respostas de IA** | Mostra ícones de 👍/👎 em cada resposta do bot, com confirmação visual e um botão para copiar a mensagem. | | **Capturar contato após resposta não útil** | Se o visitante marcar uma resposta com 👎, oferece a ele a opção de deixar o email para que um agente humano faça o acompanhamento. Requer que a avaliação das respostas esteja ativa. | | **Download da transcrição** | Permite que o visitante baixe o histórico do chat. | | **Arquivos anexos** | O visitante pode anexar imagens (PNG, JPG, WebP ou GIF, de até 5 MB) e documentos PDF (de até 15 MB) durante a conversa. | | **Fontes das respostas de IA** | Mostra ao visitante quantas fontes da base de conhecimento foram usadas para gerar a resposta. | | **Integração com o Google Analytics** | Envia eventos do widget (abertura, mensagens etc.) para o Google Analytics do próprio site do cliente (gtag.js/GTM) — não exige credenciais da sua parte, pois se conecta ao GA já instalado na página. | | **Mensagem flutuante ("hovering message")** | Um balão de texto que aparece ao lado do botão flutuante para chamar a atenção antes de o visitante abrir o chat. Veja [Mensagem flutuante](#mensagem-flutuante). | | **Abrir chat automaticamente** | Abre o widget sozinho, no desktop e/ou no celular, depois de um tempo de espera configurável (**Duração do atraso**), uma vez a cada 24 horas por visitante ou em cada visita. | | **Entrada de voz** | Mostra um botão de microfone no campo de texto para que o visitante dite a mensagem em vez de digitá-la, usando o reconhecimento de voz do navegador (Chrome, Edge e Safari). O texto é inserido no campo, não é enviado sozinho, e o áudio não chega ao ChatNorris. Você pode definir a **Duração máxima** da gravação (5 a 120 s, 60 por padrão). As notas de voz como mensagem são recebidas nos [canais de mensagens](https://docs.chatnorris.ai/pt/guias/canales-whatsapp-instagram.md#notas-de-voz), não no widget. | ### Mensagem flutuante A mensagem flutuante aparece sobre o ícone do chat fechado. Clicar na mensagem abre o chat; o **×** apenas a fecha (e fica sempre visível, também em telas sensíveis ao toque). Ela é configurada em **Configurar → Mensagem flutuante**: | Opção | O que controla | | - | - | | **Estilo** | **Cartão** (padrão: branco, com o avatar e o nome do agente), **Vidro** (translúcido, deixa ver o site) ou **Cor da marca** (com a cor primária e a cor do texto do widget). | | **Comportamento** | Mostrar uma vez a cada 24 horas por visitante, ou em cada visita. Com "uma vez a cada 24 horas", ela também não aparece nesse período se o visitante fechou a mensagem ou abriu o chat. | | **Espera** | Segundos antes de mostrar a mensagem (0 = imediatamente). | > [!NOTE] > > Se a **abertura automática** abrir o chat antes de a mensagem flutuante (ou os botões flutuantes) aparecer, a aba mostra um aviso para que você ajuste os tempos de espera. A abertura automática não silencia mais a mensagem flutuante para sempre: só abrir o chat manualmente ou fechá-lo a silencia por 24 horas. > [!NOTE] > > Os campos desta tabela não seguem necessariamente a mesma ordem dentro da aba **Configurar** do portal — eles estão agrupados em blocos (branding/marca, avaliação das respostas e "Outras configurações", que reúne arquivos anexos, fontes de IA e Google Analytics). > [!NOTE] > > Você não precisa reinstalar o snippet no seu site quando altera a personalização. O widget carrega a configuração de forma dinâmica a partir dos servidores do ChatNorris. > [!NOTE] > > No widget web, os links que o agente compartilha nas respostas (`[texto](URL)`) aparecem como hiperlinks reais, clicáveis e que abrem em uma nova aba — e o texto em `**negrito**` aparece em negrito. O agente decide quando usar esse formato; não é algo que você configura manualmente. Esse formato só é renderizado no widget web: no WhatsApp, Instagram e Telegram, as respostas são enviadas como texto simples. > [!NOTE] > > Se o visitante recarregar a página enquanto tem uma conversa aberta, o widget restaura automaticamente o histórico de mensagens (e qualquer formulário de Lead Form pendente) ao carregar de novo — o visitante não precisa retomar a conversa do zero. ## Lead form — solicitar dados antes ou durante o chat O lead form não é mais configurado na personalização do widget: agora ele é uma **ação** do agente. É configurado em `Agentes → [seu agente] → Ações → Lead Form`, onde você pode definir se é obrigatório, quais campos pedir, quando deve aparecer e os textos do formulário. Veja o guia completo em [Ações do agente](https://docs.chatnorris.ai/pt/guias/acciones.md#lead-form). Os dados ficam registrados automaticamente na seção **Leads** do portal. ## Perguntas frequentes > [accordion] As alterações no widget são aplicadas imediatamente? > > Sim. Ao salvar as alterações, o widget é atualizado no seu site sem precisar reinstalar o código nem modificar nada no HTML. Os visitantes que abrirem o widget pela primeira vez depois da alteração verão a nova configuração. > [accordion] Posso usar o mesmo widget em vários sites com aparências diferentes? > > Atualmente, cada agente tem uma única configuração de widget. Se você precisa de aparências diferentes para sites diferentes, pode criar agentes separados com configurações visuais diferentes e usar o snippet correspondente a cada um. > [accordion] Que tamanho e formato o avatar deve ter? > > Recomendamos uma imagem quadrada de pelo menos 100×100 px. São aceitos PNG, JPG, SVG ou WebP de até 2 MB. Se você ativar **Formato circular**, o widget a recorta em círculo. > [accordion] Posso ocultar o widget em certas páginas? > > Sim, sem mexer no código: em `Personalizar → Visibilidade → Ocultar em páginas específicas` você pode indicar em quais páginas do seu site o widget não deve aparecer. Você também pode definir um horário de visibilidade na mesma seção. This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.