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

# Personalização do Embed

Personalize seu embed do Chatmode para combinar perfeitamente com a identidade da sua marca e fornecer uma experiência de usuário fluida. A personalização envolve a configuração de opções na UI do Chatmode, potencialmente passando parâmetros durante a inicialização e aplicando CSS personalizado.

## Configurando via Definições do Ambiente (UI do Chatmode)

A maioria dos aspectos visuais e comportamentais da interface de chat *dentro* do modal/iframe são configurados dentro do aplicativo Chatmode quando você configura seu Ambiente do tipo `EMBED`.

Navegue até **Ambientes -> \[Seu Ambiente Embed] -> Configurações** no Chatmode para configurar:

* **Nome de Exibição**: O texto mostrado no cabeçalho do chat.
* **Imagem de Exibição**: O logotipo ou avatar mostrado no cabeçalho do chat.
* **Ícone**: O ícone exibido na bolha de chat flutuante quando fechada.
* **Cor Primária**: Afeta botões e outros detalhes na interface do chat.
* **Mensagem Inicial**: A primeira mensagem que o Agente envia quando o chat carrega.

As alterações feitas aqui refletem automaticamente no embed.

## Configurando via Opções `initBubble`

A função `Chatmode.initBubble`, usada no snippet padrão do Código da Bolha copiado da UI do Chatmode, aceita algumas opções do lado do cliente para controlar o tema e o ícone personalizado:

```html theme={"system"}
<script type="module">
  import Chatmode from "https://cdn.jsdelivr.net/npm/@chatmode/embed/+esm";

  Chatmode.initBubble({
    // Obrigatório - Copiado da UI
    environmentId: "SEU_ID_DE_AMBIENTE",

    // Configuração Opcional
    theme: "automatic", // "light", "dark", ou "automatic" (padrão)

    // Opcional - Pré-preenchido se ícone carregado na UI - Copiado da UI
    // iconKey: "SUA_CHAVE_DE_ICONE",
    // updatedAt: TIMESTAMP, // Cache-buster para ícone
    position: "bottom-right", // "bottom-left" ou "bottom-right" (padrão)
  });
</script>
```

* **`environmentId` (Obrigatório)**: Seu ID de Ambiente específico, obtido do snippet copiado na UI do Chatmode.
* **`theme` (Opcional)**: Controla o esquema de cores (`light`, `dark`, ou `automatic` com base na preferência do sistema do usuário). Padrão é `automatic`.
* **`iconKey` (Opcional)**: O identificador para seu ícone personalizado carregado nas configurações do Ambiente. Geralmente é pré-preenchido no snippet copiado se você carregou um ícone.
* **`updatedAt` (Opcional)**: Um timestamp usado para evitar cache incorreto do navegador da imagem do ícone. Geralmente é pré-preenchido junto com `iconKey`.

**Importante:** Todas as outras personalizações, como o Nome de Exibição do cabeçalho do chat, Imagem de Exibição, Mensagem Inicial do agente e o Ícone principal e Cor Primária da bolha, são configuradas **exclusivamente** dentro das configurações do Ambiente na UI do Chatmode.

*Nota: Sempre comece com o snippet de código copiado da UI do Chatmode, pois ele contém o `environmentId` obrigatório e potencialmente `iconKey` e `updatedAt` pré-preenchidos.*

## Controle Programático

Quando você inicializa a bolha, pode opcionalmente armazenar o objeto de controle retornado:

```javascript theme={"system"}
const chat = Chatmode.initBubble({
  environmentId: "SEU_ID_DE_AMBIENTE",
  theme: "automatic",
  iconKey: "SUA_CHAVE_DE_ICONE",
  updatedAt: TIMESTAMP,
  position: "bottom-right",
});

// Agora você pode usar o objeto 'chat':

// Abrir o modal de chat
chat.open();

// Fechar o modal de chat
chat.close();

// Alternar o modal
chat.toggle();

// Verificar se o modal está aberto
if (chat.isOpen()) {
  console.log("Chat está aberto");
}

// Remover a bolha e o modal completamente
// chat.remove();
```

Isso permite que você acione ações de chat a partir do código do seu próprio site, por exemplo, abrindo o chat quando um usuário clica em um botão "Ajuda" personalizado.

## Estilizando com CSS

O CSS é usado principalmente se você optar pelo método de **Incorporação Inline** (usando uma tag `<iframe>` diretamente) em vez da bolha flutuante padrão.

### Estilizando o Contêiner Iframe Inline

Se você usar o snippet de código `<iframe>` (copiado das configurações do Ambiente como alternativa ao Código da Bolha), aplique CSS padrão à própria tag `<iframe>` para controlar sua `width`, `height`, `border`, `margin`, `position`, etc., para integrá-lo perfeitamente ao layout da sua página.

```css theme={"system"}
/* Exemplo para um iframe com ID 'chatmode-inline-iframe' */
#chatmode-inline-iframe {
  width: 100%;
  max-width: 500px; /* Restrição de exemplo */
  height: 600px;
  border: 1px solid #eee;
  border-radius: 8px;
  margin: 20px 0;
}
```

### Estilizando a Bolha Flutuante (Não Recomendado)

Embora tecnicamente possível usando as ferramentas de desenvolvedor do navegador para encontrar seletores CSS e sobrescrevê-los com `!important`, sobrescrever manualmente os estilos da bolha flutuante (`#chatmode-bubble-button`) ou sua janela modal (`.chatmode-modal-container`, etc.) **não é recomendado ou suportado**. Essas estruturas internas podem mudar sem aviso prévio, quebrando seus estilos personalizados.

Atenha-se às opções de personalização fornecidas nas configurações do Ambiente (Nome de Exibição, Imagem, Ícone, Cor, Mensagem Inicial) e à opção `theme` no script `initBubble` para a bolha flutuante padrão.