Documentation

Iframe Embedding

Embed the full chat interface in a page section.

Embed the agent as a full interface within your page instead of a floating widget. Ideal for dedicated support pages or help centers.

When to Use Iframe

Use iframe embedding when you want:

  • A dedicated chat page (e.g., /support or /help)
  • The chat to be part of the page layout
  • More control over the chat interface size
  • To embed in documentation or help sections

For a floating chat bubble, use the JavaScript widget instead.

Basic Iframe Embed

  1. Go to your agent's Channels tab
  2. Select Iframe embed type
  3. Copy the iframe code shown
  4. Paste into your HTML

Your iframe code includes the correct URL with your agent ID. You can also click the "Visit" button to preview the iframe page.

Sizing Options

After copying your iframe code from Chatbot > Channels, you can adjust the sizing:

Fixed Size

Set specific width and height attributes:

width="400"
height="600"

Full Width

Use percentage width:

width="100%"
height="600"

Full Height (in a container)

Wrap in a container with viewport height:

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

Responsive Container

For a responsive chat that adapts to screen size, wrap your iframe in a container:

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

Styling the Container

Add CSS styles to your iframe for visual polish:

With Border

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

With Shadow

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

Example: Support Page

<!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 > Channels here -->
    </div>
  </div>
</body>
</html>

React / Next.js

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

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

Domain Restrictions

Iframe embeds respect domain restrictions:

  • Add your website domain to allowed domains
  • The iframe won't load on unauthorized domains

Configure domains →

Troubleshooting

Iframe Not Loading

  • Check domain restrictions include your site
  • Verify the agent ID is correct
  • Check browser console for errors

Scrolling Issues

  • Set a fixed height on the iframe
  • Or use overflow: hidden on the container

Styling Conflicts

  • The iframe is isolated from your page styles
  • Container styles won't affect chat content

Next Steps