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":

<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".

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

// Method that loads the widget and subscribes to events
let widgetLoading = function () {
    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('onStoryClicked', (event) => {
        console.log(event.detail);    // Details about the story that was opened
    });
    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 happened
    });
    widget.addEventListener('onEvent', (event) => {
        console.log(event);         // Event info
    });
    widget.addEventListener('onCommand', (event) => {
        console.log(event);         // Event info
    });
    widget.addEventListener('onShopping', (event) => {
        console.log(event.type);   // Type of the shopping action that happened
        console.log(event.detail);   // Details for the action that happened
    });
    widget.addEventListener('onStoryShared', (event) => {
        console.log(event);         // Story where the share button is clicked 
    });
    widget.addEventListener('onStoryDeeplinkTriggered', (data) => {
        var storyData = data.detail.story;
        var completionFn = data.detail.completion;
        if (checkSomeCondition) {
            // Don't launch story viewer
            completionFn('ignorePresentingStory');
        } else {
            // Continue with default behaviour
            completionFn('openStoryByDefault');
        }
    });

    // Load widget
    widget.load();
};

if (widget.load) {
    widgetLoading();
} else {
    // Listen to an event when the Widget Web SDK is ready and available
    widget.addEventListener('onInitialized', () => {
        widgetLoading();
    });
}

onInitialized()

onInitialized method is invoked when the widget is initialized (but still hasn't fully loaded).

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

onLoad()

onLoad method is invoked when the widget loads successfully.

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.

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

onStoryClicked()

onStoryClicked method is invoked when the user clicks on a single story item.

widget.addEventListener('onStoryClicked', (event) => {
    console.log(event);         // Story that was clicked 
});

onStoryOpened()

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

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.

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.

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.

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

onCommand()

onCommand method is invoked every time the user changes the state of a story on command/action. It can be a open next/previous story/slide, pause/resume video, mute/unmute, etc.

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.

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

onShopping()

onShopping method is invoked every time some cart manipulation is happening. Supported types:

• CART_UPDATED - Happens every time cart is changed
• CART_ITEM_ADDED - Happens when a product is added to cart
• CART_ITEM_REMOVED - Happens when a product is removed from the cart
• CHECKOUT - Happens when user clicks on Checkout button in cart

widget.addEventListener('onShopping', (event) => {
    console.log(event.type);   // Type of the shopping action that happened
    console.log(event.detail);   // Details for the action that happened
});

onStoryShared()

onStoryShared method is invoked when the user shares the story.

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

onStoryDeeplinkTriggered()

onStoryDeeplinkTriggered method is designed to handle deep links triggered from a Story within the StorifyMe widget.

widget.addEventListener('onStoryDeeplinkTriggered', (event) => {
    var storyData = event.detail.story;
    var completionFn = event.detail.completion;

    if (checkSomeCondition) {
        // Don't launch story viewer
        completionFn('ignorePresentingStory');
    } else {
        // Continue with default behaviour
        completionFn('openStoryByDefault');
    }
});