Os Embeds do Chatmode permitem integrar capacidades de chat com IA diretamente em seu site ou aplicativo. Com os embeds, você pode fornecer aos seus usuários um assistente de IA interativo sem exigir que eles saiam do seu site.

​
O que são Embeds?

Embeds são widgets de chat personalizáveis que se conectam aos seus agentes e ambientes do Chatmode. Eles:

  • Aparecem em seu site como uma bolha de chat ou interface incorporada
  • Conectam-se aos seus agentes configurados através de ambientes
  • Permitem conversas em tempo real com sua IA
  • Suportam personalização para combinar com sua marca
  • Funcionam em dispositivos desktop e móveis

​
Tipos de Embeds

O Chatmode oferece diferentes maneiras de incorporar a interface de chat:

​
Bolha de Chat Flutuante (Recomendado)

O método padrão usa um pequeno snippet de JavaScript para adicionar uma bolha de chat flutuante no canto do seu site. Ele:

  • É fácil de implementar através de uma tag de script de copiar e colar.
  • Aparece como uma bolha clicável (ícone personalizável).
  • Abre uma janela modal contendo a interface completa da conversa.
  • É projetado para funcionar bem em todos os tipos de dispositivos.

​
Incorporação Inline (via Iframe)

Para incorporar o chat diretamente em uma parte específica do layout da sua página (menos comum), você pode usar um <iframe> apontando para a URL da página de chat (/chats/[environmentId]). Isso requer estilização manual para posicionar o iframe corretamente dentro do conteúdo da sua página.

​
Funcionalidades Principais

Os Embeds do Chatmode oferecem várias funcionalidades (a implementação do frontend pode variar):

​
Persistência da Conversa

  • As conversas do usuário são salvas entre as sessões
  • O histórico de chat está disponível quando os usuários retornam
  • Informações contextuais são mantidas para melhores respostas

​
Suporte Multi-idioma

  • Tradução da interface com base na preferência do usuário (se configurado)
  • Suporte para agentes treinados em múltiplos idiomas

​
Análise e Rastreamento

  • Métricas básicas de uso (por exemplo, contagem de conversas) podem estar disponíveis.
  • Monitore o desempenho do agente e o histórico de conversas.

​
Começando com Embeds

​
Pré-requisitos

Antes de criar um embed, você precisa:

  1. Uma conta Chatmode com uma assinatura ativa
  2. Pelo menos um agente configurado
  3. Um ambiente do tipo EMBED

​
Implementação Básica (Bolha Flutuante)

  1. Crie e configure um ambiente do tipo EMBED no Chatmode.
  2. Navegue até a página de configurações/detalhes do Ambiente.
  3. Encontre a seção Implementação / Compartilhar e localize o snippet “Código da Bolha”.
  4. Copie a tag de script fornecida.
  5. Cole a tag de script no HTML do seu site (por exemplo, antes da tag de fechamento </body>).

O snippet de código que você copia da UI será semelhante a este (use o código exato da UI):

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

  Chatmode.initBubble({
    // environmentId: "SEU_ID_DE_AMBIENTE", // Pré-preenchido
    theme: "automatic", // Opcional
    // ... outras opções podem estar pré-preenchidas ...
  });
</script>

​
Testando Seu Embed

Após a implementação:

  1. Visite seu site em modo anônimo/privado
  2. Verifique se o widget de chat aparece corretamente
  3. Teste as interações para garantir que o agente responda apropriadamente
  4. Verifique a aparência em diferentes dispositivos e tamanhos de tela

​
Casos de Uso Comuns

Embeds podem ser usados em vários cenários:

​
Suporte ao Cliente

  • Forneça suporte automatizado 24/7
  • Responda perguntas comuns instantaneamente
  • Reduza o volume de tickets de suporte

​
Geração de Leads

  • Engaje visitantes do site proativamente
  • Qualifique leads através da conversa
  • Colete informações de contato (se configurado no prompt/fluxo do agente)

​
Orientação de Produto

  • Ajude os usuários a navegar em seu produto
  • Forneça recomendações personalizadas
  • Explique funcionalidades e benefícios
  • Guie usuários através de processos complexos

​
Base de Conhecimento

  • Responda perguntas sobre seu conteúdo
  • Forneça acesso instantâneo à informação
  • Reduza o tempo gasto procurando documentação
  • Entregue ajuda contextual com base na página atual

​
Boas Práticas

Para resultados ótimos com embeds:

  1. Comece com Metas Claras: Defina o que você quer que o embed alcance
  2. Foque na Experiência do Usuário: Torne a interface de chat intuitiva e útil
  3. Combine com Sua Marca: Personalize a aparência para se ajustar ao design do seu site
  4. Teste Exaustivamente: Verifique a funcionalidade em diferentes cenários
  5. Itere com Base no Feedback: Monitore o uso e refine ao longo do tempo

​
Próximos Passos

Para saber mais sobre implementação e personalização de embeds: