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

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)

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:

  1. Create an empty <div> element in your HTML at the desired ad placement location
  2. Assign a unique selector to the div via CSS selectors
  3. 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:

  1. Advertisement UI
  2. 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.

ComponentCSS ClassSuffixCitations
Ad containerkoah-ad-container
Ad badgekoah-ad-badge
Ad contentkoah-ad
Ad headerkoah-ad-header
Advertiser URL Containerkoah-ad-domain-container
Advertiser URLkoah-ad-domain-text
Faviconkoah-ad-favicon
Call to actionkoah-ad-cta

For a visual reference of these components and their CSS classes, refer to the diagrams below:

Diagram pointing out the 3 main components of an ad and their respective CSS classesDiagram pointing out the 3 main components of an ad and their respective CSS classes

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:

SettingOptions
Position relative to ad contentStart (left), End (right), Above
Vertical alignmentSuperscript, Subscript, Baseline

Congratulations! You are ready to serve ads in your app 🎉

Was this page helpful?