Skip to main content

Events

You can attach and subscribe to events in order to run logic on your website when something happens in Stories. This way, you can:

  • control what is shown,
  • override events from StorifyMe stories,
  • intercept click events and run internal logic,
  • and many other use cases

Example code​

The best way to attach listeners is by overriding native StorifyMe events and initializing widget manually using init="manual":

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

<!-- Somewhere in the code where you want the widget to appear -->
<storifyme-collection 
  id="widget" 
  account="<ACCOUNT_ID>" 
  widget="<WIDGET_ID>" 
  env="<ENV>" 
  init="manual">
</storifyme-collection>
info

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

Please initialize widget manually

In order to be sure that you will receive all the events, eg. onLoad, please first register events and then initialize the widget.

You can mark the widget to be manually loaded with init="manual".

main.js
// Get the widget element
const widget = document.querySelector('#widget');

// Add events
widget.addEventListener('onLoad', (event) => {
    console.log(event.detail); // Widget ID and stories that are loaded in the widget
});
widget.addEventListener('onFail', (error) => {
    console.log(error);         // Error that happened
});
widget.addEventListener('onStoryOpened', (event) => {
    console.log(event.detail);    // Details about the story that was opened
});
widget.addEventListener('onStoryClosed', (event) => {
    console.log(event.detail);      // Details about the story that was closed
});
widget.addEventListener('onAction', (event) => {
    console.log(event.type);   // Type of the action that happened
    console.log(event.detail);   // Details for the action that occured
});
widget.addEventListener('onEvent', (event) => {
    console.log(event);         // Event info
});
widget.addEventListener('onStoryShared', (event) => {
    console.log(event);         // Story where the share button is clicked 
});

// Load widget
widget.load();

onLoad()​

onLoad method is invoked when the widget loads successfully.

main.js
widget.addEventListener('onLoad', (event) => {
    console.log(event.detail); // Widget ID and stories that are loaded in the widget
});

onFail()​

onFail method is invoked when the widget loading fails. Use this even to for example hide the widget, or re-try loading.

main.js
widget.addEventListener('onFail', (error) => {
    console.log(error);         // Error that happened
});

onStoryOpened()​

onStoryOpened method is invoked any time the user opens a story.

main.js
widget.addEventListener('onStoryOpened', (event) => {
    console.log(event.detail.story);    // Story that is opened
    console.log(event.detail.index);    // Index of the story in the stories array
});

onStoryClosed()​

onStoryClosed method is invoked when the user closes the story and the full screen preview.

main.js
widget.addEventListener('onStoryClosed', (event) => {
    console.log(event.detail.id);      // ID of the story that was closed
});

onAction()​

onAction method is invoked when the user engages with one of the engaging components. This way you can override for example a button click event and instead of opening the product details page on the website, you can open it in the app itself.

Or when they answer on the quiz question, based on the answer, you might want to send them to some specific page.

main.js
widget.addEventListener('onAction', (event) => {
    console.log(event.type);   // Type of the action that happened
    console.log(event.detail.data);   // Details of the action
});

onEvent()​

onEvent method is invoked every time some analytics even is happening. It can be a slide view event, engaging element answer or similar.

Adding different analytics

While this method can be used to collect analytics on your side, we suggest adding the additional analytics processors in StorifyMe admin app under integrations.

main.js
widget.addEventListener('onEvent', (event) => {
    console.log(event);         // Event info
});

onStoryShared()​

onStoryShared method is invoked when the user shares the story.

main.js
widget.addEventListener('onStoryShared', (event) => {
    console.log(event);         // Story where the share button is clicked 
});