By default the widget opens as a centred panel over a dimmed page. A few attributes turn it into a help chat: a compact panel in the bottom-right corner, above its button, with the page still usable behind it.

​
Standard configuration

<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"></script>

​
Help chat configuration

Add these attributes: 
<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-modal-overlay-hidden="true"
  data-modal-lock-scroll="false"
  data-modal-expand-button-hidden="true"
  data-modal-inner-right="24px"
  data-modal-inner-bottom="80px"
  data-modal-inner-max-width="min(400px, calc(100vw - 48px))"
  data-modal-inner-max-height="calc(100vh - 104px)"
  data-launcher-button-size="44px"></script>
The corner button stays visible and becomes a close button while the panel is open.
AttributeWhat it does
data-modal-overlay-hidden="true"No dimmed backdrop. The page stays clickable, and clicking it does not close the chat
data-modal-lock-scroll="false"The page keeps scrolling while the panel is open
data-modal-expand-button-hidden="true"Removes the header’s expand button
data-modal-inner-right, data-modal-inner-bottomPin the panel at these distances from the window edges. The button sits 24px from the corner, so 80px clears a 44px button
data-modal-inner-max-widthThe panel’s width. min() keeps a margin on phones
data-modal-inner-max-heightKeeps the top of the panel on screen
data-launcher-button-size="44px"A smaller corner button. Default 60px
Any data-modal-inner-top, -right, -bottom or -left pins the panel at that distance on every screen size, phones included. That is why the width and height above use min() and calc().
For the bottom-left corner, use data-position="bottom-left" and data-modal-inner-left="24px" instead of the right offset.

​
Open on page load

data-modal-open-by-default="true"
An open panel takes keyboard focus from the page, and on a phone it brings up the keyboard. Use this only on pages that exist for the chat.