AppToPub
    PricingAboutFAQGuides
    EN|繁|簡
    Back to Guides

    How to Embed a Poe Canvas App on Your Website

    Once you've converted your Poe Canvas app into a standalone web app with AppToPub, you can embed it directly on your own website. This lets visitors interact with your AI-powered app without leaving your site — perfect for portfolios, client demos, landing pages, and product showcases.

    Your Website<iframe>AppToPub Appapptopub.com/app/your-app

    Prerequisites

    Before you start, make sure you have:

    1. A deployed AppToPub app with a working public URL (e.g., ) https://apptopub.com/app/your-app-id)
    2. Access to your website's HTML editor or CMS page builder

    If you haven't converted your Canvas app yet, follow the conversion guide first.

    Basic Embed Code

    The simplest way to embed your app is with an HTML <iframe> element. Copy this code and replace the src URL with your app's URL:

    <iframe
  src="https://apptopub.com/app/your-app-id"
  width="100%"
  height="600"
  style="border: none; border-radius: 8px;"
  loading="lazy"
  title="My Poe Canvas App"
></iframe>

    Key attributes explained:

    • width="100%" — Makes the app fill the container width, adapting to different screen sizes
    • height="600" — Sets a fixed height in pixels. Adjust based on your app's content. Chat-style apps typically need 500-700px; utility tools may need more.
    • style="border: none;" — Removes the default iframe border for a cleaner look
    • loading="lazy" — Delays loading until the iframe is near the viewport, improving page performance
    • title — Provides an accessible label for screen readers. Always include this for accessibility.

    Responsive Embed

    For apps that need to resize proportionally on mobile devices, wrap the iframe in a responsive container:

    <div style="position: relative; width: 100%; padding-bottom: 75%; overflow: hidden;">
  <iframe
    src="https://apptopub.com/app/your-app-id"
    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none;"
    loading="lazy"
    title="My Poe Canvas App"
  ></iframe>
</div>

    The padding-bottom: 75% creates a 4:3 aspect ratio. Change it to 56.25% for 16:9 or 100% for a square.

    Platform-Specific Instructions

    WordPress

    1. Open the page or post where you want the embed
    2. Add a Custom HTML block (click + → search "HTML")
    3. Paste the iframe code from above
    4. Click Preview to verify it loads correctly
    5. Publish or update the page

    If your WordPress theme strips iframes, install a plugin like "iframe" or use the Elementor/Divi HTML widget instead.

    Wix

    1. Open the Wix Editor for your page
    2. Click Add → Embed Code → Embed HTML
    3. Paste the iframe code into the HTML field
    4. Resize the embed element to fit your page layout
    5. Save and publish

    Squarespace

    1. Edit the page and add a new block
    2. Choose Code from the block options
    3. Paste the iframe code
    4. Toggle Display Source off to see the rendered preview
    5. Save the page

    Notion

    Notion supports embeds natively. Type /embed in any page, paste your AppToPub app URL, and Notion will render it inline. You can resize the embed by dragging the corner handles.

    When NOT to Use iframes

    Iframes are the right tool for most embed scenarios, but they have limitations you should be aware of:

    • SEO-sensitive pages — Search engines generally don't index iframe content as part of the parent page. If you need the AI app's content to contribute to your page's SEO, consider linking to the app instead of embedding it.
    • Performance-critical pages — Each iframe loads a separate page, adding to your total page weight. On pages where load speed is critical (e.g., landing pages with conversion goals), test the impact before deploying.
    • Mobile-first experiences — Iframes with fixed heights can create awkward scrolling on small screens. If your audience is primarily mobile, provide a direct link instead or use the responsive embed pattern above.

    Styling Tips

    • Match your site's theme — If your Canvas app has a light/dark mode, make sure it aligns with your website's color scheme
    • Add context — Place a heading and brief description above the embed so visitors understand what the app does before interacting with it
    • Set appropriate height — Test the embed on mobile to ensure the height works on smaller screens. A height that's too small forces excessive scrolling inside the iframe.
    • Use a custom URL — If you have a Basic or Premium plan, you can set a custom URL slug for a cleaner embed source URL

    Troubleshooting

    The embed shows a blank white box
    Check that your app URL is correct and the deployment is still active. Free-tier apps expire after 72 hours. Upgrade to a paid plan for permanent hosting.
    The app loads but looks broken on mobile
    Use the responsive embed code above with a percentage-based padding-bottom. Also check if your Canvas app's CSS is responsive — if it uses fixed pixel widths, it may not adapt to narrow viewports.
    My CMS strips the iframe code
    Some CMS platforms sanitize HTML for security. Look for an "HTML embed" or "code block" widget that bypasses sanitization. On WordPress, the Custom HTML block should work without issues.

    Your app is embedded and visitors are using it — now find out how much. Set up usage analytics to monitor views and AI API calls so you can measure engagement and optimize your app over time.

    Ready to convert your Poe Canvas app?

    Start Converting