JavaScript Web SDK
Koah JavaScript Web SDK allows you to integrate ads into your web application.
This guide will walk you through an example integration of Koah using JavaScript and the @koah/javascript-sdk library.
Installation
Before getting started, you'll need to create a publisher account in our dashboard and obtain a publisher ID.
Add the JavaScript snippet to your HTML
This is the simplest and recommended way to get started. It only takes few minutes. Copy the snippet below and replace <YOUR_PUBLISHER_ID>
with your actual publisher ID and add it within the <head>
tags of your HTML file.
You can find the snippet pre-filled with your publisher ID in your dashboard settings.
<script src="https://app.koah.ai/js?token=<YOUR_PUBLISHER_ID>"></script>
If you are using React, checkout our React SDK guide.
Injecting ads
Serving Koah ads is a 2 step process.
Send user input
To send user input to Koah, you can use the window.koah.process
method. That's all you have to do.
// `user_input` is the user's input to the LLM
// `generated_text` is the LLM's response
// `format` is the ad format you want to use - 'suffix', 'citation'
window.koah.process(user_input, generated_text, format)
For possible values of format
, see Ad formats.
Response location
The final step is to specify where ads will appear in your UI. You'll need to designate a specific location in your HTML for each ad format. Here's how to set it up:
- Create an empty
<div>
element in your HTML at the desired ad placement location - Assign a unique selector to the div via CSS selectors
- Register the unique selector in your Koah dashboard settings
For example:
<div your-unique-selector="some-value"></div>
Custom styling
Customizing the appearance of ads is a great way to make them blend in with your app. Koah provides two main ways to customize the appearance of ads:
- Advertisement UI
- Ad badge position
Advertisement UI
You can customize the appearance of an ad by adding custom CSS to your app. Below are all available components and their respective CSS classes. Note the availability of each component is different for the Suffix and Citation ad formats.
Component | CSS Class | Suffix | Citations |
---|---|---|---|
Ad container | koah-ad-container | ✅ | ✅ |
Ad badge | koah-ad-badge | ✅ | ✅ |
Ad content | koah-ad | ✅ | ✅ |
Ad header | koah-ad-header | ❌ | ✅ |
Advertiser URL Container | koah-ad-domain-container | ❌ | ✅ |
Advertiser URL | koah-ad-domain-text | ❌ | ✅ |
Favicon | koah-ad-favicon | ❌ | ✅ |
Call to action | koah-ad-cta | ❌ | ✅ |
For a visual reference of these components and their CSS classes, refer to the diagrams below:
Below are example CSS styles we recommend for each ad format:
.koah-ad-container {
padding: 14px 12px;
background: #f0f0f0;
border-radius: 8px;
}
.koah-ad-badge {
background: #f0f0f0;
padding: 4px 6px;
border-radius: 200px;
font-weight: 700;
font-size: 10px;
}
.koah-ad {
padding: 4px 6px;
border-radius: 200px;
margin-right: 6px;
}
Ad Badge
You can customize the location of the ad badge relative to the ad content through the dashboard. The available options are:
Setting | Options |
---|---|
Position relative to ad content | Start (left), End (right), Above |
Vertical alignment | Superscript, Subscript, Baseline |
Congratulations! You are ready to serve ads in your app 🎉