iFrame Embed

Embed your chatbot as a standalone iframe element.

When to Use iFrame

Use iFrame embedding when you want:

• Full control over widget placement
• A chatbot in a specific area of your page
• Custom sizing and positioning
• To embed in an existing modal or sidebar

For a floating chat widget, use Script Tag Embed instead.

Getting the iFrame Code

1. Go to your dashboard
2. Select a chatbot
3. Click Settings > Integration
4. Copy the iFrame code

Basic iFrame Code

<iframe
  src="https://leezy.ai/iframe/YOUR_CHATBOT_ID"
  width="400"
  height="600"
  frameborder="0"
  allow="clipboard-write"
></iframe>

Replace YOUR_CHATBOT_ID with your chatbot's ID.

Sizing Options

Fixed Size

<iframe
  src="https://leezy.ai/iframe/YOUR_CHATBOT_ID"
  width="400"
  height="600"
></iframe>

Responsive (Full Container)

<div style="width: 100%; height: 500px;">
  <iframe
    src="https://leezy.ai/iframe/YOUR_CHATBOT_ID"
    style="width: 100%; height: 100%; border: none;"
  ></iframe>
</div>

Minimum Recommended Size

• Width: 300px minimum (350-400px recommended)
• Height: 400px minimum (500-600px recommended)

Small Sizes

Very small iframes may make the chat difficult to use. Test on mobile devices.

Styling the iFrame

Remove Border

<iframe
  src="https://leezy.ai/iframe/YOUR_CHATBOT_ID"
  frameborder="0"
  style="border: none;"
></iframe>

Add Border Radius

<iframe
  src="https://leezy.ai/iframe/YOUR_CHATBOT_ID"
  style="border: none; border-radius: 12px; overflow: hidden;"
></iframe>

Add Shadow

<iframe
  src="https://leezy.ai/iframe/YOUR_CHATBOT_ID"
  style="border: none; box-shadow: 0 4px 12px rgba(0,0,0,0.15);"
></iframe>

Use Cases

Embed in Sidebar

<aside style="width: 350px; height: 100vh; position: fixed; right: 0;">
  <iframe
    src="https://leezy.ai/iframe/YOUR_CHATBOT_ID"
    style="width: 100%; height: 100%; border: none;"
  ></iframe>
</aside>

Embed in Modal

<div class="modal">
  <div class="modal-content" style="width: 400px; height: 600px;">
    <iframe
      src="https://leezy.ai/iframe/YOUR_CHATBOT_ID"
      style="width: 100%; height: 100%; border: none;"
    ></iframe>
  </div>
</div>

Full-Page Chat

<iframe
  src="https://leezy.ai/iframe/YOUR_CHATBOT_ID"
  style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; border: none;"
></iframe>

iFrame Attributes

Attribute	Purpose
src	Chatbot URL (required)
width / height	Dimensions
frameborder="0"	Remove default border
allow="clipboard-write"	Enable copy functionality

Security Considerations

The iFrame is sandboxed with these permissions:

• Scripts execution
• Same-origin access for the chat
• Form submission
• Popups (for links)

Your website content cannot be accessed by the chatbot iframe.

Troubleshooting

iFrame Not Loading

• Check the chatbot ID is correct
• Verify your chatbot is Active
• Check browser console for errors
• Try clearing browser cache

Content Too Small

• Increase width and height values
• Use CSS to make iframe responsive
• Test on different screen sizes

Scrollbars Appearing

Add this CSS to hide double scrollbars:

iframe {
  overflow: hidden;
}

Script Tag vs iFrame

Feature	Script Tag	iFrame
Floating widget	Yes	No
Custom placement	No	Yes
Easy setup	Yes	Moderate
Full customization	Limited	Full

Next Steps

• Script Tag Embed - Floating widget option
• Customize Interface - Change chatbot appearance