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

# Instalar o widget no seu site

> Como adicionar o agente do ChatNorris ao seu site com um snippet de código.

# Instalar o widget no seu site

O widget do ChatNorris é um botão flutuante que aparece no seu site e permite que seus visitantes conversem com o bot diretamente, sem sair da página.

![TODO: captura do widget flutuante funcionando em um site de exemplo](https://mintcdn.com/chatnorris/_RNPg7jBCB9AE-Bf/images/PLACEHOLDER-widget-preview.png?fit=max\&auto=format\&n=_RNPg7jBCB9AE-Bf\&q=85\&s=8498d482f969b21b6d3a93983b82a0b2)

## Obter o código de instalação

**1. Acesse os detalhes do agente**

No menu lateral, clique em **Agentes** e depois no agente que você quer instalar.

**2. Confirme que o agente está publicado**

O widget só funciona com agentes no status **Publicado**. Se ele estiver em Rascunho, clique em **Publicar** primeiro.

**3. Copie o snippet de instalação**

Em `Agentes → [seu agente] → Publicar`, copie o código na barra de resumo ou entre em **Web** para ver a página de instalação completa (instalação e encerramento por inatividade; o idioma é alterado em [Personalizar](https://docs.chatnorris.ai/pt/guias/widget-personalizacion.md)).

![TODO: captura do snippet de instalação com o botão de copiar](https://mintcdn.com/chatnorris/_RNPg7jBCB9AE-Bf/images/PLACEHOLDER-snippet-instalacion.png?fit=max\&auto=format\&n=_RNPg7jBCB9AE-Bf\&q=85\&s=ad31642a14220afa4950ba8a7da3ba93)

## Colar o código no seu site

O snippet são duas tags `<script>` que você deve colar no HTML do seu site, **antes do fechamento da tag `</body>`**. A primeira indica qual agente carregar e a segunda carrega o widget:

```html theme={null}
<!-- No final do seu HTML, antes de </body> -->
<script>
  window.chatnorrisConfig = { chatbotId: "seu-chatbot-id" };
</script>
<script src="https://app.chatnorris.ai/widget.js" async></script>
</body>
```

Copie sempre o snippet em **Publicar** do agente: ele já vem com o ID do seu agente.

> [tab] HTML estático
>
> Abra o arquivo HTML do seu site e cole o snippet antes de `</body>`.

> [tab] WordPress
>
> 1. Instale o plugin **Insert Headers and Footers** (ou similar).
> 2. Vá em **Configurações → Insert Headers and Footers**.
> 3. Cole o snippet na seção **Scripts no rodapé**.
> 4. Salve as alterações.

> [tab] Webflow
>
> 1. Vá em **Configurações do projeto → Código personalizado**.
> 2. Cole o snippet no campo **Footer Code**.
> 3. Publique o site.

> [tab] Shopify
>
> 1. Vá em **Loja virtual → Temas → Editar código**.
> 2. Abra o arquivo `theme.liquid`.
> 3. Cole o snippet antes de `</body>`.
> 4. Salve as alterações.

> [tab] Wix
>
> 1. No editor do Wix, clique em **Configurações** → **Código personalizado**.
>
> 2. Clique em **+ Adicionar código personalizado** (na aba **Head** ou **Body**).
>
> 3. Cole o snippet e selecione que ele seja carregado em **Body — final**.
>
> 4. Escolha se ele se aplica a **Todas as páginas** ou a páginas específicas.
>
> 5. Salve e publique o site.
>
> > [!NOTE]
> >
> > A opção de código personalizado exige o plano Wix Business ou superior.

> [tab] Squarespace
>
> 1. No painel do Squarespace, vá em **Configurações** → **Avançado** → **Injeção de código**.
>
> 2. Cole o snippet no campo **Footer**.
>
> 3. Salve as alterações.
>
> > [!NOTE]
> >
> > A injeção de código está disponível nos planos Business e Commerce do Squarespace.

> [tab] Google Tag Manager
>
> 1. No GTM, crie uma nova **tag** do tipo **HTML personalizado**.
> 2. Cole o snippet no campo de HTML.
> 3. Como **Acionador (Trigger)**, selecione **All Pages** (Todas as páginas).
> 4. Salve a tag e **publique** o contêiner do GTM.

## Configurar a captura de leads (Lead Form)

O lead form não é configurado na instalação do widget: 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.

Quando está ativo, o widget mostra um formulário com os campos que você definir antes que o visitante possa escrever (ou durante a conversa, de acordo com o critério escolhido). Os dados ficam registrados automaticamente na seção **Leads**.

Veja o guia completo em [Ações do agente → Lead Form](https://docs.chatnorris.ai/pt/guias/acciones.md#lead-form).

> [!NOTE]
>
> O lead form é opcional. Se ele estiver desativado, o visitante pode conversar sem informar seus dados.

## Perguntas frequentes

> [accordion] O widget funciona no celular?
>
> Sim, o widget foi projetado para funcionar em dispositivos móveis e desktop.

> [accordion] Posso instalar o widget em mais de um site?
>
> Sim. O mesmo snippet pode ser usado em vários sites. O agente vai responder da mesma forma em todos.

> [accordion] O widget afeta a velocidade do meu site?
>
> O script é carregado de forma assíncrona e não bloqueia o carregamento da sua página.

> [accordion] Posso personalizar a aparência do widget?
>
> Sim. Em `Agentes → [seu agente] → Personalizar` você ajusta cores, logo, avatar, posição, textos e comportamento do widget, sem reinstalar o código. Veja [Personalizar o widget](https://docs.chatnorris.ai/pt/guias/widget-personalizacion.md).


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.