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