Documentación

Incrustación con iframe

Incrusta la interfaz de chat completa en una sección de la página.

Incrusta el agente como una interfaz completa dentro de tu página, en lugar de un widget flotante. Ideal para páginas de soporte dedicadas o centros de ayuda.

Cuándo usar un iframe

Usa la incrustación con iframe cuando quieras:

  • Una página de chat dedicada (por ejemplo, /support o /help)
  • Que el chat sea parte del diseño de la página
  • Más control sobre el tamaño de la interfaz de chat
  • Incrustarlo en secciones de documentación o ayuda

Para una burbuja de chat flotante, usa el widget de JavaScript en su lugar.

Incrustación básica con iframe

  1. Ve a la pestaña Publicar de tu agente
  2. Selecciona el tipo de incrustación Iframe
  3. Copia el código de iframe que se muestra
  4. Pégalo en tu HTML

Tu código de iframe incluye la URL correcta con el ID de tu agente. También puedes hacer clic en el botón Visitar para previsualizar la página del iframe.

Opciones de tamaño

Después de copiar tu código de iframe desde Chatbot > Publicar, puedes ajustar el tamaño:

Tamaño fijo

Define atributos específicos de ancho y alto:

width="400"
height="600"

Ancho completo

Usa un ancho en porcentaje:

width="100%"
height="600"

Alto completo (dentro de un contenedor)

Envuélvelo en un contenedor con la altura del viewport:

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

Contenedor adaptable

Para un chat adaptable que se ajuste al tamaño de pantalla, envuelve tu iframe en un contenedor:

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

Estilizar el contenedor

Agrega estilos CSS a tu iframe para darle un acabado visual:

Con borde

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

Con sombra

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

Ejemplo: página de soporte

<!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"
    />
  );
}

Restricciones de dominio

Las incrustaciones con iframe respetan las restricciones de dominio:

  • Agrega el dominio de tu sitio web a los dominios permitidos
  • El iframe no se cargará en dominios no autorizados

Configurar dominios →

Solución de problemas

El iframe no carga

  • Comprueba que las restricciones de dominio incluyan tu sitio
  • Verifica que el ID del agente sea correcto
  • Revisa la consola del navegador en busca de errores

Problemas de desplazamiento

  • Define una altura fija en el iframe
  • O usa overflow: hidden en el contenedor

Conflictos de estilos

  • El iframe está aislado de los estilos de tu página
  • Los estilos del contenedor no afectan el contenido del chat

Próximos pasos