Customize the appearance of Self Help

Customize the visual and layout aspects of the Improved Self Help widget in its open state.

• Mode: Enable the Mode toggle. Choose the Light mode, Dark mode, or System default option to set the widget’s background appearance. System default matches the widget to the light or dark theme on each user’s device.

  

• Corner radius: Set the corner radius for the Improved Self Help widget and its content cards. The available options are Sharp, Regular, Smooth, and Round. Regular is the default.

  

• Layout: Configure the content layout within the Improved Self Help widget. The available options are Detailed and Minimal.

  

• Spacing: Set the spacing between the content in the Improved Self Help widget. The available options are Compact, Regular, and Relaxed. Compact sets 4 px, Regular sets 8 px, and Relaxed sets 12 px. Regular is the default.

  

• Size: Set the size of the Improved Self Help panel. Choose the Default or Compact option.
  
  

  Info:

  The following images show how the Self Help panel appears with each Size option:

  • Default:
    

  • Compact:
    

Customize the Header of the Improved Self Help widget in its open state.

• Color: Configure the header’s color using the color picker or by entering the hex code.

• Header Text: Customize the header text.

Note:

The Header Text can have up to 30 characters.

• Description: Customize the description text.

Note:

The Description can have up to 150 characters.

Customize the Floating Action Button (FAB) of the Improved Self Help widget in its closed state.

• Style: Choose the elements to display in the FAB. The available options are:

  1. Only icon: Displays only the icon without a text label.

  2. Icon & label: Displays both the icon and a text label.

  3. Only label: Displays only the text label without the icon.

  

• Icon Text: Customize the text of the FAB. The text appears when you hover your cursor over the FAB. For more information, see Rename the Self Help widget.

  Note:

  The Icon Text can have up to 20 characters.

  

• Size: Set the size of the FAB. Drag the slider from Min to Max to change the size. The default size is 56×56 dp, which is the largest size available.

  

• Corner rounding: Set how rounded the FAB corners are, from a square to a fully rounded shape. Drag the slider toward Square for sharp corners or toward Round for a fully rounded FAB.
  

  Note:

  Corner rounding applies only to the FAB. To change the corners of the open widget and its content cards, use Corner radius in the Self Help Panel.

• Edge spacing: Set how far the FAB sits from the edge of the browser window. Drag the slider from Min to Max to increase the spacing. You can set the spacing up to 20 px.
  

• Color: Configure the FAB icon’s background color using the color picker or by entering the hex code.

  

• Icon: Change the FAB icon. Choose from five predefined icons. The Bulb icon is the default for the Improved Self Help widget. To upload a custom icon, click the Plus icon. Custom icons must be in PNG or SVG format. The file size must not exceed 25 KB. The dimensions must be 32×32 px. For more information on adding a custom icon, see Add an icon to Self Help.

  

• Text and Icon color: Configure how Self Help text and the FAB icon appear when you select a background color. Whatfix automatically adjusts colors to ensure contrast and visibility. The available options are:

  1. Light: Text and icons automatically turn white when you select a dark background.

  2. Dark: Text and icons automatically turn dark when you select a light background.

  

• Position: Change the default position of the FAB. Choose one of the 12 available positions. The FAB appears in this position for all users. To enable users to move the FAB to their preferred location, enable the Allow drag-and-drop toggle. For more information, see Reposition the Self Help Widget.

  

• Allow drag-and-drop: When you enable the Allow drag-and-drop toggle, users can move the FAB anywhere on their screen.