> For the complete documentation index, see [llms.txt](https://ajuda.norux.chat/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ajuda.norux.chat/admin/configuracao-e-administracao/webchat.md).

# Webchat

## Webchat

O **Webchat** é um canal que coloca uma janela de atendimento no seu site (ou no site dos seus clientes). O visitante clica no botãozinho no canto da tela e conversa com o seu time direto pelo site, **sem depender do WhatsApp** — e todas as mensagens chegam normalmente na fila de atendimento do Norux.

{% hint style="success" %}
**Ficou muito mais simples.** Nas versões mais recentes do Norux, criar o Webchat é feito em poucos cliques pela interface. **Não é mais preciso** criar subdomínio, editar o arquivo `.env`, rodar autoinstalador ou fazer rebuild no terminal — todo o serviço de back-end é provisionado automaticamente quando você clica em **Conectar**.
{% endhint %}

{% hint style="info" %}
**Pré-requisitos:**

* Acesso de **administrador** ao painel do Norux.
* Acesso de **edição** ao site onde o widget será instalado (qualquer site da internet serve: WordPress, HTML puro, construtores como Elementor etc.).
  {% endhint %}

***

#### Tutorial em vídeo:

#### Como funciona

Você cria o canal, dá um nome e clica em **Conectar**. O próprio back-end do Norux cuida de todo o resto (serviço de socket, domínio e certificado) automaticamente. Em seguida você **gera o widget** — um código JavaScript — e cola no seu site. Pronto: o botão de chat passa a aparecer e as mensagens dos visitantes caem direto no atendimento.

***

#### Etapa 1: Criar o canal de Webchat

1. No menu, acesse **Administração > Canais**.
2. Na aba de canais, clique em **Adicionar Canal**.
3. Na lista, selecione a opção **Webchat**.
4. Dê um **nome** ao canal (ex: "Webchat") e confirme.

O canal é criado e aparece no painel **desconectado**.

#### Etapa 2: Conectar (provisionamento automático)

1. No card do canal recém-criado, clique no botão **Conectar**.
2. Aguarde — o back-end provisiona o serviço automaticamente.

{% hint style="info" %}
**Antes era manual, agora não.** Na versão antiga, o Webchat dependia de um serviço de back-end que exigia subdomínio, variáveis no `.env` e rebuild pelo terminal. Hoje basta **criar o canal, dar o nome e clicar em Conectar** — o resto é automático.
{% endhint %}

#### Etapa 3: Gerar o widget

1. Com o canal conectado, clique nos **três pontinhos** no card do canal.
2. Selecione **Gerar Widget**.
3. O sistema pergunta se você quer **habilitar botões** no menu do Webchat:
   * **Com botões:** ao programar um chatbot, as opções em formato de botão serão renderizadas como botões clicáveis dentro do Webchat.
   * **Sem botões:** o menu aparece apenas como texto.
4. Clique em **Gerar Widget**. O sistema faz o **download** e exibe o **código JavaScript** para você copiar.

{% hint style="info" %}
**Teste antes de instalar.** Use o botão **Testar** na própria tela de geração: ele abre uma prévia com o Webchat funcionando. Envie uma mensagem de teste e confira se ela chega na fila de **Pendentes** do atendimento.
{% endhint %}

#### Etapa 4: Instalar o código no seu site

O widget é um **código JavaScript** e, por padrão, ele vem **sem as tags `<script>`**. Antes de colar em qualquer bloco de HTML, **abra e feche a tag `<script>`** em volta do código:

```html
<script>
// ...cole aqui o código do widget gerado pelo Norux...
</script>
```

Onde colar depende do seu objetivo:

**Em uma página específica (ex: Elementor)**

1. Edite a página onde quer o chat.
2. Adicione um bloco de **HTML** (a maioria dos construtores tem um bloco assim).
3. Cole o código **já dentro das tags `<script>...</script>`**.
4. Salve. O botão do chat aparecerá **somente nessa página**.

**Em todo o site (plugin de Header/Footer)**

Para o chat aparecer em **todas as páginas**, use um plugin que injete código no rodapé do site — por exemplo o **WPCode** (antigo "Insert Headers and Footers", um dos mais populares).

1. Em **Plugins > Adicionar novo**, procure por "header footer" (ou "WPCode") e instale/ative.
2. Crie um **snippet do tipo JavaScript** (ex: em WPCode, *Code Snippets > Add Snippet > Custom Snippet > JavaScript Snippet*).
3. Cole o código do widget dentro do `<script>` e ative o snippet.
4. Em local de inserção, escolha **Auto Insert** no **Footer** (rodapé), para todo o site.
5. Salve. O chat passa a aparecer em todas as páginas (home, produtos etc.).

{% hint style="warning" %}
**Não confunda os campos do plugin.** Vários plugins de Header/Footer **não aceitam tag `<script>` solta** no campo genérico de footer — o código simplesmente não salva ou não roda. Nesse caso, crie um **snippet do tipo JavaScript** (como acima): esse tipo já trata o código como script corretamente.
{% endhint %}

***

#### Resumo das Funcionalidades

| Funcionalidade           | Onde acessar                                           |
| ------------------------ | ------------------------------------------------------ |
| Criar canal de Webchat   | **Administração > Canais > Adicionar Canal > Webchat** |
| Conectar (automático)    | Botão **Conectar** no card do canal                    |
| Gerar o código do widget | **três pontinhos** no card do canal **> Gerar Widget** |
| Habilitar botões do menu | Opção exibida ao **Gerar Widget**                      |
| Testar antes de instalar | Botão **Testar** na tela de geração                    |

***

Com o canal conectado e o widget instalado, seu site passa a ter um canal de atendimento próprio, independente do WhatsApp, com as mensagens caindo direto na fila do Norux. Todo o provisionamento de back-end é automático — você só cuida de gerar o widget e colar no site.

***

#### Possíveis Erros e Soluções

**A mensagem não envia / fica girando o ícone de "reloginho" (erro de CORS)**

**Sintoma:** ao enviar uma mensagem pelo Webchat, ela não vai — o ícone de carregamento (reloginho) fica girando e a informação não trafega. Ao inspecionar o **console do navegador (F12)**, aparece um erro de **CORS policy** relacionado ao cabeçalho `Access-Control-Allow-Origin`. **Causa:** o back-end está bloqueando as requisições vindas do domínio do site onde o widget foi instalado. **Solução:** adicione a flag abaixo no arquivo `.env` do back-end e reinicie o Norux:

```bash
SECURE_URL=*
```

{% hint style="info" %}
**`SECURE_URL=*`** libera as origens das requisições do Webchat. É o ajuste padrão quando o console acusa bloqueio de CORS no `Access-Control-Allow-Origin`. Após salvar o `.env`, reinicie o Norux para aplicar.
{% endhint %}

**O código colado não funciona / aparece como texto na página**

**Causa:** o widget é JavaScript e vem **sem** as tags `<script>`. Colado num bloco de HTML sem essas tags, o navegador trata o conteúdo como texto e ignora. **Solução:** envolva o código com `<script> ... </script>` antes de colar. Em plugins de Header/Footer, prefira criar um **snippet do tipo JavaScript**.

**O snippet não salva no plugin de Footer**

**Causa:** alguns plugins bloqueiam tag `<script>` no campo genérico de footer. **Solução:** crie um **snippet do tipo JavaScript** (em vez de HTML/Footer) e use **Auto Insert** no rodapé.

**O botão do chat não aparece**

**Causa:** o canal pode não estar conectado, ou o código não está sendo carregado na página. **Solução:** confirme que o canal está **conectado** no painel; use o botão **Testar** para validar o widget; verifique se o snippet/bloco está ativo e na página correta.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://ajuda.norux.chat/admin/configuracao-e-administracao/webchat.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.