Customize the widget look and feel

In addition to changing the widget tabs, labels, and headers by using the built-in settings, you can also customize its look and feel using CSS and Javascript.

Settings > Widget offers custom widget styles (CSS) and custom widget Javascript fields to capture these customizations.

Custom Widget Styles (CSS)

To add custom CSS widget styles, go to Settings > Widget and add CSS to the Custom Widget Styles section.

Screenshot showing the Widget Settings Custom Widget Styles section with some sample CSSSample custom CSS in Custom Widget Styles

You can play around with a right-click and inspect on various fields or areas in the widget to try to identify the classes being used. Here are a few of the most frequently changed styles. You can copy and paste these in to your Custom Widget Styles section and then change the highlighted text to make adjustments:

Change the background color of the tabs

/* Tab color */
.widget .widget__nav a {
    background-color: #0097a7;

Change the font on the tab labels

/* Tab label font used (must be defined on the site where widget is being used */
.widget .widget__nav a {
  font-family: Neuton;

Change the color of all hyperlinks

/* Change the color of hyperlinks */
.article-links a,
.list-links a,
.list-links i,
a {
    color: #1f9baa;

Change the contact form submit button color

/* Contact Form submit button color */
.form .form-submit {
    background-color: #fc9f00;

Change the > icon next to articles in the main Knowledge tab and/or the Search results to a different FontAwesome icon

To complete this, you'll need to know the unicode for the FontAwesome icon you'd like to use. Replace the highlighted portion below with that unicode:

/* Change the default ">" icon in the Knowledge tab navigation (chevron-right)
and the Search results (angle-right), including Contact Form search results */
.list-links .fas.fa-chevron-right:before,
.list-links .fas.fa-angle-right:before {
  content: "\f15c" !important;

Custom article styles in the Widget

Some customers want to style article elements differently in the widget from their main knowledge base (such as article title, etc.).

For these customizations, instead of using Settings > Widget, you'll add the Custom CSS directly to Settings > Style. Preface your class selectors with .w-documentation-article, which specifically targest articles displayed in the widget rather than in the knowledge base.

For example, h1.hg-article-title is the CSS selector for the article title in your full knowledge base. This sample code will let set the article title to a 20px font-size in the widget only:

.w-documentation-article h1.hg-article-title {
  font-size: 20px;

Custom Widget Javascript

For additional customizations (such as removing some fields entirely, changing the order, etc.), you'll need to use Javascript  (JS) in the widget. To add widget JS, go to Settings > Widget and add your JS to the Custom Widget Javascript section.

Screenshot showing sample custom widget Javascript to hide the file attachment option in the contact tabSample Custom Widget Javascript

You do NOT need to add <script> tags around code entered in the Custom Widget Javascript section.

Working with the Contact tab

Javascript for the contact form needs to go inside the onTabChange function. Inside this function, you have access to data.oldTab and data.newTab to hook onto the tabChange events:

//JS for the contact form needs to go inside onTabChange function
var onTabChange = function(data) {
      //you have access to the data.oldTab and data.newTab to hook onto these events if it helps. Example:
      console.log("Tab changed from " + data.oldTab + " to " + data.newTab);      
      //do some code down here

For example, this code will hide the "Upload file attachment" option in the contact form:

//JS for the contact form needs to go inside onTabChange function
var onTabChange = function(data) {
      //simple example of hiding an option
      //hide file attachment option