JavaScript Integration

The Knest web component works in any HTML page without a build step. Perfect for static sites, WordPress, or any CMS.

Installation

Add the script tag to your HTML:

<script type="module" src="https://unpkg.com/@useknest/widget-web/dist/widget.js"></script>

Basic usage

After loading the script, use the <knest-chat> web component:

<!DOCTYPE html>
<html>
  <head>
    <script type="module" src="https://unpkg.com/@useknest/widget-web/dist/widget.js"></script>
  </head>
  <body>
    <h1>My Website</h1>
    <knest-chat
      publishable-api-key="your_api_key_here"
      mode="bubble"
    ></knest-chat>
  </body>
</html>

Attributes

The web component uses kebab-case attributes. See the Widget Configuration page for a complete reference.

Required:

  • publishable-api-key (string) — Your project's API key

Optional:

  • mode ('inline' | 'bubble') — Display mode. Defaults to 'bubble'
  • default-open (boolean) — Auto-open the chat in bubble mode. Add attribute without value to enable

Display modes

Inline mode

The widget renders directly in your page:

<knest-chat
  publishable-api-key="your_api_key_here"
  mode="inline"
></knest-chat>

Bubble mode

A floating button appears in the corner:

<knest-chat
  publishable-api-key="your_api_key_here"
  mode="bubble"
  default-open
></knest-chat>

Styling

The widget is fully self-contained with its own styles. No CSS imports needed.

Customize colors, avatar, and messages in your Knest dashboard under the Branding tab.

Browser compatibility

The web component works in all modern browsers that support:

  • ES modules
  • Custom elements
  • Shadow DOM

This includes Chrome, Firefox, Safari, and Edge (all evergreen versions).

Next steps