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

​

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.