Personalizar o webchat no construtor

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.

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.

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.

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.
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.

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.

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.

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.

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 ✓.

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.

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.

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