​
1. Installation

To get started, you will need to set up a publisher account to get a publisherToken and code

npm install @kontextso/sdk-react-native

​
2. Initialize AdsProvider

Next, we need to set up the AdsProvider. This component handles all data fetching logic and requires access to the chat messages. You should place it somewhere in your component tree where you already have messages available and high enough in the hierarchy to contain all ad placements (locations where ads will be rendered).

PropDescription
publisherTokenYour unique publisher token
messagesList of messages between assistant and user
userIdany unique string that should stay the same during user lifetime. This is required for retargetting ads within your platform or rewarded ads.
conversationIdUnique ID of the conversation
enabledPlacementCodesList of placement codes that should be enabled the conversation
characterThe character to be used in this conversation

The character object includes the following properties:

PropDescription
nameName of the character
avatarUrlURL of the character’s avatar
isNsfwWhether the character is NSFW
idUnique ID of the character
greetingGreeting of the character
personaDescription of the character’s personality
tagsTags of the character (list of strings)
'use client' // AdsProvider needs to be a client component if you use Next

import * as React from 'react'
import { AdsProvider } from '@kontextso/sdk-react-native';

interface Message {
  messageId: string
  role: 'user' | 'assistant'
  content: string
  createdAt: string | Date
}

function App() {
  // Message fetching/storing logic. Probably more complex
  // in your app.
  const [messages, setMessages] = useState<Message[]>([])

  // ...

  return (
    <AdsProvider
      publisherToken='<publisher-token>'
      messages={messages}
      userId='<user-id>'
      conversationId='<conversation-id>'
      enabledPlacementCodes={['<code>']}
      character={{
        name: '<character-name>',
        avatarUrl: '<character-avatar-url>',
        isNsfw: '<boolean>',
        id: '<character-id>',
        greeting: '<character-greeting>',
        persona: '<character-persona>',
        tags: ['<tag-1>', '<tag-2>'],
      }}
    >
      <TheRestOfYourApplication />
    </AdsProvider>
  )
}

​
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 a code that you need to use for each ad slot or ad format you want to display.

We will be using an InlineAd format in this example. 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).

function MessageList(messages: Messages) {
  return <>
    {messages.map((m, i) => (
      <>
        <Message key={i} message={m} />
        <InlineAd code="<your-code>" messageId={m.id} />
      </>
    )}
  </>
}