# Personalizar o webchat no construtor

> No construtor do webchat você escolhe o botão, a tela inicial, as cores e a conversa, vê tudo na prévia, testa de verdade e aplica no webchat.

Endereço: https://help.nextags.com.br/tutoriais/canais/personalizar-webchat/
Tipo: Tutorial · Básico

Atualizado em: 24/10/2026

> **Resposta rápida**
>
> Abra o webchat em **Configurações** › **Canais** › **Web Chatbot** › **Configurações**. Em **Aparência do webchat**, ajuste as seções do **Personalizar** e confira na **Prévia ao vivo**. Clique em **Aplicar no webchat** e, se mudou o botão, a janela ou a tela inicial, copie de novo o código em **Instalar** e troque no seu site.

**Antes de começar**

- Um webchat criado. Veja [Colocar o webchat no seu site](https://help.nextags.com.br/tutoriais/canais/webchat-no-site/).
- Para os atalhos que começam um fluxo: um ponto de entrada em **Ferramentas** › **Links de pontos de entrada**. Veja [Iniciadores de conversa e menu do webchat](https://help.nextags.com.br/tutoriais/canais/iniciadores-e-menu-do-webchat/).

## Passo a passo

### Passo 1: Abra o construtor

Na lista **Webchats**, clique no webchat. O **Construtor do webchat** abre no alto da página, em **Aparência do webchat**.

![A seção Aparência do webchat: o Construtor do webchat com as seções do Personalizar à esquerda e a Prévia ao vivo à direita, com a tela inicial aberta.](https://help.nextags.com.br/_img/canais-webchat/construtor.webp)
*O construtor do webchat.*

1. As seções do **Personalizar**: clique numa para abrir.
2. **Prévia ao vivo**: o webchat num site de exemplo, que muda na hora.
3. **Testar de verdade**: abre o webchat de verdade numa página de teste.
4. O estado da conversa: **Há mudanças não aplicadas** ou **Aplicado ✓**.
5. **Aplicar no webchat**: grava o visual da conversa no webchat.
6. **Instalar**: o código do site e os passos para pôr no ar.

Enquanto você mexe, o construtor guarda um rascunho neste navegador (**Rascunho salvo**).

### Passo 2: Escolha o botão

Abra **Botão**. É o que aparece no canto do site, com o chat fechado.

![A seção Botão aberta: Estilo (Mascote, Bolha, Pílula), Imagem própria, Tamanho, Lado da tela e Animação.](https://help.nextags.com.br/_img/canais-webchat/secao-botao.webp)
*A seção Botão.*

1. **Estilo**: **Mascote** (o robô animado), **Bolha** (um círculo com ícone) ou **Pílula** (ícone com um texto, que você escreve em **Texto da pílula**).
2. **Imagem própria (opcional)**: o link `https://` de um PNG ou SVG com fundo transparente, para trocar o desenho. Vazio, fica o desenho da NexTags.
3. **Tamanho**: de 44 a 96 px.
4. **Lado da tela**: **Esquerda** ou **Direita**.
5. **Animação**: **Flutuar**, **Pulsar** (só na bolha e na pílula) ou **Nenhuma**.

Mais embaixo ficam **A pessoa pode arrastar o botão** (ele gruda na lateral mais perto), **Espiar da borda** (meio escondido, aparece inteiro com o mouse em cima) e **Posição exata**, para subir o botão se ele cobrir algo do site, como o aviso de cookies.

### Passo 3: Monte a tela inicial

Abra **Tela inicial**. É o que a pessoa vê ao abrir o chat, antes da conversa.

![A seção Tela inicial aberta, com a saudação, o texto e os atalhos, e a prévia com o chat aberto na tela inicial.](https://help.nextags.com.br/_img/canais-webchat/secao-tela-inicial.webp)
*A seção Tela inicial, com a prévia.*

1. **Mostrar a tela inicial**: desligada, o chat abre direto na conversa.
2. **Saudação**: o título, com até 40 caracteres.
3. **Texto**: a frase embaixo da saudação, com até 90 caracteres.
4. **Atalhos**: até 4 botões que começam um fluxo ou abrem um link. Veja [Iniciadores de conversa e menu do webchat](https://help.nextags.com.br/tutoriais/canais/iniciadores-e-menu-do-webchat/).
5. A prévia, com a tela inicial aberta.

O botão **{nome}** põe o nome da pessoa na saudação ou no texto, se o seu site informar o nome (por exemplo, um cliente logado). Se não informar, ele some sozinho.

### Passo 4: Escolha as cores

Abra **Cores e tema**. Elas valem para o botão e a janela.

![A seção Cores e tema aberta: Tema da janela, Combinações prontas, Cor principal, Segunda cor, Cantos da janela e Fonte.](https://help.nextags.com.br/_img/canais-webchat/secao-cores.webp)
*A seção Cores e tema.*

1. **Tema da janela**: **Claro**, **Escuro** ou **Automático** (segue o tema do aparelho de quem visita).
2. **Combinações prontas**: pares de cores para começar.
3. **Cor principal** e **Segunda cor**: com **Fazer degradê** marcado, as duas viram um degradê.
4. **Cantos da janela**: o arredondado, de 0 a 32 px.
5. **Fonte**: **Do aparelho** (carrega mais rápido) ou **Inter** (a fonte da NexTags).

Se a cor principal for clara demais, o construtor avisa que o branco por cima dela fica difícil de ler.

### Passo 5: Ajuste a conversa

Abra **Dentro do chat**. Estas cores valem dentro da conversa e só chegam ao chat quando você clica em **Aplicar no webchat**.

![A seção Dentro do chat aberta: Cores prontas, as cores do fundo e dos balões, os cantos dos balões e os botões de anexo e de áudio.](https://help.nextags.com.br/_img/canais-webchat/secao-dentro-do-chat.webp)
*A seção Dentro do chat.*

1. **Cores prontas**: **Conversa clara** ou **Conversa escura**.
2. **Fundo da conversa**.
3. **Balão do robô** e **Texto do robô**.
4. **Balão do visitante** (com **Igual à cor principal** marcado, usa a cor principal) e **Texto do visitante**.
5. **Cantos dos balões**: de 0 a 28 px.
6. **Botão de anexo (clipe)**: deixa a pessoa mandar fotos e arquivos.
7. **Botão de áudio (microfone)**: deixa a pessoa gravar áudio.

Embaixo, **Texto do rodapé (opcional)** põe uma linha pequena embaixo do campo de mensagem, como o seu horário de atendimento. Se o texto ficar difícil de ler, o construtor avisa "Pouco contraste".

### Passo 6: Confira na prévia

Use os controles da **Prévia ao vivo** para ver o webchat em cada situação. Na prévia, nada cria contato nem envia mensagem.

![A Prévia ao vivo com os controles Chat, Tela, Aparelho e Site, o botão de recomeçar e o Testar de verdade, mostrando o chat aberto num celular.](https://help.nextags.com.br/_img/canais-webchat/previa.webp)
*A Prévia ao vivo, no celular.*

1. **Chat**: **Fechado** (só o botão e o balão), **Janela** ou **Lateral**. No celular, **Aberto**.
2. **Tela**: **Inicial** ou **Conversa**.
3. **Aparelho**: **Computador** ou **Celular**. No celular, o chat abre sempre em tela cheia.
4. **Site**: um site **Claro** ou **Escuro**, para ver o contraste.
5. Recomeçar a prévia.
6. **Testar de verdade** (próximo passo).

A conversa da prévia é um exemplo pronto. As mensagens do seu fluxo aparecem só no teste de verdade.

### Passo 7: Teste de verdade

Clique em **Testar de verdade**. Na primeira vez, a janela pede **Autorizar e testar** (3): a página de teste, `ui.nextags.com.br`, entra nos sites autorizados deste webchat. Depois disso, o teste abre direto, em outra aba.

![A janela Testar de verdade: avisa que é o chat de verdade e que a página de teste ui.nextags.com.br entra nos sites autorizados, com o botão Autorizar e testar.](https://help.nextags.com.br/_img/canais-webchat/testar-de-verdade.webp)
*A janela Testar de verdade.*

1. É o chat de verdade: as mensagens chegam na sua conta e criam um contato.
2. A página de teste precisa estar nos sites autorizados do webchat.
3. **Autorizar e testar**: autoriza a página e abre o teste em outra aba.

Mudou alguma coisa no construtor? Clique em **Testar de verdade** de novo: a página de teste não se atualiza sozinha.

### Passo 8: Aplique no webchat

No alto do construtor, clique em **Aplicar no webchat**. O aviso (1) muda para **Aplicado ✓**.

![O topo do construtor depois de Aplicar no webchat: o aviso Aplicado e o botão Aplicar no webchat apagado.](https://help.nextags.com.br/_img/canais-webchat/aplicado.webp)
*O alto do construtor depois de aplicar.*

1. **Aplicado ✓**: a conversa já usa o visual novo. O botão **Aplicar no webchat** fica apagado até a próxima mudança.

### Passo 9: Atualize o código do site

O código do site leva as opções de **Botão**, **Balão de boas-vindas**, **Abertura**, **Cabeçalho**, **Tela inicial** e **Cores e tema**. Se você mudou alguma delas, abra **Instalar** (1), clique em **Copiar código** (2) e troque, no site, o código antigo pelo novo.

![Construtor do webchat na aba Instalar: o passo 1, Cole o código no seu site, com o código do Webchat NexTags e o botão Copiar código.](https://help.nextags.com.br/_img/canais-webchat/instalar-codigo.webp)
*O código do site na aba Instalar.*

1. **Instalar**.
2. **Copiar código**.
3. O código, já com as suas opções.
4. O aviso do webchat antigo.

### Passo 10: Escolha a mensagem de boas-vindas

Embaixo do construtor, em **Configurações do webchat**, escolha um fluxo em **Mensagem de boas-vindas** (1). Ele é enviado quando a pessoa abre o chat. Clique em **Salvar**, no alto da página.

![Configurações do webchat: o campo Nome e a Mensagem de boas-vindas, com o fluxo Boas-vindas escolhido.](https://help.nextags.com.br/_img/canais-webchat/boas-vindas-webchat.webp)
*A Mensagem de boas-vindas do webchat.*

1. **Mensagem de boas-vindas**: o fluxo da primeira mensagem. **Nenhum** deixa o webchat sem boas-vindas.

## As outras seções

| Seção | O que tem |
|---|---|
| **Conta e webchat** | **ID da conta** e **ID do webchat**, já preenchidos pelo app. |
| **Balão de boas-vindas** | Um texto curto ao lado do botão (não é o fluxo de boas-vindas): **Mostrar o balão**, **Mensagem** (até 140 caracteres), **Aparece depois de** e **Some sozinho depois de** (0 = fica até a pessoa fechar). |
| **Abertura** | **Como o chat abre**: **Janela flutuante** (por cima do site, no canto) ou **Painel lateral** (na altura toda, empurrando o site). Também **Abre do lado**, **A pessoa pode trocar entre janela e lateral**, **Empurrar o site na lateral**, **Largura do painel lateral** e **Abrir sozinho depois de** (0 = só abre quando a pessoa clicar; abre uma vez por visita). |
| **Cabeçalho** | **Título** (até 40 caracteres; vazio, fica "Atendimento"), **Subtítulo (opcional)**, **Foto ou logo (opcional)** e **Bolinha verde de “online”**. |
| **Mostrar “Atendimento com NexTags”** | Um selo pequeno no pé da tela inicial. |

## O rascunho, o código e o padrão

- O construtor guarda o rascunho só neste navegador. Em outro computador, ele começa do padrão: clique em **Importar código** e cole o código que está no seu site para continuar de onde parou.
- **Importar código** também aceita o código do webchat antigo (com `ktt10.setup`) e aproveita o que der, como a cor, o título e o balão.
- **Voltar ao padrão** desfaz as suas escolhas; a conta e o webchat continuam. Clicou sem querer? Use **Desfazer**, no aviso.

## Pronto: como conferir

- O alto do construtor mostra **Aplicado ✓**.
- Na página de teste (**Testar de verdade**), o webchat aparece com o seu botão, a sua tela inicial e as suas cores.
- No seu site, depois de trocar o código, o botão novo aparece (atualize a página).

## Se não funcionou

### Mudei o botão e nada mudou no site

O botão, a janela e a tela inicial ficam no código do site. Copie o código de novo em **Instalar** e troque no site.

### O aviso continua "Há mudanças não aplicadas"

Clique em **Aplicar no webchat**. Se aparecer "O app não respondeu: use “Ver o CSS” e cole à mão", recarregue a página e tente de novo. Se ainda não der, abra **Ver o CSS (para copiar à mão)**, em **Instalar**, copie e cole no campo **Personalize o webchat com CSS**, em **Mais Opções**, embaixo do construtor. Depois clique em **Salvar**.

### Apareceu "O CSS passou de 7.000 caracteres"

O campo de CSS do webchat aceita até 7.000 caracteres. Fale com o suporte da NexTags antes de colar. Veja [Como falar com o suporte](https://help.nextags.com.br/comecar/falar-com-o-suporte/).

### Abri o construtor em outro computador e as mudanças sumiram

O rascunho fica no navegador onde você mexeu. Clique em **Importar código** e cole o código do seu site.

### A página de teste mostra um aviso de permissão

A página de teste (`ui.nextags.com.br`) não está nos sites autorizados. Clique em **Testar de verdade** e em **Autorizar e testar**. Veja [Sites autorizados e o erro de permissão do webchat](https://help.nextags.com.br/tutoriais/canais/sites-autorizados/).

### Faça com a IA

Cole este pedido no ChatGPT ou no Claude:

```text
Quero deixar o webchat da NexTags com a cara da minha empresa. Leia este tutorial: https://help.nextags.com.br/tutoriais/canais/personalizar-webchat.md

Minha empresa é [ramo, público e tom de voz] e as cores da marca são [cores em #RRGGBB]. Sugira: o estilo do botão, a mensagem do balão de boas-vindas (até 140 caracteres), a saudação (até 40) e o texto da tela inicial (até 90), 3 atalhos com textos de até 40 caracteres e as cores de Dentro do chat com bom contraste.
```