Skip to main content

How to embed your story on a website

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

Written by Jack
Updated over 2 weeks ago

Access the Share Dialog

To embed your Storydoc story on your website, start by accessing the share options from your story editor.

  1. In the story editor, click the Share button in the top-right corner.

Story editor with Share button highlighted in top-right corner

Copy the Embed Code

The share dialog provides multiple sharing options, including the embed functionality.

Share dialog showing sharing options and copy link dropdown

  1. In the share dialog, click the dropdown arrow next to Copy link.

  2. From the dropdown menu, select Copy embed code. The embed code will be automatically copied to your clipboard.

Share dialog with copy options dropdown showing

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?