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

# Criando Embeds

Este guia orienta você no processo de criação e configuração de um embed do Chatmode para seu site ou aplicativo.

## Pré-requisitos

Antes de criar um embed, certifique-se de ter:

* Uma conta Chatmode com uma assinatura ativa
* Pelo menos um agente já configurado
* Acesso ao código do seu site ou sistema de gerenciamento de conteúdo

## Passo 1: Criar um Ambiente Embed

Primeiro, você precisa criar um ambiente `EMBED` que hospedará seu embed:

1. Faça login no seu painel do Chatmode
2. Navegue até **Ambientes** na barra lateral
3. Clique em **Criar Ambiente**
4. Selecione **`EMBED`** como o tipo de ambiente
5. Insira um nome descritivo para o seu ambiente (por exemplo, "Chat Principal do Site")
6. Selecione o agente que alimentará este embed
7. Escolha seu idioma preferido
8. Clique em **Próximo** para prosseguir para a configuração

## Passo 2: Configurar Definições Gerais

Configure o comportamento geral e a aparência do seu embed através das configurações do Ambiente:

* **Nome de Exibição / Imagem de Exibição / Ícone / Cor Primária / Mensagem Inicial**: Configure esses elementos visuais/textuais principais (conforme descrito no guia de Personalização).

<Note>
  Certifique-se de configurar as definições necessárias como Nome de Exibição e
  Mensagem Inicial para fornecer uma boa experiência ao usuário.
</Note>

## Passo 3: Personalizar Aparência

Adapte a aparência da interface de chat hospedada dentro do embed:

1. **Cores e Marca** (Aplicado à página `/chats/[id]`):

   * Cor primária para botões e detalhes
   * Cor do cabeçalho
   * Cores do texto
   * Faça upload do seu logotipo para o cabeçalho do chat (através da configuração Imagem de Exibição)
   * Nome de Exibição para o cabeçalho

2. **Opções de Layout** (Controlado pela estilização do seu `<iframe>` se usar o método inline):

   * Posição (canto inferior direito, inline, etc.) - alcançado via CSS no iframe
   * Dimensões (largura, altura) - definidas no elemento iframe

3. **Personalização de Texto** (Aplicado à página `/chats/[id]`):
   * Mensagem Inicial exibida pelo agente.

## Passo 4: Configuração Avançada

Atualmente, as opções de configuração avançada além das definições gerais são limitadas para o embed padrão.

## Passo 5: Obter Seu Código de Embed

Assim que a configuração do seu ambiente `EMBED` estiver completa e salva:

1. Navegue até a página de detalhes do Ambiente (se ainda não estiver lá).
2. Encontre a seção **Implementação** / **Compartilhar**.
3. Localize o snippet **"Código da Bolha"**, que fornece o widget flutuante padrão.
4. Clique no botão **Copiar** ao lado do Código da Bolha.

*(Alternativamente, se precisar incorporar o chat inline dentro do conteúdo da sua página, você pode copiar o snippet "Código Iframe", que fornece apenas a estrutura básica da tag `<iframe>`.)*

## Passo 6: Implementar em Seu Site

1. Acesse o código do seu site ou sistema de gerenciamento de conteúdo.
2. **Cole a tag de script "Código da Bolha" copiada** logo antes da tag de fechamento `</body>` do seu HTML.
3. Este script cuidará de adicionar a bolha flutuante e carregar o modal de chat quando clicado.

*(Se você copiou o "Código Iframe" para incorporação inline, cole a tag `<iframe>` onde deseja na estrutura do seu HTML e aplique o CSS apropriado para dimensionamento e layout.)*

## Passo 7: Testar Seu Embed

Após a implementação, teste seu embed completamente:

1. Visite seu site em diferentes navegadores
2. Verifique a funcionalidade em dispositivos móveis
3. Teste o fluxo de chat com perguntas de exemplo
4. Verifique se as entradas do usuário são tratadas corretamente
5. Confirme se as configurações de aparência são aplicadas corretamente

## Próximos Passos

Após implementar o snippet de embed:

1. Teste a bolha de chat e o fluxo de conversa minuciosamente.
2. Se necessário, ajuste as configurações do Ambiente no Chatmode (como Nome de Exibição, Imagem, Mensagem Inicial) e salve.