Skip to main content

Basic Guide

The kapa website widget can be installed on virtually any website that allows you to inject JavaScript. This guide will walk you through the general installation process, including the basic website installation method, and then provide specific instructions for common platforms.

Installation Steps​

  1. Enable Your Domain:

    • Navigate to the /Integrations tab on the app.kapa.ai platform.
    • Add a new Widget integration and give it a descriptive name.
    • Enable your domain(s) and set them live. This includes both your production domain (e.g., https://www.example.com) and any staging domains (e.g., https://staging.example.com). For dynamic subdomains, you can use regex patterns (e.g., ^https://\w+.example.com$). For testing purposes, http://localhost is enabled by default.

  2. Obtain Your Website ID:

    • After enabling your domain, click "Copy integration ID" to get your unique Website ID.
    • You'll need this ID for the widget script configuration.

  3. Implement the Widget:

    • For the majority of websites, including standard sites and documentation platforms, follow these steps:

      • Insert the following script tag into the <head> section of your website:

        <script
          async
          src="https://widget.kapa.ai/kapa-widget.bundle.js"
          data-website-id="YOUR_WEBSITE_ID"
          data-project-name="YOUR_PROJECT_NAME"
          data-project-color="#YOUR_HEX_COLOR_CODE"
          data-project-logo="https://YOUR_LOGO_URL.com/logo.png"
        ></script>

      • Be sure to replace the required placeholder values. For a full list of configuration options, see our Configuration page:

        • YOUR_WEBSITE_ID: The Integration ID you copied in step 2 (e.g., XXX-XXX-XXX)
        • YOUR_PROJECT_NAME: The name of your project (e.g., kapa.ai)
        • YOUR_HEX_COLOR_CODE: Your brand's color in hexadecimal format (e.g., #FF0000)
        • https://YOUR_LOGO_URL.com/logo.png: A direct URL to your project logo

  4. Verify Installation:

    • After adding the script, refresh your website and look for the Kapa widget.
    • Test it by asking a question to ensure it's functioning correctly.
Customization Options

To tailor the widget to your brand and specific needs, visit our Configuration page. There, you'll find detailed instructions on how to adjust colors, logos, and other widget properties.

Platform-Specific Guides​

For most platforms, the general installation guide provided above will work. However, some platforms may require additional steps or specific configurations. We provide detailed installation guides for popular platforms including:

In case your platform is not listed here, you can always reach out to the kapa.ai team for assistance.