The widget can open as a full-height panel that slides in from the right edge, instead of a centred panel. Readers get the answer beside the page they are reading.

​
Configuration

Set data-view-mode="sidebar": 
<script async src="https://widget.kelu.dev/kelu-widget.js"
  data-knowledge-base-id="YOUR_KNOWLEDGE_BASE_ID"
  data-client-key="kl_pk_..."
  data-product-name="Acme"
  data-brand-color="#6306B6"
  data-product-logo="https://example.com/logo.png"
  data-view-mode="sidebar"></script>
What you get:
  • A 460px panel, the full height of the window. Full width on phones.
  • An expand button in the header. It moves the panel to a large centred panel, and back. The widget remembers the reader’s choice.
  • A dimmed page that does not scroll while the sidebar is open. To keep the page usable, see A docked rail.
The sidebar sits over your page; it does not push your layout aside.

​
Customizing the sidebar

​
Width

<script ...
  data-view-mode="sidebar"
  data-sidebar-width="600px"></script>
The sidebar never grows wider than the window. When the reader expands it, the centred panel uses data-modal-expanded-size instead. data-modal-size sets the width of the centred modal only; it does not change the sidebar.

​
A docked rail

Keep the page clickable and scrollable while the sidebar is open: 
<script ...
  data-view-mode="sidebar"
  data-modal-overlay-hidden="true"
  data-modal-lock-scroll="false"></script>

​
Spacing from the edges

The data-modal-inner-* offsets pin the sidebar away from the window edges. Give it a height that fits between them, and hide the expand button, which has nowhere to go once the panel is pinned: 
<script ...
  data-view-mode="sidebar"
  data-modal-inner-top="16px"
  data-modal-inner-right="16px"
  data-modal-inner-height="calc(100vh - 32px)"
  data-modal-border-radius="12px"
  data-modal-expand-button-hidden="true"></script>

​
On the left

<script ...
  data-view-mode="sidebar"
  data-modal-inner-justify-content="flex-start"
  data-modal-box-shadow="8px 0 40px rgba(0, 0, 0, 0.18)"
  data-modal-expand-button-hidden="true"></script>
data-modal-inner-justify-content="flex-start" moves the panel to the left edge, and the box shadow puts the shadow on the side facing the page. The panel still slides in from the right; data-modal-transition has no effect.

​
FAQ

How do I make sure the widget appears above other elements? The panel is at the top of the stacking order by default (2147483647). To let something on your page sit above it, lower it: 
<script ... data-modal-z-index="2000"></script>
Can the sidebar be open when the page loads? Yes: data-modal-open-by-default="true". It takes keyboard focus from the page, so use it only on pages that exist for the assistant. See Component styles for every property the panel accepts.