Skip to main content

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​

CTASourceValueDescription
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).