Svelte Integration

The Knest web component works seamlessly in SvelteKit applications with full TypeScript support.

Installation

npm install @useknest/widget-web
# or
pnpm add @useknest/widget-web
# or
yarn add @useknest/widget-web

Basic usage

Import the widget in your Svelte component:

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

<knest-chat
  publishableApiKey="your_api_key_here"
  mode="bubble"
/>

Note: Use camelCase props in Svelte, just like in React. The web component will handle the conversion.

TypeScript support

For TypeScript projects, declare the custom element in your app.d.ts:

declare namespace svelteHTML {
  interface IntrinsicElements {
    'knest-chat': {
      publishableApiKey: string;
      mode?: 'inline' | 'bubble';
      defaultOpen?: boolean;
      user?: {
        id?: string;
        email?: string;
        fullName?: string;
        metadata?: Record<string, unknown>;
      };
    };
  }
}

Props

The widget accepts props in camelCase when used in Svelte. See the Widget Configuration page for a complete reference.

Required:

  • publishableApiKey (string) — Your project's API key

Optional:

  • mode ('inline' | 'bubble') — Display mode. Defaults to 'bubble'
  • defaultOpen (boolean) — Auto-open the chat in bubble mode. Defaults to false
  • user (object) — Identifies the logged-in user on your platform. Requires at least id or email. Fields: id (string), email (string), fullName (string), metadata (object)

Display modes

Inline mode

The widget renders directly in your page layout:

<knest-chat
  publishableApiKey="your_api_key_here"
  mode="inline"
/>

Bubble mode

A floating button appears in the corner. Click to open the chat panel:

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

Styling

Styles are bundled with the web component. No additional CSS imports needed.

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

Next steps