JavaScript SDK Documentation

Introduction

Welcome to the official documentation for the KB Integrations JavaScript SDK. This SDK allows you to seamlessly integrate KB's powerful features into your web applications, enabling rich user tracking, event management, and personalized experiences.

With this SDK, you can:

Getting Started

Before you begin, ensure you have your KB API Key ready. You can obtain this key from your KB Integrations dashboard.

Installation

You can include the KB JavaScript SDK in your project in a few ways:

1. Using a CDN

This is the simplest method for getting started. Add the following script tag to the <head> or <body> of your HTML file:

<script async src="https://cdn.kb.integrations.com/sdk/v1.0.0/kb.min.js"></script>

2. Using npm or yarn

For more complex projects or if you prefer a module-based approach, you can install the SDK via npm or yarn:

npm install kb-integrations-sdk --save
yarn add kb-integrations-sdk

Then, import it into your JavaScript files:

import KB from 'kb-integrations-sdk';

Basic Usage

Once the SDK is loaded, you need to initialize it with your API key. This typically happens early in your application's lifecycle.

KB.init('YOUR_KB_API_KEY');

After initialization, you can start tracking events:

KB.track('User Signed Up', {
    plan: 'premium',
    method: 'google'
});

API Reference

The KB JavaScript SDK provides several functions to manage user data and track events.

KB.init(apiKey, options)

Initializes the SDK with your API key.

KB.init('YOUR_KB_API_KEY', { debug: true });

KB.track(eventName, properties)

Records an event that happened in your application.

KB.track('Button Clicked', {
    buttonName: 'Submit Order',
    orderId: '12345'
});

KB.identify(userId, traits)

Associates a user with an ID and optional traits.

KB.identify('user-abc-123', {
    email: 'jane.doe@example.com',
    name: 'Jane Doe',
    plan: 'free'
});

KB.page(pageName, properties)

Records a page view event.

KB.page('Product Details', {
    productId: 'prod-xyz',
    productName: 'Awesome Gadget'
});

KB.reset()

Resets the SDK's state, clearing any cached user information. Useful for when a user logs out.

KB.reset();

Examples

Here are some common integration scenarios:

Example: Tracking User Login

// Assuming you have user data after successful login
const userId = user.id;
const userTraits = {
    email: user.email,
    name: user.fullName,
    signupDate: user.createdAt
};

KB.identify(userId, userTraits);
KB.track('User Logged In');

Example: Tracking Form Submission

document.getElementById('contact-form').addEventListener('submit', function(event) {
    event.preventDefault();
    // ... form submission logic ...

    KB.track('Contact Form Submitted', {
        subject: document.getElementById('subject').value,
        messageLength: document.getElementById('message').value.length
    });
});

Advanced Topics

Explore more advanced features:

Troubleshooting

If you encounter issues, check the following:

← Previous Section Next Section →