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}}`)
}}
onShopping={(type, data) => {
console.log(`onShopping: ${type}, data: ${JSON.stringify(data)}`);
}}
onStoryDeeplinkTriggered={async (event) => {
return StorifyMeStoryDeeplinkTriggerCompletion.OPEN_STORY_BY_DEFAULT;
}}
onLinkOpenTriggered={async (event) => {
return StorifyMeLinkTriggerCompletion.OPEN_LINK_BY_DEFAULT;
}}
/>
</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.
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)}`)
}}
/>
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
<StorifyMeWidget
onShopping={(type, data) => {
console.log(`onShopping: ${type}, data: ${JSON.stringify(data)}`);
}}
/>
onStoryShared()
onStoryShared
method is invoked when the user shares the story.
<StorifyMeWidget
onStoryShared={story => {
console.log(`Share story ${story.id}}`)
}}
/>
onStoryDeeplinkTriggered()
The onStoryDeeplinkTriggered
method is designed to handle deep links triggered from a Story within the StorifyMe widget. This function provides developers with the ability to customize the behavior when a Story deep link is activated.
<StorifyMeWidget
onStoryDeeplinkTriggered={async (event) => {
// Example logic
const storyData = JSON.parse(event.nativeEvent.story);
if (storyData.name && storyData.name.includes('custom-story')) {
console.log('Handling story deeplink manually:', storyData);
return StorifyMeStoryDeeplinkTriggerCompletion.IGNORE_PRESENTING_STORY;
} else {
console.log('Using default story deeplink handling for:', storyData);
return StorifyMeStoryDeeplinkTriggerCompletion.OPEN_STORY_BY_DEFAULT;
}
}}
/>
onLinkOpenTriggered()
The onLinkOpenTriggered
method handles link openings within a Story, including links from Call to Action (CTA) buttons, product tags, deep links, and swipe-up actions. This function allows developers to customize how these links are processed when activated.
<StorifyMeWidget
onLinkOpenTriggered={async (event) => {
// Example logic
if (event.nativeEvent.url.includes('custom-link')) {
console.log('Handling link manually:', event.nativeEvent.url);
// Do custom link handling here (navigation, API calls, etc.)
return StorifyMeLinkTriggerCompletion.IGNORE_PRESENTING_LINK;
} else {
console.log('Using default link handling for:', event.nativeEvent.url);
return StorifyMeLinkTriggerCompletion.OPEN_LINK_BY_DEFAULT;
}
}}
/>
If you need additional information about the link, you can retrieve it from the onAction event. For example, if you want to identify whether the triggered link is a CTA button, a product tag, or another link type, you can access this information in the onAction event. The onAction event is triggered first, followed by the onLinkOpenTriggered event.
Additionally, if you don't specify any conditions, the settings will apply to all links. For example, if you return StorifyMeLinkTriggerCompletion.IGNORE_PRESENTING_LINK without any conditions, this will prevent all links from being opened within the story, regardless of their type.
Below is an example of how to get the type of the triggered element.
Click to view full code
import React, { useRef } from 'react';
import { View, NativeSyntheticEvent } from 'react-native';
import {
StorifyMeEnv,
StorifyMeWidget,
StorifyMeLinkTriggerCompletion,
} from 'react-native-storifyme';
export default function App(): React.JSX.Element {
// Refs to store data between events
const elementTypeRef = useRef<string | null>(null);
const buttonValueRef = useRef<string | null>(null);
// onAction handler
function onAction({
nativeEvent: { data, type },
}: NativeSyntheticEvent<{ type: string; data: any }>): void {
console.log('onAction:', data, type);
// Parse the "data" if it comes as a JSON string
const parsedData = typeof data === 'string' ? JSON.parse(data) : data;
// Extract "data" object
const buttonData = parsedData?.data;
// Extract button value
buttonValueRef.current = buttonData?.value ?? '';
// Extract the element type (e.g., BUTTON, PRODUCT_TAG, etc.)
elementTypeRef.current = type ?? '';
}
// onLinkOpenTriggered handler
async function onLinkOpenTriggered(
event: NativeSyntheticEvent<{ url: string }>
): Promise<StorifyMeLinkTriggerCompletion> {
// This condition is just an example. You can replace it with any other condition that fits your use case.
// For example:
// const url = url.contains("example.com") // A condition to check if the URL contains "example.com"
// Check if the element type is "BUTTON" and if the button's value matches the URL.
// Example condition, can be replaced with your own logic
const checkSomeCondition =
elementTypeRef.current === 'BUTTON' && buttonValueRef.current === url;
// Reset after use
// This ensures the elementType and buttonValue are cleared for the next event or action.
elementTypeRef.current = null;
buttonValueRef.current = null;
if (checkSomeCondition) {
// Prevent opening the link and handle manual link opening
return StorifyMeLinkTriggerCompletion.IGNORE_PRESENTING_LINK;
} else {
// Proceed with the default link handling
return StorifyMeLinkTriggerCompletion.OPEN_LINK_BY_DEFAULT;
}
}
return (
<App>
<StorifyMeWidget
accountId={ACCOUNT_ID}
apiKey={API_KEY}
env={ENV}
widgetId={WIDGET_ID}
style={styles.box}
ref={ref}
onAction={onAction}
onLinkOpenTriggered={onLinkOpenTriggered}
/>
</App>
);
}