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.