Call To Action
Call To Action (CTA) handles user interactions that trigger navigation or external links across stories, games, banners, and lists.
Configuring the CTA handler
To receive CTA clicks, assign a storyLinkClickHandler to your StoryManager instance. It receives an object with { src, srcRef, data }:
import {
CTASource,
type CTAStoryReaderPayload,
type CTAStoryListPayload,
type CTAGameReaderPayload,
} from '@inappstory/react-native-sdk';
import { Linking } from 'react-native';
storyManager.storyLinkClickHandler = (payload) => {
const { src, data } = payload;
switch (src) {
case CTASource.STORY_READER: {
const readerData = data as CTAStoryReaderPayload;
console.log('Story Reader CTA:', readerData.url, readerData.elementId);
break;
}
case CTASource.STORY_LIST: {
const listData = data as CTAStoryListPayload;
console.log('Story List / Banner CTA:', listData.url, listData.isDeeplink);
break;
}
case CTASource.GAME_READER: {
const gameData = data as CTAGameReaderPayload;
console.log('Game Reader CTA:', gameData.url, gameData.gameInstanceId);
break;
}
}
if (data.url) {
Linking.openURL(data.url);
}
};
CTASource Enum
CTASource | Value | Description |
|---|---|---|
STORY_READER | 'storyReader' | Button tap or swipe-up action inside a story reader |
STORY_LIST | 'storyList' | Deeplink or button tap from a list card or banner |
GAME_READER | 'gameReader' | Action dispatched from an interactive game |
UNKNOWN | 'unknown' | Source could not be determined |
Payload Types
CTAStoryReaderPayload
export type CTAStoryReaderPayload = {
id: number;
index: number;
url: string;
elementId: string;
};
CTAStoryListPayload
export type CTAStoryListPayload = {
id: number;
index: number;
isDeeplink: boolean;
url: string | undefined;
};
CTAGameReaderPayload
export type CTAGameReaderPayload = {
url: string;
gameInstanceId: string;
};
Default Behavior
If storyLinkClickHandler is not assigned, the SDK automatically falls back to opening payload.data.url using Linking.openURL(url).