Skip to main content

Embedding a Single Story or Short

This guide shows how to embed a single story or short on your website using StorifyMe’s lightweight Web SDK.

info

This embed is designed for simple use cases — it doesn’t support features like tags, segments, or personalization.

Installation​

Basic Embed​

To embed a story, add the following to your HTML:

index.html
<script
    type="text/javascript"
    src="https://cdn.storifyme.com/static/web-components/storifyme-elements.min.js"
></script>

<storifyme-story account="<ACCOUNT_ID>" story="<STORY_ID>" env="<ENV>">
</storifyme-story>
info

Replace <ACCOUNT_ID>, <STORY_ID>, and <ENV> with your actual values.

Manual Initialization (Optional)​

To control when the story loads, use the init="manual" attribute and call .load() manually:

index.html
<storifyme-story
    id="my-story"
    account="<ACCOUNT_ID>"
    story="<STORY_ID>"
    env="<ENV>"
    init="manual"
>
</storifyme-story>
main.js
const storyElement = document.querySelector('#my-story');

if (storyElement.load) {
    storyElement.load();
} else {
    storyElement.addEventListener('onInitialized', () => {
        storyElement.load();
    });
}

Advanced Configuration​

These additional attributes allow deeper customization of story behavior:

Load additional stories/shorts​

Appends stories from other widgets to the current story list.

<storifyme-story additional-widgets="1234,5678" ...></storifyme-story>

Open stories/shorts externally​

Allows you to open stories manually via external logic (e.g., in a WebView).

<storifyme-story open-stories="external" ...></storifyme-story>

Use legacy open​

Switches from dispatchEvent to iframe postMessage when opening a story.

<storifyme-story use-legacy-open ...></storifyme-story>

Alternative: Iframe Embed​

You can also embed a story using a direct iframe, which is useful in highly restricted environments:

<iframe src="" width="100%" height="600" frameborder="0" allowfullscreen>
</iframe>
info

Use iframe embeds if you can't load custom elements, but note that JavaScript integration (e.g., event listeners) is limited in iframes.