Widget Configuration

Configure your Knest widget through code props and dashboard settings. Code props control behavior, while dashboard settings handle branding.

Props reference

All widget implementations accept the same props with syntax appropriate to the framework.

PropReact / SvelteHTMLTypeRequiredDescription
API KeypublishableApiKeypublishable-api-keystringYesYour project's publishable API key from the Integration tab.
Modemodemode'inline' | 'bubble'NoDisplay mode. Default: 'bubble'.
Default OpendefaultOpendefault-openbooleanNoAuto-open the chat in bubble mode. Default: false.

Display modes

Inline mode

The chat widget renders directly where you place it in your page layout. Use this when you want the chatbot to be a primary feature, like on a dedicated help page or support section.

  • Widget takes up space in the document flow
  • Good for dedicated help or documentation pages
  • Responsive to container width

Bubble mode

A floating button appears in the bottom-right corner of the screen. When clicked, it opens a chat panel. This is the most common integration for general websites.

  • Doesn't interfere with page layout
  • Always accessible from any page
  • Use defaultOpen to open automatically on page load

Dashboard customization

Branding and content customization happens in your Knest dashboard, not in code. This means you can update your chatbot's appearance without redeploying your site.

What you can customize

Brand color

Applied to the chat bubble button, send button, and accent elements. Choose a color that matches your brand.

Avatar image

The image displayed next to AI responses. Upload your logo, mascot, or custom assistant avatar.

Welcome message

The greeting users see when they first open the chat. Make it helpful and on-brand.

Example questions

Suggested prompts displayed to help users get started. Choose questions that showcase your chatbot's capabilities.

Changes take effect immediately. The widget automatically fetches the latest configuration when it loads.

Examples by framework

React

import { ChatWidget } from '@useknest/widget-react';

<ChatWidget
  publishableApiKey="your_api_key_here"
  mode="bubble"
  defaultOpen={false}
/>

JavaScript (HTML)

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

Svelte

<script>
  import '@useknest/widget-web';
</script>

<knest-chat
  publishableApiKey="your_api_key_here"
  mode="bubble"
  defaultOpen={false}
/>

Next steps