HTML / Any Website

This guide covers embedding on any website where you have access to the HTML source code. If you're using a specific platform (WordPress, Squarespace, etc.), check the platform-specific guides for tailored instructions.

Prerequisites

• A published intake bot in ioZen
• Access to edit your website's HTML (directly or through a CMS code editor)

Recommended Embed Type

For most websites, widget mode is the fastest way to go live — a single script tag, no container element needed.

Step 1: Get Your Embed Code

1. Open your FlowApp → Intake Bot tab
2. Click Share / Embed
3. Select your preferred embed type
4. Copy the code snippet

Step 2: Add the Script to Your Site

Widget (Floating Button)

Paste this before the closing </body> tag on every page where you want the widget:

<script
  src="https://app.iozen.ai/embed.js"
  data-bot="YOUR_BOT_SLUG"
  data-mode="widget"
  defer
></script>

The widget appears as a floating button in the bottom-right corner. No additional HTML needed.

Inline (Embedded in Page)

Add a container element where you want the bot to appear, then include the script:

<div id="iozen-inline" style="max-width: 640px; margin: 0 auto;"></div>
<script
  src="https://app.iozen.ai/embed.js"
  data-bot="YOUR_BOT_SLUG"
  data-mode="inline"
  data-container="iozen-inline"
  defer
></script>

The bot fills the container's width. Adjust max-width to control sizing.

Popup (Modal on Click)

Add the script anywhere in your page, then add a trigger element:

<script
  src="https://app.iozen.ai/embed.js"
  data-bot="YOUR_BOT_SLUG"
  data-mode="popup"
  data-trigger="iozen-open"
  defer
></script>

<button id="iozen-open">Contact Us</button>

Any element with the id matching data-trigger will open the popup on click.

Step 3: Verify

1. Save your changes and reload the page
2. Confirm the bot loads (widget button appears, inline form renders, or popup opens on click)
3. Submit a test entry to verify data flows to your ioZen dashboard

Single-Page Applications (React, Vue, Next.js, etc.)

If your site is a SPA, load the embed script dynamically after the page mounts:

const script = document.createElement('script')
script.src = 'https://app.iozen.ai/embed.js'
script.dataset.bot = 'YOUR_BOT_SLUG'
script.dataset.mode = 'widget'
script.defer = true
document.body.appendChild(script)

For inline mode, ensure the container element is in the DOM before the script executes.

Content Security Policy (CSP)

If your site uses a Content Security Policy, add these directives:

script-src 'self' https://app.iozen.ai;
frame-src https://app.iozen.ai;

Troubleshooting

Need help? Email us at hello@iozen.ai.