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

To serve relevant ads in your app, there are 2 main things you need to do:

Send user input to Koah - this helps us find relevant ads
Specify location of AI responses - this is so we know where to inject the ads

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 ('prefix' or 'suffix', defaults to 'suffix')
window.koah.process(user_input, generated_text, format)

For possible values of format, see Ad formats.

Response location

Once we find an ad that is relevant to the user input, we need to know where to inject it. We do this by looking for a specific HTML element via a query selector you provide in the dashboard.

If you do not set a query selector, Koah will not know where to inject the ads.

Set query selector

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.

Ad Components

You can customize the appearance of various components of an ad by adding custom CSS to your app. Below are 3 components and their respective CSS classes:

Component	CSS Class
Ad container	`koah-ad-container`
Ad badge	`koah-ad-badge`
Ad content	`koah-ad`

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

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 🎉