> ## Documentation Index
> Fetch the complete documentation index at: https://docs.lovi.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Configuração do Widget Web

> Nesta seção, você aprenderá como integrar e personalizar o widget web da Lovi para combinar perfeitamente com o design e a funcionalidade do seu site

<img src="https://mintcdn.com/lovi/O5wVbHgTE_jPQc6B/images/WidgetsList.png?fit=max&auto=format&n=O5wVbHgTE_jPQc6B&q=85&s=6975ebc2214376c1e59e012e4bf9a0ef" alt="Web Widget List" width="1682" height="479" data-path="images/WidgetsList.png" />

Esta é a ponte entre seu Agente inteligente e os visitantes do seu site.

O **Widget Web** é aquela bolhinha simpática no canto da tela que diz "Olá!". Integrá-lo é muito fácil: basta adicionar um trecho de código ao seu site, e pronto! Seu Agente de IA está pronto para conversar 24/7 sem você mexer um dedo.

### 🎛️ Visão Geral dos Seus Widgets

Este é seu centro de comando de widgets. Aqui você pode ver cada bolha de chat que criou.

* **Por que ter mais de um?** Você pode querer um "Bot de Vendas" para sua página de preços e um bot de "Suporte Técnico" para seu centro de ajuda. Aqui você gerencia todos eles.
* **Ações Principais por Widget:**
  * **📋 Copiar Script:** Pegue o código mágico para colar no seu site.
  * **⚙️ Configurar:** A parte divertida. Ajuste cores, mensagens e comportamento (vamos chegar lá já já).
  * **🗑️ Excluir:** Remova se não precisar mais.

***

### 🎨 Personalizando Seu Widget (A Aula de Arte)

Clique no **ícone de engrenagem ⚙️** para entrar no laboratório de configuração. Vamos tornar este widget realmente seu.

#### 1. O Básico

* **Agente de IA:** Qual cérebro está alimentando este chat? Selecione um dos seus agentes da lista.
* **Idiomas:** Seu site fala Português, Inglês e Espanhol? Diga ao widget para que ele não pareça estranho.

#### 2. Mensagem Flutuante (O Gancho 🪝)

Não deixe seu bot se esconder! Defina uma mensagem chamativa que aparece acima do ícone.

* *Entediante:* "Converse aqui."
* *Melhor:* "Oi! Precisa de ajuda com seu pedido? 👋"

> **⚠️ Atenção:** Adicione traduções para todos os seus idiomas. Você não quer que visitantes em inglês vejam uma bolha vazia!

#### 3. Aparência (Vista-se para Impressionar)

* **Cabeçalho:** Escolha o que aparece no topo. Apenas um título? Seu logo? Um avatar de um robô usando monóculo? Você decide.
* **Cores:** Use a ferramenta de conta-gotas 🖊️ para combinar com sua marca **exatamente**.
  * *Cor Principal:* As bolhas de mensagem e o botão de enviar.
  * *Cor do Texto:* Certifique-se de que é legível! Texto amarelo em fundo branco é um crime contra a visão.

#### 4. O Porteiro: Formulários de Coleta de Dados 📝

Quer saber com quem está falando *antes* de começarem a conversar? Habilite o **Formulário**.

* Peça **Nome, Email ou Telefone**.
* Torne campos "Obrigatórios" se for rigoroso, ou "Opcionais" se for flexível.
* **LGPD / Privacidade:** Adicione um link para sua política para ficar em conformidade. 👮‍♂️

#### 5. Coleta de Dados Inteligente (Avançado 🤓)

Isso é para os magos da tecnologia. O widget pode espiar os dados do seu site (`localStorage`) para ver se o usuário já está logado.

* **Como ajuda:** Se estiver logado, o widget pode dizer *"Olá, João!"* em vez de pedir o nome novamente.
* **Configuração:** Você nos diz a "Chave" (ex.: `user_email`) e nós pegamos o valor automaticamente.

***

### 🛠️ Ajustes Extras e Layout

Refine a experiência:

* **Posição:** Esquerda ou Direita? (Direita é padrão, Esquerda é para rebeldes).
* **Tela Cheia:** Quer que o chat ocupe toda a tela do celular? Ative esta opção.
* **Incorporar (Elemento DOM):** Em vez de uma bolha flutuante, fixe o chat permanentemente dentro de um `<div>` na sua página. Ótimo para páginas "Fale Conosco".
* **CSS Personalizado:** Se você sabe programar, pode escrever seus próprios estilos aqui para sobrescrever os nossos. O céu é o limite.

***

### 🎨 CSS Personalizado — O Guia do Designer

As cores e opções predefinidas estão te limitando? O campo **CSS Personalizado** te dá controle total sobre a aparência do widget. Aqui você pode escrever regras CSS que ajustam estilos, sobrescrevem classes padrão ou até adicionam animações.

**Onde encontrá-lo:** Abra a configuração do widget (ícone ⚙️), expanda a seção **"CSS Personalizado"** e digite seu código na área de texto.

#### ⚙️ Como funciona por dentro

O que você escreve aqui não é mágica — é bem previsível depois que você entende:

1. Seu CSS é salvo junto com a configuração do widget.
2. Quando o widget carrega no site do visitante, seu CSS é injetado como uma tag `<style>` **dentro do próprio widget**.
3. Ele carrega **depois** dos nossos estilos padrão, então suas regras têm a palavra final (vencem em caso de empate).

> **🎯 Importante — Alcance:** O CSS Personalizado **afeta apenas o interior do chat do widget**, não o resto da sua página web. Você não pode usá-lo para reestilizar seu site; apenas o widget. E vice-versa: os estilos do seu site não vazam para dentro do widget, então você começa com uma tela limpa.

> **💪 Minha regra não está aplicando?** Como nossos estilos base são específicos, às vezes sua regra "empata" e não vence. Se uma mudança não tiver efeito, adicione `!important` ao final da propriedade (ex. `border-radius: 0 !important;`) ou use um seletor mais específico.

#### 🧩 Seletores que você pode usar

Estas são as "etiquetas" reais das partes do widget. Mire nelas com seu CSS:

| Seletor                                             | O que é                                                                   |
| --------------------------------------------------- | ------------------------------------------------------------------------- |
| `.widget_chat`                                      | O contêiner raiz de todo o widget                                         |
| `.widget_chat_window`                               | A janela do chat quando está aberta                                       |
| `.widget_chat_window_header`                        | O cabeçalho superior (avatar, título, botões)                             |
| `.widget_chat_window_body`                          | A área onde os mensagens aparecem                                         |
| `.widget_row_message`                               | Cada linha de mensagem (use `.widget_row_message_end` para as do usuário) |
| `.widget_message_bot`                               | As bolhas de mensagem do Agente                                           |
| `.widget_message_content`                           | O texto dentro de cada bolha                                              |
| `.widget_message_botones` / `.widget_message_boton` | Os botões de resposta rápida                                              |
| `.widget_chat_window_footer`                        | A barra inferior onde se escreve                                          |
| `#inputMessage`                                     | O campo de texto para escrever a mensagem                                 |
| `.widget_form_submit`                               | O botão de enviar                                                         |
| `.widget_chat_formulario`                           | O formulário de coleta de dados (nome, email, etc.)                       |
| `.widget_chat_formulario_body_input_asterisk`       | O asterisco vermelho dos campos obrigatórios                              |
| `.widget_chat_window_footer_legends`                | A assinatura "Generated by lovi.ai" do rodapé                             |

#### 💡 Exemplos práticos

**Bolhas do bot mais quadradas com sombra:**

```css theme={null}
.widget_message_bot {
  border-radius: 6px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}
```

**Aumentar o texto das mensagens:**

```css theme={null}
.widget_message_content {
  font-size: 16px !important;
  line-height: 1.5;
}
```

**Cabeçalho com um gradiente de marca:**

```css theme={null}
.widget_chat_window_header {
  background: linear-gradient(90deg, #6a11cb, #2575fc) !important;
}
```

**Dar mais respiro à área de escrita:**

```css theme={null}
.widget_chat_window_footer {
  padding: 14px !important;
}
```

> **🧪 Teste sempre no Playground** (veja abaixo) antes de publicar. Um `}` esquecido pode quebrar vários estilos de uma vez.

***

### 🧪 Test Drive (Playground)

Antes de colar o código no seu site ao vivo, dê uma testada no **Playground**.

* As cores estão combinando?
* O Agente está sendo educado?
* O formulário funciona?

**Quando estiver satisfeito, copie o script e coloque no ar! 🚀**