React Native Demo Project
See how easy it is to integrate high-performance ads into your React Native app using our lightweight SDK.
Requirements
- React Native: 0.73.2 or later
Getting started
1. Installation
To get started, you will need to set up a publisher account to get a
publisherToken
and code
Upgrading from v1.x
If you are upgrading from v1.x to v2.x, note thatreact-native-device-info
and react-native-webview
are now required as separate peer dependencies. Install them with:
2. Initialize AdsProvider
TheAdsProvider
handles all data-fetching logic and must have access to the chat messages. Place it high enough in your component tree so it can contain all ad placements.
3. Show your first ad
An ad slot is the element or place in your interface where an ad will be displayed. During onboarding, you will receive acode
that you need to use for each ad slot or ad format you want to display.
Copy the markup <InlineAd />
and place it in your application where it should be rendered. Don’t forget to assign messageId
as a unique identifier. For example, if you have a MessageList
component, you can show an ad after each message like this (every message will have a unique ad displayed because of messageId
).
API documentation
AdsProvider
properties
Your unique publisher token.
List of messages between the assistant and the user.
Unique identifier that remains the same for the user’s lifetime (used for retargeting and rewarded ads).
Unique ID of the conversation.
Placement codes enabled for the conversation. Example:
['inlineAd']
.Character object used in this conversation.
Regulatory object used in this conversation.
Device-specific identifier (IDFA on iOS, GAID on Android).
Vendor identifier (IDFV on iOS).
Publisher-provided identifier for the user cohort (for A/B testing).
Callback triggered when an event occurs. See Supported events for more details.
Flag indicating if the ads are disabled.Note: This does not disable the display of old ads; that behavior is controlled by
staleAdsHandling
.Determines how stale ads (ads not linked to the latest message) are handled.
preserve
- keep displaying the last anchored ad until it’s replaced by a new adhide
(default) - hide the ad when it becomes stale
InlineAd
properties
Placement code provided during onboarding.
Unique ID of the message.
Theme of the ad, e.g.
light
or dark
.Wrapper function to wrap the ad content.
Supported Events
ad.clicked
The user has clicked the ad.
ad.viewed
The user has viewed the ad.
ad.filled
Ad is available.
ad.no-fill
Ad is not available.
ad.render-started
Triggered before the first token is received.
ad.render-completed
Triggered after the last token is received.
ad.error
Triggered when an error occurs.
reward.granted
Triggered when the user receives a reward.
video.started
Triggered when the video playback starts.
video.completed
Triggered when the video playback finishes.
Guides
Controlling when ads load
You can fine-tune ad frequency by controlling when newmessages
are passed into AdsProvider
. This allows you to adjust the ratio of ads to messages dynamically.
Handling no-fill events
You can notify when the ad is not available by using theonEvent
callback.