Skip to main content

Style the widget like a persistent right sidebar

You can configure the Kapa widget to appear as a persistent sidebar on the right side of your page, taking up the full height and a fixed width. This is ideal for documentation or support sites where you want the AI assistant to always be visible and accessible.

Sidebar Widget Mode

Standard Configuration​

By default, the Kapa widget is implemented with a script tag like this:

<script
  async
  src="https://widget.kapa.ai/kapa-widget.bundle.js"
  data-website-id="XXX-XXX-XXX"
  data-project-name="kapa.ai"
  data-project-color="#6306B6"
  data-project-logo="kapa.ai/assets/logo.png"
  data-modal-disclaimer="This is a custom LLM with access to all [Kapa documentation](https://docs.kapa.ai)."
  data-modal-example-questions="How do I get started?,How to add example questions?"
  data-user-analytics-fingerprint-enabled="true"
></script>

To make the widget appear as a persistent right sidebar, add the following parameters to your script tag:

<script
  async
  src="https://widget.kapa.ai/kapa-widget.bundle.js"
  data-website-id="XXX-XXX-XXX"
  data-project-name="kapa.ai"
  data-project-color="#6306B6"
  data-project-logo="kapa.ai/assets/logo.png"
  data-modal-disclaimer="This is a custom LLM with access to all [Kapa documentation](https://docs.kapa.ai)."
  data-modal-example-questions="How do I get started?,How to add example questions?"
  data-user-analytics-fingerprint-enabled="true"
  data-modal-x-offset="0"
  data-modal-y-offset="0"
  data-modal-with-overlay="false"
  data-modal-inner-flex-direction="column"
  data-modal-inner-justify-content="end"
  data-modal-inner-max-width="500px"
  data-modal-inner-position-left="auto"
  data-modal-inner-position-right="0"
  data-modal-inner-position-bottom="0"
  data-modal-inner-position-top="0"
  data-modal-size="100vh"
  data-modal-lock-scroll="false"
  data-modal-header-bg-color="#fff"
></script>

Additional Parameters Explained​

  • data-modal-x-offset="0" and data-modal-y-offset="0": Positions the widget at the edge of the viewport.
  • data-modal-with-overlay="false": Removes the overlay, allowing interaction with the page behind the widget.
  • data-modal-inner-flex-direction="column" and data-modal-inner-justify-content="end": Aligns the widget to the bottom and stretches it vertically.
  • data-modal-inner-max-width="500px": Sets the sidebar width (adjust as needed).
  • data-modal-inner-position-*: Fine-tunes the position of the widget.
  • data-modal-size="100vh": Makes the widget take up the full viewport height.
  • data-modal-header-bg-color="#fff": Sets the modal header background to white for a clean look.
  • data-modal-lock-scroll="false": Allows scrolling on the main page when the widget is open.

FAQ​

Q: How do I make sure the widget appears above other elements?

A: You can set the z-index of the widget using the data-modal-z-index parameter. For example:

<script ... data-modal-z-index="2000"></script>

This is optional and only needed if you have other elements with high z-index values on your site.