# Colocar o webchat no seu site

> Crie o webchat, aplique o visual da conversa, copie o código do construtor, cole no seu site e autorize o endereço. O botão aparece no canto do site.

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

Atualizado em: 24/10/2026

> **Resposta rápida**
>
> Em **Configurações** › **Canais** › **Web Chatbot**, clique em **Configurações** e abra o webchat. No construtor, abra **Instalar**, clique em **Aplicar no webchat** e em **Copiar código**. Cole o código no seu site, antes de `</body>`, e ponha o endereço do site em **Authorized websites**.

**Antes de começar**

- Acesso ao código do seu site ou ao campo de código personalizado do construtor de sites que você usa.
- Um fluxo publicado, se quiser uma mensagem de boas-vindas. Veja [Criar um fluxo](https://help.nextags.com.br/tutoriais/fluxos/criar-fluxo/).

## Passo a passo

### Passo 1: Abra os webchats

No pé do menu, clique em **Configurações** e abra a aba **Canais** (1). Clique em **Web Chatbot** (2) e depois em **Configurações** (3).

![Configurações, aba Canais, com o cartão Web Chatbot aberto e o botão Configurações, que leva à lista de webchats.](https://help.nextags.com.br/_img/canais-webchat/canais-web-chatbot.webp)
*A aba Canais com o cartão **Web Chatbot** aberto.*

1. **Canais**: a aba com os canais da conta.
2. **Web Chatbot**: o cartão do chat do site.
3. **Configurações**: abre a lista dos seus webchats.

### Passo 2: Crie o webchat

Na lista **Webchats**, clique em **Adicionar** (1). Se o webchat já existe, clique no nome dele (2) e pule para o passo 4.

![A lista Webchats, com o botão Adicionar, o nome de cada webchat, a chave Ativo e o menu de três pontos.](https://help.nextags.com.br/_img/canais-webchat/lista-webchats.webp)
*A lista Webchats.*

1. **Adicionar**: cria um webchat.
2. O nome do webchat: abre a página dele.
3. **Ativo**: liga e desliga o webchat.
4. Os três pontos: mais opções do webchat (veja abaixo).

### Passo 3: Dê um nome

Escreva um nome que ajude a equipe a reconhecer o webchat, como "Site da loja" (1), e clique em **Continuar** (2). A página do webchat novo abre sozinha.

![A janela Adicionar Novo, com o nome do webchat escrito e o botão Continuar.](https://help.nextags.com.br/_img/canais-webchat/adicionar-webchat.webp)
*A janela Adicionar Novo.*

1. O nome do webchat.
2. **Continuar**: cria o webchat e abre a página dele.

### Passo 4: Aplique o visual da conversa

A página do webchat abre com o **Construtor do webchat** no alto. Clique na aba **Instalar** e, em **Aplique o visual da conversa**, clique em **Aplicar no webchat** (1). O aviso ao lado (2) muda de **Há mudanças não aplicadas** para **Aplicado ✓**.

![Construtor do webchat na aba Instalar: o passo 2, Aplique o visual da conversa, com o botão Aplicar no webchat e o aviso Há mudanças não aplicadas.](https://help.nextags.com.br/_img/canais-webchat/instalar-aplicar.webp)
*O passo 2 da aba Instalar.*

1. **Aplicar no webchat**: grava neste webchat as cores e os textos de dentro da conversa.
2. O estado: **Há mudanças não aplicadas** até você aplicar.

Quer mudar o botão, as cores ou a tela inicial antes? Veja [Personalizar o webchat no construtor](https://help.nextags.com.br/tutoriais/canais/personalizar-webchat/).

### Passo 5: Copie o código

Ainda em **Instalar** (1), no passo **Cole o código no seu site**, clique em **Copiar código** (2). O botão mostra **Copiado!**.

![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 passo 1 da aba Instalar, com o código do site.*

1. **Instalar**: a aba com os passos para pôr o webchat no ar.
2. **Copiar código**: copia o código inteiro.
3. O código do seu webchat, já com o ID da sua conta e o do webchat.
4. O aviso do webchat antigo: se o site ainda tem o código antigo (o que tem `ktt10.setup`), tire, senão aparecem dois botões.

### Passo 6: Cole o código no seu site

No seu site, cole o código antes de `</body>`, em todas as páginas em que o webchat deve aparecer. Se o site é feito num construtor de sites, use o campo de código personalizado do rodapé. Depois, publique o site.

### Passo 7: Autorize o endereço do site

Volte à página do webchat e desça até **Authorized websites** (os sites autorizados). Clique em **Adicionar Novo** (2) e escreva o endereço do site sem `https://`, como `seusite.com.br` (1). Adicione também o endereço com `www`, como `www.seusite.com.br`. Por fim, clique em **Salvar** (3).

![O cartão Authorized websites, com os endereços seusite.com.br e www.seusite.com.br, o botão Adicionar Novo e o Salvar no alto da página.](https://help.nextags.com.br/_img/canais-webchat/sites-autorizados.webp)
*O cartão Authorized websites e o Salvar.*

1. O endereço do site, sem `https://` e sem a página depois da barra.
2. **Adicionar Novo**: abre mais um campo.
3. **Salvar**: grava o webchat e volta para a lista.

Sem o endereço na lista, a conversa não abre e aparece um aviso de permissão. Veja [Sites autorizados e o erro de permissão do webchat](https://help.nextags.com.br/tutoriais/canais/sites-autorizados/).

## As opções da lista

Os três pontos de cada webchat, na lista **Webchats**, abrem estas opções:

![O menu de três pontos de um webchat: Obter código, Obter Link, Duplicar, Renomear, Copiar para outra conta e Excluir.](https://help.nextags.com.br/_img/canais-webchat/menu-webchat.webp)
*O menu de três pontos de um webchat.*

- **Obter código**: copia o código do webchat padrão da plataforma. O código do Webchat NexTags, com o botão e a janela do construtor, é o do **Copiar código**, na aba **Instalar**.
- **Obter Link**: copia o endereço de uma página só com o chat.
- **Duplicar** e **Renomear**.
- **Copiar para outra conta**: aparece quando o seu login tem mais de uma conta.
- **Excluir**.

## Pronto: como conferir

- Abra o seu site e atualize a página: o botão do webchat aparece no canto da tela.
- Clique no botão e escreva uma mensagem: a conversa chega na **Caixa de Entrada**, no canal Webchat.
- Para testar antes de mexer no site, use **Testar de verdade**, no construtor. Veja [Personalizar o webchat no construtor](https://help.nextags.com.br/tutoriais/canais/personalizar-webchat/).

## Se não funcionou

### O botão não aparece no site

- Confira se o código foi colado inteiro, do primeiro `<script>` ao último `</script>`, antes de `</body>`.
- Confira se a página com o código foi publicada e atualize o navegador.
- Num construtor de sites, use o campo de código personalizado do rodapé, que vale para todas as páginas.

### Aparecem dois botões de chat

O site ainda tem o código do webchat antigo. Tire o código que tem `ktt10.setup` e deixe só o do Webchat NexTags.

### A conversa abre com um aviso de permissão

O aviso é "Você não tem permissão suficiente para realizar operações neste recurso." (ou, em inglês, "You don't have enough permission to perform operations on this resource."). O endereço do site não está em **Authorized websites**. Veja [Sites autorizados e o erro de permissão do webchat](https://help.nextags.com.br/tutoriais/canais/sites-autorizados/).

### A conversa não ficou com as suas cores

Abra **Instalar**, clique em **Aplicar no webchat** e confira se o aviso mostra **Aplicado ✓**.

### Faça com a IA

Cole este pedido no ChatGPT ou no Claude:

```text
Quero colocar o webchat da NexTags no meu site, que é feito em [WordPress / Wix / Shopify / Nuvemshop / outro]. Leia este tutorial: https://help.nextags.com.br/tutoriais/canais/webchat-no-site.md

Me explique, passo a passo e com os nomes dos menus da minha plataforma, onde colar o código do webchat antes de </body> em todas as páginas. Depois, liste os endereços que eu devo autorizar no webchat, com e sem www, sem https://.
```