Skip to main content

How to embed your story on a website

Embed your Storydoc via Share > More > Embed and paste the iframe into your site

Jack avatar
Written by Jack
Updated this week

Copy the embed code

  1. In the editor, click Share.

  2. Open the More tab and click Embed (</> icon). A confirmation appears that the code was copied to your clipboard.

Paste the code into your site

  1. Paste the iframe where you want the story to appear in your site’s HTML or CMS embed block.

  2. Save and publish your page.

Example iframe

<div style="position: relative; padding-bottom: 56.25%; height: 0;"><iframe width="560" height="368" src="https://stories.storydoc.com/47345e58a99dfffc2cf452d2b8260d745/82f0b8da-844f-49e8-ab2a-0154202c9cc1/68a21ef4fb9c5c365d9a57ba "title="test333" allow="clipboard-write;  web-share" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe></div>

Important limitations and expectations

  • No full guarantee: Embeds depend on your site’s code, theme, plugins, and policies. Storydoc cannot guarantee identical behavior to the direct link.

  • Analytics may vary: Browser privacy settings, content blockers, and iframe restrictions can reduce tracking accuracy.

  • Mobile behavior: Your page’s CSS and containers can affect scrolling, height, and responsiveness. Always validate on common devices.

  • Third-party constraints: Some CMSs or security layers modify or sandbox iframes, which can break functionality.

Best practices for reliable embeds

  • Use a responsive container: Keep the iframe in a full-width section. Set width:100% and adjust height to fit your content.

  • Avoid restrictive wrappers: Do not place the iframe inside elements with fixed height, overflow hidden, or heavy transforms.

  • Check security headers on your site:

    • X-Frame-Options should not be DENY or SAMEORIGIN.

    • If you use Content Security Policy, allow Storydoc under frame-ancestors.

  • Minimize conflicts: Temporarily disable pop-up blockers, script optimizers, or lazy-load plugins to see if they interfere.

CMS quick steps

  • WordPress: Add a Custom HTML block and paste the iframe.

  • Webflow: Add an Embed element and paste the iframe.

  • Wix: Add an HTML iframe element and paste the iframe.

Did this answer your question?