Skip to main content

Events

You can attach and subscribe to events in order to run logic on your website when something happens in a single embedded Story or Short. This way, you can:

  • control what is shown,
  • override default behaviors,
  • intercept click events and run internal logic,
  • track analytics and engagement

Example code​

The best way to attach listeners is by initializing the component manually using init="manual" and attaching event listeners before calling .load():

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

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

Make sure to replace <ACCOUNT_ID>, <WIDGET_ID> and <ENV> with the values from your account.

Please initialize manually

In order to be sure that you will receive all the events, such as onLoad, you must first register the events and then call .load().

const story = document.querySelector('#story');

let storyLoading = function () {
    story.addEventListener('onInitialized', () => {
        console.log('Initialized');
    });
    story.addEventListener('onLoad', (event) => {
        console.log(event.detail); // Story loaded
    });
    story.addEventListener('onClick', () => {
        console.log('Story clicked');
    });
    story.addEventListener('onView', () => {
        console.log('Story viewed');
    });
    story.addEventListener('onClose', () => {
        console.log('Story closed');
    });
    story.addEventListener('onStoryOpened', (event) => {
        console.log('Story opened', event.detail);
    });
    story.addEventListener('onStoryClosed', (event) => {
        console.log('Story closed', event.detail);
    });
    story.addEventListener('onAction', (event) => {
        console.log(event.type);
        console.log(event.detail);
    });
    story.addEventListener('onEvent', (event) => {
        console.log('Event', event);
    });
    story.addEventListener('onCommand', (event) => {
        console.log('Command', event);
    });

    story.load();
};

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

onInitialized()​

Fired when the component is initialized and ready.

story.addEventListener('onInitialized', () => {});

onLoad()​

Fired when the story successfully loads.

story.addEventListener('onLoad', (event) => {
    console.log(event.detail);
});

onClick()​

Fired when the story is clicked or tapped.

story.addEventListener('onClick', () => {});

onView()​

Fired when the story becomes visible.

story.addEventListener('onView', () => {});

onClose()​

Fired when the story is closed.

story.addEventListener('onClose', () => {});

onStoryOpened()​

Fired when the fullscreen viewer opens the story.

story.addEventListener('onStoryOpened', (event) => {
    console.log(event.detail);
});

onStoryClosed()​

Fired when the fullscreen viewer is closed.

story.addEventListener('onStoryClosed', (event) => {
    console.log(event.detail);
});

onAction()​

Fired when a user interacts with an engaging element (button, quiz, etc.)

story.addEventListener('onAction', (event) => {
    console.log(event.type);
    console.log(event.detail);
});

onEvent()​

Fired for analytics and engagement events.

story.addEventListener('onEvent', (event) => {
    console.log(event);
});

onCommand()​

Fired when the story viewer processes a command (pause, mute, etc.)

story.addEventListener('onCommand', (event) => {
    console.log(event);
});