Skip to main content

Events

You can attach and subscribe to events in order to run logic in your app 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:

import { StorifyMeEnv, StorifyMeError, StorifyMeWidget } from 'react-native-storifyme';

export default function App(): JSX.Element {

  return (
    <App>
       <StorifyMeWidget
          accountId={ACCOUNT_ID}
          apiKey={API_KEY}
          env={ENV}
          widgetId={WIDGET_ID}
          style={styles.box}
          ref={ref}
          onLoad={stories => {
            console.log(`Widget is loaded with ${stories.length} stories`)
          }}
          onFail={(error: StorifyMeError) => {
            console.log(`Error loading widget ${error}`)
          }}
          onStoryOpened={(story, index) => {
            console.log(`Opened story ${story.id} with index ${index}`)
          }}
          onStoryClosed={story => {
            console.log(`Close story ${story.id}}`)
          }}
          onAction={(type, data) => {
            console.log(`On action: ${type}, data: ${JSON.stringify(data)}`)
          }}
          onEvent={(type, data) => {
            console.log(`On event: ${type}, event: ${JSON.stringify(data)}`)
          }}
          onStoryShared={story => {
            console.log(`Share story ${story.id}}`)
          }}
        />
    </App>
  );
}

onLoad()​

onLoad method is invoked when the widget loads successfully.

<StorifyMeWidget
   onLoad={stories => {
    console.log(`Widget is loaded with ${stories.length} stories`)
  }}
/>

onFail()​

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

<StorifyMeWidget
   onFail={error => {
    console.log(`Error loading widget ${error}`)
  }}
/>

onStoryOpened()​

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

<StorifyMeWidget
   onStoryOpened={(story, index) => {
    console.log(`Opened story ${story.id} with index ${index}`)
  }}
/>

onStoryClosed()​

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

<StorifyMeWidget
   onStoryClosed={story => {
    console.log(`Close story ${story.id}}`)
  }}
/>

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.

<StorifyMeWidget
   onAction={(type, data) => {
    console.log(`On action: ${type}, data: ${JSON.stringify(data)}`)
  }}
/>

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.

<StorifyMeWidget
   onEvent={(type, data) => {
    console.log(`On event: ${type}, event: ${JSON.stringify(data)}`)
  }}
/>

onStoryShared()​

onStoryShared method is invoked when the user shares the story.

<StorifyMeWidget
   onStoryShared={story => {
    console.log(`Share story ${story.id}}`)
  }}
/>