The React SDK by vektorone.co provides a set of custom React components for easy integration of contextual ads into React applications.

It builds on top of the JavaScript SDK and offers a declarative, JSX-based interface tailored to React workflows.

Install via NPM:

npm install git+https://github.com/goodguysoft/adselect-react.git

Import in your component:

import {
  SendChatHistory,
  ChatAd,
  PageAd
} from 'vektorone-sdk';

All components require:

• `apiId` — Your VektorOne API ID
• `apiKey` — Your secret API key (provided by VektorOne support)

These are mandatory for all SDK operations.

Submits a full chat history for context analysis.

• `userId` — Unique identifier for the user
• `conversationId` — Conversation/session ID
• `apiId`, `apiKey` — Your VektorOne API credentials

<SendChatHistory
  userId="user-123"
  conversationId="chat-456"
  apiId="YOUR_API_ID"
  apiKey="YOUR_API_KEY"
>
  <MyCustomChatComponent />
</SendChatHistory>

🧠 Note: You can use any internal chat component. The SDK automatically extracts message content using AI on the backend — no need to wrap each message manually.

Displays an ad based on previously submitted chat history.

• `userId`, `conversationId` — Same as above
• `type` — `“Json”`, `“HtmlTextAd”`, `“HtmlImageAd”`, or `“JavaScript”`
• `callback` — (Optional) JavaScript callback function (only for `JavaScript` type)
• `apiId`, `apiKey` — Required

<ChatAd
  userId="user-123"
  conversationId="chat-456"
  type="HtmlImageAd"
  apiId="YOUR_API_ID"
  apiKey="YOUR_API_KEY"
/>

Renders an ad based on the current HTML content of the page.

• `type` — Same as above
• `callback` — (Optional) for `“JavaScript”` type
• `apiId`, `apiKey` — Required

<PageAd
  type="HtmlTextAd"
  apiId="YOUR_API_ID"
  apiKey="YOUR_API_KEY"
/>

The SDK will use the full `document.documentElement.outerHTML` as input.

The SDK renders HTML with predictable CSS classes that you can override.

<div class="ad-box ad-text">
  <span class="ad-label">Sponsored</span>
  <div class="ad-body">Find the best deals on hiking gear →</div>
</div>

You can override these styles in your own stylesheet or using CSS Modules.

.ad-box {
  background: #fdfdfd;
  border-left: 3px solid #00aaff;
  padding: 10px;
}
.ad-label {
  font-size: 0.75rem;
  color: #888;
}

• JavaScript SDK
• GoLang SDK
• Ad Formats
• Getting Started