Customizing the widget width and height – HelpKit

Let’s learn how to adjust the width or height of your HelpKit widget to match your website’s design and accommodate different screen sizes and user preferences.

By default, the HelpKit widget comes with standard dimensions, but you can easily customize the width and height to create a better user experience. Whether you want a wider display for more content or a narrower one to save screen space, this guide will show you exactly how to do it.

The HelpKit widget can be displayed in two different modes, and each requires a different CSS approach to customize the width.

Popover mode

For widgets displayed as a popover (popup window), use the following CSS:

.helpkit-popover {
  width: 500px !important;
}

This will change the widget width from the default 370 px to 500 px. Please don’t forget to use the !important flag.

Changing the height of your popover widget

You can also change the height of the widget by adjusting the max-height :

.helpkit-popover {
  max-height: 600px !important;
}

This will force the widget height to be not taller than 600px. You can also play with values such as % percentages, vh view heights or even calc() if you need to.

Sidebar mode

For widgets displayed as a sidebar, use this CSS instead:

.helpkit-frame {
  max-width: 50%;
}

Note that sidebar mode uses max-width instead of width to ensure responsive behavior.

Different width values you can use

You have several options for setting the widget width:

Fixed pixels: width: 500px or max-width: 600px

Percentage: width: 80% or max-width: 50% (percentage of parent container)

Viewport width: width: 40vw or max-width: 60vw (percentage of screen width)

Important: Where to add the CSS

⚠️ This custom CSS must be added to your own website’s CSS code, not in the HelpKit custom CSS section in your dashboard.

Since the widget code gets injected into your main website’s page, the styling needs to be applied from your website’s stylesheet to properly target the embedded widget elements.

How to add the CSS to your website:

Open your website’s main CSS file or stylesheet.

Add the appropriate CSS code (popover or sidebar) at the end of the file.

Save and refresh your website to see the changes.

Your widget will now display with your custom width settings, giving your users a better experience that matches your website’s design and their screen size preferences.