ioZen Docs
Embedding

Framer

Embed your ioZen intake bot on a Framer site using a custom code component.

Add your ioZen intake bot to Framer using the Code component.

Widget for site-wide access. Inline for embedding in a specific section.

Option 1: Widget (Site-Wide)

  1. Open your Framer project
  2. Go to Site Settings → General → Custom Code
  3. In the End of <body> tag section, paste:
<script
  src="https://app.iozen.ai/embed.js"
  data-bot="YOUR_BOT_SLUG"
  data-mode="widget"
  defer
></script>
  1. Publish

Option 2: Inline (Code Component)

  1. On the canvas, add an HTML Embed element (Insert → Embed → HTML)
  2. Paste the inline embed code:
<div id="iozen-inline"></div>
<script
  src="https://app.iozen.ai/embed.js"
  data-bot="YOUR_BOT_SLUG"
  data-mode="inline"
  data-container="iozen-inline"
  defer
></script>
  1. Resize the component on the canvas and publish

Troubleshooting

IssueSolution
Code doesn't run in previewCustom code only executes on the published site
Inline embed not sized correctlySet explicit width and height on the HTML embed component in Framer's layout settings

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

Shopify

Embed your ioZen intake bot on a Shopify store using the theme editor or an app embed block.

Carrd

Embed your ioZen intake bot on a Carrd site using the Embed element.

On this page

Recommended Embed TypeOption 1: Widget (Site-Wide)Option 2: Inline (Code Component)Troubleshooting