React Demo Project

See how easy it is to integrate high-performance ads into your React app using our lightweight SDK.

​
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

​
2. Initialize AdsProvider

Next, you need to set up the AdsProvider. This component handles all data-fetching logic and requires access to the chat messages. Place it somewhere in your component tree where messages are already available and high enough in the hierarchy to contain all ad placements (i.e., locations where ads will be rendered).
PropDescription
publisherTokenYour unique publisher token
messagesA list of messages between the assistant and the user
userIdA unique string that should remain the same during the user’s lifetime (used for retargeting and rewarded ads)
conversationIdUnique ID of the conversation
enabledPlacementCodesA list of placement codes that should be enabled for the conversation
characterThe character object used in this conversation
onAdViewA function that will be called when an ad is viewed (optional)
onAdClickA function that will be called when an ad is clicked (optional)
variantIdA string provided by the publisher to identify the user cohort in order to compare A/B test groups (optional)
The messages array includes objects with the following properties:
PropDescription
idUnique ID of the message
roleRole of the message (user or assistant)
contentContent of the message
createdAtTimestamp when the message was created
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)

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

interface Message {
  id: string
  role: 'user' | 'assistant'
  content: string
  createdAt: 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 UI element or space 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: Message[] }) {
  return <div>
    {messages.map((m, i) => (
      <div key={m.id}>
        <Message message={m} />
        <InlineAd code="<your-code>" messageId={m.id} />
      </div>
    )}
  </div>
}

​
4. Going further

<InlineAd />, being the most versatile format, already offers advanced functionality such as rendering images and videos. If you want to style your ads, check out our Inline ad guide.