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:

<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:

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.

/* 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.