Embedding Your Intake Bot
Add your ioZen intake bot to any website. Choose from inline embeds, popups, floating widgets, or a direct shareable link.
Your intake bot is ready. Now put it where your visitors are. ioZen offers three embed types and a direct link so you can capture demand on any platform.
Embed Types
| Type | Best For | How It Works |
|---|---|---|
| Inline | Replacing an existing form section | Renders directly inside your page at a specific location |
| Popup | Call-to-action buttons, banners | Opens in a centered modal overlay when triggered |
| Widget | Always-available access | Floating button in the corner that expands into a chat panel |
| Direct Link | Social media, email, QR codes | Standalone page at app.iozen.ai/i/your-bot-slug |
Finding Your Embed Code
- Open your intake bot in ioZen and click Share
- Under Share Method, pick Inline Embed, Popup Modal or Floating Widget
- Copy the code. It already carries your bot's slug and any size you set
Each embed type is a ready-to-paste snippet. No build tools or npm packages required. The snippets below are the same code Share gives you, with YOUR_BOT_SLUG in place of your slug.
Inline Embed
Renders the intake bot inside a container on your page. Place the container where you want the bot; the script goes right after it or at the end of the page.
<!-- ioZen Inline Embed -->
<div
data-iozen-inline="YOUR_BOT_SLUG"
style="width: 100%; height: 100%; min-height: 600px; display: flex; flex-direction: column;"
></div>
<script
src="https://app.iozen.ai/widget/v2/loader.js?bot=YOUR_BOT_SLUG"
data-bot="YOUR_BOT_SLUG"
data-type="inline"
async
></script>The bot fills the container. Edit the container's style (width, height) to fit your layout.
Popup Embed
Opens the intake bot in a centered modal when the visitor clicks the button.
<!-- ioZen Popup Modal -->
<button data-iozen-popup="YOUR_BOT_SLUG">
Chat with us
</button>
<script
src="https://app.iozen.ai/widget/v2/loader.js?bot=YOUR_BOT_SLUG"
data-bot="YOUR_BOT_SLUG"
data-type="popup"
async
></script>Any element with data-iozen-popup="YOUR_BOT_SLUG" becomes a trigger. You can have several triggers on the same page.
Widget Embed
A floating button (bottom-right by default) that expands into a chat panel.
<!-- ioZen Floating Widget -->
<script
src="https://app.iozen.ai/widget/v2/loader.js?bot=YOUR_BOT_SLUG"
data-bot="YOUR_BOT_SLUG"
async
></script>No additional HTML needed: the widget creates its own button and panel.
Direct Link
No code required. Share the URL directly:
https://app.iozen.ai/i/YOUR_BOT_SLUGWorks in emails, social media posts, SMS, printed QR codes: anywhere you can share a link. See the Direct Link & QR guide for details.
Platform Guides
Step-by-step instructions for popular website platforms:
| Platform | Guide |
|---|---|
| HTML / Any Website | Generic embed guide → |
| WordPress | WordPress guide → |
| Squarespace | Squarespace guide → |
| Wix | Wix guide → |
| Webflow | Webflow guide → |
| Shopify | Shopify guide → |
| Framer | Framer guide → |
| Carrd | Carrd guide → |
| HubSpot | HubSpot guide → |
| GoDaddy | GoDaddy guide → |
| Google Sites | Google Sites guide → |
| Notion Sites | Notion Sites guide → |
| Direct Link & QR | Direct link guide → |
Customization
All embed types inherit your intake bot's design settings (colors, fonts, branding). To customize the appearance, update the Design tab in your intake bot settings. Changes apply everywhere the bot is embedded.
Troubleshooting
| Issue | Solution |
|---|---|
| Bot doesn't appear | Check that the data-bot slug matches your bot's share URL |
| Bot appears but is cut off | Ensure the inline container has enough height, or use popup/widget mode |
| Multiple bots on one page | Paste each bot's own snippet. A container's data-iozen-inline must match its script's data-bot |
| Content Security Policy errors | Add app.iozen.ai to your CSP script-src and frame-src directives |
Need help? Email us at hello@iozen.ai.