AI
Pass

Embed AI Pass Apps in WordPress, Webflow, Notion, and Ghost — A Quick Guide

Eiliya · May 4, 2026 · 3 min read · tutorials

Every CMS handles iframes a little differently. Same iframe code, different paste path. Here's the exact step-by-step for the four most common platforms.

In all four cases, the iframe code you'll paste is the same — grab it from the floating </> button in the bottom-right corner of any AI Pass app:

<iframe src="https://aipass.one/apps/canvas"
        width="100%" height="600"
        frameborder="0"
        allow="clipboard-write"></iframe>

(Swap canvas for image-studio, grammar, chat, voicenote, etc. to embed a different app.)

WordPress

Block editor (Gutenberg):

  1. Edit your post / page
  2. Add a new block → search for Custom HTML (or hit /html)
  3. Paste the iframe code
  4. Hit Preview to confirm it loads
  5. Publish

Classic editor:

  1. Switch from "Visual" to "Text" tab
  2. Paste the iframe at the spot you want it
  3. Don't switch back to Visual before saving — the visual editor sometimes mangles iframe attributes
  4. Update / Publish

One gotcha: some WordPress security plugins (Wordfence, iThemes) strip iframes by default. If your iframe disappears after save, check the plugin's "Allowed HTML" or "iframe whitelist" settings and add aipass.one.

Webflow

  1. Open the page in the Designer
  2. Drag an Embed element (under the Add panel → Components → Embed) to where you want the AI Pass app
  3. The Embed editor pops open — paste the iframe code
  4. Click Save & Close
  5. Publish

The Embed element gives you a placeholder in the Designer (you won't see the live iframe in the editor itself), but it renders correctly on the published site and on staging.

To make it responsive, wrap it in a parent div with a fixed aspect ratio and set the iframe to fill — but the default 100% width / 600px height works fine for most layouts.

Notion

Notion has the cleanest path of the four:

  1. Type /embed on a new line
  2. Notion shows the Embed block — click it
  3. Paste the URL https://aipass.one/apps/canvas (just the URL, not the full iframe)
  4. Notion handles the iframe wrapper for you and renders the app inline

Notion auto-sizes the embed; you can drag the corners to resize. The same flow works for any AI Pass app — just change the slug.

Note: Notion shared pages (publicly accessible) keep the embed working for anonymous visitors. Private Notion pages embed the same way for the owner.

Ghost

Ghost has a built-in HTML card for exactly this:

  1. In the editor, hit / and pick HTML
  2. Paste the iframe code into the card
  3. Click outside to render
  4. Publish

Ghost preserves the iframe across publish and theme switches. The HTML card is also the right place for any other custom HTML — Stripe buttons, Twitter embeds, etc.

A note on responsive sizing

If you want the embed to scale gracefully on small screens, use this wrapper instead of the bare iframe:

<div style="position:relative; padding-bottom:75%; height:0; overflow:hidden;">
  <iframe src="https://aipass.one/apps/canvas"
          style="position:absolute; top:0; left:0; width:100%; height:100%; border:0;"
          allow="clipboard-write"></iframe>
</div>

The padding-bottom:75% gives a 4:3 aspect ratio. Use 56.25% for 16:9. This works in all four CMSes the same way.

What if my CMS isn't listed?

The iframe is plain HTML. If your platform has any way to insert custom HTML — a code block, an embed widget, a snippet feature — you can use the same iframe. The only platforms where it won't work are heavily sandboxed editors (Substack and Medium are the main ones) that strip all iframes for security.

Try it

Pick one platform, copy the iframe from Canvas or Image Studio, and paste. The whole setup is two minutes.

Related Apps

canvas image-studio