JavaScript SDK

Vanilla JavaScript version of the Kovio Chatbot Ad SDK. No React or framework dependencies required. Perfect for any web application, WordPress sites, or static HTML pages.

Zero Dependencies: Pure vanilla JavaScript with no framework requirements. Works with any web application, including WordPress, static sites, and custom HTML pages.

Installation

Add the Script Tag

Add the script tag to your HTML page’s <head> section:

<script async src="https://kvlabscode.github.io/whitelist-website/js?token=<YOUR_PUBLISHER_ID>"></script>

Important: Replace <YOUR_PUBLISHER_ID> with your actual publisher ID from the Kovio dashboard. You can find your publisher ID after signing up in the dashboard.

Create Container & Call Process

Add a container div and call the process function:

<div id="kovio-ad-container"></div>

<script>
    window.kovio.process('technology,ai'); // Sample keywords
</script>

API Reference

`window.kovio.process(keyword, theme, format, containerId)`

Fetches and displays a contextual ad based on the provided keyword.

keyword

string

required

Comma-separated keywords to match ads (e.g., 'technology,ai')

theme

string

default:"'dark'"

Display theme - 'light' or 'dark'

format

string

default:"'standard'"

Ad format - 'standard' or 'small'

containerId

string

default:"'kovio-ad-container'"

ID of the container element where the ad will be displayed

Returns: Promise<void>

Examples

Basic Usage
Custom Container
Dynamic Loading

<!DOCTYPE html>
<html>
<head>
  <script async src="https://kvlabscode.github.io/whitelist-website/js?token=your-publisher-id"></script>
</head>
<body>
  <div id="kovio-ad-container"></div>
  
  <script>
    window.addEventListener('load', function() {
      window.kovio.process('technology,ai');
    });
  </script>
</body>
</html>

Note: Replace your-publisher-id with your actual publisher ID from the Kovio dashboard.

<div id="my-custom-container"></div>

<script>
  window.kovio.process('technology', 'dark', 'standard', 'my-custom-container');
</script>

<div id="kovio-ad-container"></div>
<input type="text" id="keyword-input" placeholder="Enter keywords">
<button onclick="loadAd()">Load Ad</button>

<script>
  function loadAd() {
    const keyword = document.getElementById('keyword-input').value;
    if (keyword) {
      window.kovio.process(keyword, 'dark', 'standard');
    }
  }
</script>

Features

✅ No Dependencies - Pure vanilla JavaScript
✅ Auto-initialization - Automatically initializes when script loads
✅ Multiple Keywords - Comma-separated keyword support
✅ Themes - Light and dark theme support
✅ Formats - Standard and small ad formats
✅ Automatic Tracking - Impression and click tracking handled automatically

Ad Formats & Themes

Standard Format
Small Format
Light Theme

Full ad with image, title, message, and button. Best for prominent placements.

window.kovio.process('technology', 'dark', 'standard');

Compact ad with title and message only. Best for inline content.

window.kovio.process('technology', 'dark', 'small');

Light background with dark text. Best for light mode interfaces.

window.kovio.process('technology', 'light', 'standard');

Advanced Usage

Checking if SDK is Loaded

if (window.kovio && window.kovio.process) {
  window.kovio.process('technology');
} else {
  window.addEventListener('load', function() {
    window.kovio.process('technology');
  });
}

Loading Multiple Ads

<div id="ad-container-1"></div>
<div id="ad-container-2"></div>

<script>
  window.kovio.process('technology', 'dark', 'standard', 'ad-container-1');
  window.kovio.process('ai', 'dark', 'small', 'ad-container-2');
</script>

WordPress Integration

Add to your theme’s header.php:

<script async src="https://kvlabscode.github.io/whitelist-website/js?token=your-publisher-id"></script>

Important: Replace your-publisher-id with your actual publisher ID from the Kovio dashboard.

Then in your template:

<div id="kovio-ad-container"></div>
<script>
  window.addEventListener('load', function() {
    window.kovio.process('technology,ai');
  });
</script>

Best Practices

Container Requirements: The container element must exist in the DOM before calling window.kovio.process(), have a valid ID attribute, and be visible (not display: none).

Load script asynchronously - Use the async attribute
Wait for SDK load - Use window.addEventListener('load') before calling process()
Use relevant keywords - Match keywords to your page content
Match your theme - Use light or dark to match your site’s design

Troubleshooting

Ad not showing?

Check browser console for error messages
Verify publisher ID - Make sure you’ve replaced <YOUR_PUBLISHER_ID> or your-publisher-id with your actual publisher ID from the Kovio dashboard
Ensure container div exists with correct ID
Wait for SDK to load before calling process()

Script not loading?

Verify script URL is accessible
Check that token parameter is included
Ensure script has async attribute

Browser Support

Works in all modern browsers that support ES2020, Fetch API, and Intersection Observer API.

All modern browsers (Chrome, Firefox, Safari, Edge) are supported. For older browsers, consider using a polyfill for Intersection Observer.

Support

For more information, visit the main documentation.

Getting started

SDK

​JavaScript SDK

​Installation

​API Reference

​window.kovio.process(keyword, theme, format, containerId)

​Examples

​Features

​Ad Formats & Themes

​Advanced Usage

​Best Practices

​Troubleshooting

​Browser Support

​Support

JavaScript SDK

Installation

API Reference

`window.kovio.process(keyword, theme, format, containerId)`

Examples

Features

Ad Formats & Themes

Advanced Usage

Best Practices

Troubleshooting

Browser Support

Support