Skip to main content

Widget styling best practices

You can configure the kapa widget to best suit your specific deployment page. Optimizing the widget UI is a great way to try and up the number of questions users ask kapa. Below we have gathered our 5 tips on how to ensure your widget is visible and gets usage.

1. Use high contrast colors​

To ensure that users notice the kapa widget, we recommend using a different color that visually stands out compared to the background on your documentation page. To do this you can use the data-modal-disclaimer-bg-color parameter to configure the background of the widget. It might also be useful to set the data-modal-disclaimer-text-color parameter to ensure that the text on the widget is still readable.

Change widget color

For example, Docker used the aforementioned parameters to make their kapa widget light blue, helping it stand out against the plain white background of their documentation site.

2. Name the button Ask AI​

To ensure that users don't think that the kapa widget is a regular button to open a support ticket or that they need to wait for a human response, we recommend keeping the default button title of "Ask Ai".

Name it Ask AI

3. Write an informative description​

Be sure to use the data-modal-disclaimer parameter to tell your users about:

  • What the kapa widget is
  • What sources kapa has access to
  • Any other relevant information for you kapa widget

This will help guide your users on how to use the "Ask AI" feature, and make them understand that kapa is grounded in your specific technical knowledge base.

We recommend a description similar to Camunda's:

Welcome to Camunda 8 Smart docs, powered by AI. Accessing developer docs, forum posts and product blogs from the last year, responses are generated by combining various sources to formulate the best possible answer. If you have feedback please give a thumbs up or down as we continue to improve the AI.

Description

4. Deploy kapa where your users have questions​

Kapa can be deployed across any website or web app, not just on documentation sites. This allows kapa to provide immediate answers wherever your users are likely to have questions, whether they're navigating a complex documentation site, browsing a Zendesk Help Center, or even using an application. For example Mapbox, Monday.com, and CircleCI integrated the kapa widget directly in-app to enhance user retention by offering instant support without leaving the app but also enriching the overall user experience by reducing frustration and improving accessibility for support.

CircleCI In App Example

Another popular way to integrate kapa

5. Avoid custom CSS​

The kapa widget comes with a lot of out-of-the-box optional configurations to help you style the widget to your liking. We strongly discourage CSS overrides to style the widget as we are constantly making improvements to the widget appearance and styling, and therefore any manual overrides may break in the future, while we guarantee that all pre-made configuration parameters will be supported. You can find a full list of these here. If you have any widget parameter wishes feel free to reach out to the team to make a request.