Choose a panel layout
data-layout controls how the chat panel opens on desktop.
| Layout | Behavior | Best for |
|---|---|---|
modal | Centered dialog with backdrop | Marketing pages, pricing pages, focused help flows |
overlay | Right-side panel over the page | Docs sites with sidebars or table-of-contents columns |
push | Right-side panel that shifts page content left | Single-column docs and long-form pages |
All layouts become a full-screen sheet on small screens.
Modal
Modal is the default. It locks page scroll, dims the page, and opens the widget in the center.
<script
async
src="https://cdn.knoku.com/widget.js"
data-project-id="YOUR_PROJECT_ID"
></script>Overlay
Overlay keeps your page layout in place and covers the right side of the viewport.
<script
async
src="https://cdn.knoku.com/widget.js"
data-project-id="YOUR_PROJECT_ID"
data-layout="overlay"
></script>Use it when fixed sidebars, sticky headers, or docs navigation make page shifting risky.
Push
Push adds a right margin to the page while the panel is open.
<script
async
src="https://cdn.knoku.com/widget.js"
data-project-id="YOUR_PROJECT_ID"
data-layout="push"
></script>On desktop, the widget injects:
body {
margin-right: 380px;
transition: margin-right 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
}On wide viewports the margin increases to 560px. The style is removed when the widget closes or is destroyed. The margin is suppressed below 640px width.
Choosing a layout
Start with modal unless you know the widget should feel like part of the page.
Use overlay when your site has complex fixed positioning. Use push when content should remain visible next to the panel.
Test push in your real layout before shipping, especially if the site has sticky elements or horizontal overflow.
npm path
import { initKnokuWidget } from '@knoku/widget'
await initKnokuWidget({
projectId: 'YOUR_PROJECT_ID',
layout: 'modal',
})