Documentação

Incorporação por Iframe

Incorpore a interface completa do chat em uma seção da página.

Incorpore o agente como uma interface completa dentro da sua página em vez de um widget flutuante. Ideal para páginas de suporte dedicadas ou centrais de ajuda.

Quando Usar Iframe

Use a incorporação via iframe quando você quiser:

  • Uma página de chat dedicada (ex.: /support ou /help)
  • Que o chat faça parte do layout da página
  • Mais controle sobre o tamanho da interface de chat
  • Incorporar em documentação ou seções de ajuda

Para um balão de chat flutuante, use o widget JavaScript.

Incorporação Básica via Iframe

  1. Vá até a aba Publicar do seu agente
  2. Selecione o tipo de incorporação Iframe
  3. Copie o código do iframe exibido
  4. Cole no seu HTML

Seu código de iframe inclui a URL correta com o ID do seu agente. Você também pode clicar no botão "Visit" para pré-visualizar a página do iframe.

Opções de Dimensionamento

Após copiar o código do seu iframe em Chatbot > Publicar, você pode ajustar o dimensionamento:

Tamanho Fixo

Defina atributos específicos de largura e altura:

width="400"
height="600"

Largura Total

Use largura em porcentagem:

width="100%"
height="600"

Altura Total (em um contêiner)

Envolva em um contêiner com altura de viewport:

<div style="height: 80vh;">
  <!-- Your iframe with width="100%" height="100%" -->
</div>

Contêiner Responsivo

Para um chat responsivo que se adapta ao tamanho da tela, envolva seu iframe em um contêiner:

<div style="position: relative; width: 100%; max-width: 500px; height: 0; padding-bottom: 120%;">
  <!-- Your iframe with position: absolute; top: 0; left: 0; width: 100%; height: 100%; -->
</div>

Estilizando o Contêiner

Adicione estilos CSS ao seu iframe para um acabamento visual mais refinado:

Com Borda

style="border: 1px solid #e5e7eb; border-radius: 8px;"

Com Sombra

style="border: none; border-radius: 12px; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);"

Exemplo: Página de Suporte

<!DOCTYPE html>
<html>
<head>
  <title>Support - Your Company</title>
  <style>
    .support-container {
      max-width: 800px;
      margin: 40px auto;
      padding: 0 20px;
    }
    .chat-frame {
      border: 1px solid #e5e7eb;
      border-radius: 12px;
      overflow: hidden;
    }
  </style>
</head>
<body>
  <div class="support-container">
    <h1>How can we help?</h1>
    <p>Chat with our AI assistant below:</p>

    <div class="chat-frame">
      <!-- Paste your iframe code from Chatbot > Publish here -->
    </div>
  </div>
</body>
</html>

React / Next.js

export function SupportChat() {
  // Get iframe URL from Chatbot > Publish
  const iframeUrl = 'YOUR_IFRAME_URL';

  return (
    <iframe
      src={iframeUrl}
      className="w-full h-[600px] border rounded-lg"
    />
  );
}

Restrições de Domínio

As incorporações via iframe respeitam restrições de domínio:

  • Adicione o domínio do seu site aos domínios permitidos
  • O iframe não será carregado em domínios não autorizados

Configurar domínios →

Solução de Problemas

O Iframe Não Carrega

  • Verifique se as restrições de domínio incluem seu site
  • Confirme se o ID do agente está correto
  • Verifique o console do navegador em busca de erros

Problemas de Rolagem

  • Defina uma altura fixa no iframe
  • Ou use overflow: hidden no contêiner

Conflitos de Estilização

  • O iframe é isolado dos estilos da sua página
  • Estilos do contêiner não afetarão o conteúdo do chat

Próximos Passos