---
title: "Customize the appearance of Self Help"
slug: "appearance-and-orientation-of-self-help"
updated: 2026-09-29T04:04:55Z
published: 2026-09-29T04:04:55Z
canonical: "support.whatfix.com/appearance-and-orientation-of-self-help"
stale: true
---

> ## Documentation Index
> Fetch the complete documentation index at: https://support.whatfix.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Customize the appearance of Self Help

> [!WARNING]
> Note:
> 
> Improved Self Help is a Beta feature. To this feature on your dashboard, contact [support@whatfix.com](mailto:support@whatfix.com?subject=Enable%20Improved%20Self%20Help&body=Dear%20Whatfix%20Support%20Team%0A%0APlease%20enable%20Improved%20Self%20Help%20for%20my%20account.%0A%0AThanks%20and%20regards%0A). Improved Self Help provides an enhanced and revamped end-user experience of the Self Help widget.

Whatfix enables you to customize the appearance of the Improved Self Help widget. Configure the visual and layout aspects of the widget from the Whatfix Guidance dashboard.

![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/SH_Style.png?sv=2026-02-06&spr=https&st=2026-11-10T16%3A31%3A37Z&se=2026-11-10T17%3A31%3A37Z&sr=c&sp=r&sig=y%2FVkxERZg%2FDpM6DKPKnr39Spn%2BeiQJtTIzP6IowRX3Y%3D)

> [!WARNING]
> Note:
> 
> To ensure that your Improved Self Help widget is Web Content Accessibility Guidelines (WCAG) compliant, Whatfix recommends selecting colors and themes according to the [WCAG Guidelines](/studio/docs/accessibility-in-whatfix).

Use the following steps to customize the appearance of the Improved Self Help widget:

1. On the [Whatfix Guidance dashboard](/studio/docs/overview-of-the-whatfix-dashboard), click **Style**.

![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/ia_left nav_style.png?sv=2026-02-06&spr=https&st=2026-11-10T16%3A31%3A37Z&se=2026-11-10T17%3A31%3A37Z&sr=c&sp=r&sig=y%2FVkxERZg%2FDpM6DKPKnr39Spn%2BeiQJtTIzP6IowRX3Y%3D)
2. Click **Self Help**.

![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/styles_sh.png?sv=2026-02-06&spr=https&st=2026-11-10T16%3A31%3A37Z&se=2026-11-10T17%3A31%3A37Z&sr=c&sp=r&sig=y%2FVkxERZg%2FDpM6DKPKnr39Spn%2BeiQJtTIzP6IowRX3Y%3D)

Expand the following accordions for more details:

## Customize the appearance of the Self Help Panel

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

![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/SH_Style.png?sv=2026-02-06&spr=https&st=2026-11-10T16%3A31%3A37Z&se=2026-11-10T17%3A31%3A37Z&sr=c&sp=r&sig=y%2FVkxERZg%2FDpM6DKPKnr39Spn%2BeiQJtTIzP6IowRX3Y%3D)

- **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.

![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/SH_Panel_mode.png?sv=2026-02-06&spr=https&st=2026-11-10T16%3A31%3A37Z&se=2026-11-10T17%3A31%3A37Z&sr=c&sp=r&sig=y%2FVkxERZg%2FDpM6DKPKnr39Spn%2BeiQJtTIzP6IowRX3Y%3D)
- **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.

![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/SH_Corner_radius.png?sv=2026-02-06&spr=https&st=2026-11-10T16%3A31%3A37Z&se=2026-11-10T17%3A31%3A37Z&sr=c&sp=r&sig=y%2FVkxERZg%2FDpM6DKPKnr39Spn%2BeiQJtTIzP6IowRX3Y%3D)
- **Layout**: Configure the content layout within the Improved Self Help widget. The available options are **Detailed** and **Minimal**.

![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/SH_Layout.png?sv=2026-02-06&spr=https&st=2026-11-10T16%3A31%3A37Z&se=2026-11-10T17%3A31%3A37Z&sr=c&sp=r&sig=y%2FVkxERZg%2FDpM6DKPKnr39Spn%2BeiQJtTIzP6IowRX3Y%3D)
- **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.

![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/SH_Spacing.png?sv=2026-02-06&spr=https&st=2026-11-10T16%3A31%3A37Z&se=2026-11-10T17%3A31%3A37Z&sr=c&sp=r&sig=y%2FVkxERZg%2FDpM6DKPKnr39Spn%2BeiQJtTIzP6IowRX3Y%3D)
- **Size**: Set the size of the Improved Self Help panel. Choose the **Default** or **Compact** option. ![Size customization of the Self Help widget.](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/SH_SizeCustomization.png?sv=2026-02-06&spr=https&st=2026-11-10T16%3A31%3A37Z&se=2026-11-10T17%3A31%3A37Z&sr=c&sp=r&sig=y%2FVkxERZg%2FDpM6DKPKnr39Spn%2BeiQJtTIzP6IowRX3Y%3D)

> [!NOTE]
> Info:
> 
> The following images show how the Self Help panel appears with each **Size** option:
> 
> - **Default**: ![The image shows what the improved Self Help panel looks like when the default size option is selected.](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/SH_DefaultSize.png?sv=2026-02-06&spr=https&st=2026-11-10T16%3A31%3A37Z&se=2026-11-10T17%3A31%3A37Z&sr=c&sp=r&sig=y%2FVkxERZg%2FDpM6DKPKnr39Spn%2BeiQJtTIzP6IowRX3Y%3D)
> - **Compact**: ![The image shows what the Self Help panel looks like when the Compact size filter is selected.](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/SH_CompactSize.png?sv=2026-02-06&spr=https&st=2026-11-10T16%3A31%3A37Z&se=2026-11-10T17%3A31%3A37Z&sr=c&sp=r&sig=y%2FVkxERZg%2FDpM6DKPKnr39Spn%2BeiQJtTIzP6IowRX3Y%3D)

## **Customize the appearance of the Self Help Header**

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

![Self Help Configure Header](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/SH_Header (1).png?sv=2026-02-06&spr=https&st=2026-11-10T16%3A31%3A37Z&se=2026-11-10T17%3A31%3A37Z&sr=c&sp=r&sig=y%2FVkxERZg%2FDpM6DKPKnr39Spn%2BeiQJtTIzP6IowRX3Y%3D)

- **Color**: Configure the header’s color using the color picker or by entering the hex code.
- **Header Text**: Customize the header text.

> [!WARNING]
> Note:
> 
> The **Header Text** can have up to 30 characters.

- **Description**: Customize the description text.

> [!WARNING]
> Note:
> 
> The **Description** can have up to 150 characters.

## **Customize** **the appearance of the Floating Action Button (FAB)**

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

![Self Help Content Creator FAB](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/SH_FAB_Content%20Creator.png?sv=2026-02-06&spr=https&st=2026-11-10T16%3A31%3A37Z&se=2026-11-10T17%3A31%3A37Z&sr=c&sp=r&sig=y%2FVkxERZg%2FDpM6DKPKnr39Spn%2BeiQJtTIzP6IowRX3Y%3D)

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

![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/SH_Style(1).png?sv=2026-02-06&spr=https&st=2026-11-10T16%3A31%3A37Z&se=2026-11-10T17%3A31%3A37Z&sr=c&sp=r&sig=y%2FVkxERZg%2FDpM6DKPKnr39Spn%2BeiQJtTIzP6IowRX3Y%3D)
  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](/studio/docs/rename-the-self-help).

> [!WARNING]
> Note:
> 
> The **Icon Text** can have up to 20 characters.

![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/SH_Fab_Text.png?sv=2026-02-06&spr=https&st=2026-11-10T16%3A31%3A37Z&se=2026-11-10T17%3A31%3A37Z&sr=c&sp=r&sig=y%2FVkxERZg%2FDpM6DKPKnr39Spn%2BeiQJtTIzP6IowRX3Y%3D)
- **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.

![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/SH_Fab.png?sv=2026-02-06&spr=https&st=2026-11-10T16%3A31%3A37Z&se=2026-11-10T17%3A31%3A37Z&sr=c&sp=r&sig=y%2FVkxERZg%2FDpM6DKPKnr39Spn%2BeiQJtTIzP6IowRX3Y%3D)
- **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. ![FAB Corner rounding slider from Square to Round](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/SH_CornerRounding.png?sv=2026-02-06&spr=https&st=2026-11-10T16%3A31%3A37Z&se=2026-11-10T17%3A31%3A37Z&sr=c&sp=r&sig=y%2FVkxERZg%2FDpM6DKPKnr39Spn%2BeiQJtTIzP6IowRX3Y%3D)

> [!WARNING]
> 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. ![FAB Edge spacing slider from Min to Max](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/SH_EdgeSpacing.png?sv=2026-02-06&spr=https&st=2026-11-10T16%3A31%3A37Z&se=2026-11-10T17%3A31%3A37Z&sr=c&sp=r&sig=y%2FVkxERZg%2FDpM6DKPKnr39Spn%2BeiQJtTIzP6IowRX3Y%3D)
- **Color**: Configure the FAB icon’s background color using the color picker or by entering the hex code.

![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/SH_Color.png?sv=2026-02-06&spr=https&st=2026-11-10T16%3A31%3A37Z&se=2026-11-10T17%3A31%3A37Z&sr=c&sp=r&sig=y%2FVkxERZg%2FDpM6DKPKnr39Spn%2BeiQJtTIzP6IowRX3Y%3D)
- **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](/studio/docs/add-an-icon-to-self-help).

![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/SH_Fab_Text(1).png?sv=2026-02-06&spr=https&st=2026-11-10T16%3A31%3A37Z&se=2026-11-10T17%3A31%3A37Z&sr=c&sp=r&sig=y%2FVkxERZg%2FDpM6DKPKnr39Spn%2BeiQJtTIzP6IowRX3Y%3D)
- **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:

![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/SH_Dark_Mode.png?sv=2026-02-06&spr=https&st=2026-11-10T16%3A31%3A37Z&se=2026-11-10T17%3A31%3A37Z&sr=c&sp=r&sig=y%2FVkxERZg%2FDpM6DKPKnr39Spn%2BeiQJtTIzP6IowRX3Y%3D)
  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](/studio/docs/reposition-the-self-help-widget).

![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/SH_Pin_Position.png?sv=2026-02-06&spr=https&st=2026-11-10T16%3A31%3A37Z&se=2026-11-10T17%3A31%3A37Z&sr=c&sp=r&sig=y%2FVkxERZg%2FDpM6DKPKnr39Spn%2BeiQJtTIzP6IowRX3Y%3D)
- **Allow drag-and-drop**: When you enable the **Allow drag-and-drop** toggle, users can move the FAB anywhere on their screen.

![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/SH_Pin_Position(1).png?sv=2026-02-06&spr=https&st=2026-11-10T16%3A31%3A37Z&se=2026-11-10T17%3A31%3A37Z&sr=c&sp=r&sig=y%2FVkxERZg%2FDpM6DKPKnr39Spn%2BeiQJtTIzP6IowRX3Y%3D)

1. After customizing the Improved Self Help widget, click **Save**.

![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/SH_Save(1).png?sv=2026-02-06&spr=https&st=2026-11-10T16%3A31%3A37Z&se=2026-11-10T17%3A31%3A37Z&sr=c&sp=r&sig=y%2FVkxERZg%2FDpM6DKPKnr39Spn%2BeiQJtTIzP6IowRX3Y%3D)

> [!WARNING]
> Note:
> 
> - Preview your changes using [Preview mode](/studio/docs/how-to-use-preview-mode-to-review-content) on Studio before you publish them to users.
> - Whatfix enables you to test Advanced Customization code changes using [Preview Extension](/studio/docs/use-preview-extension-to-test-whatfix-content).
> - After you preview your changes, perform a [Push to Production](/studio/docs/pushing-content-to-production-best-practices) to make them available to users.

## Related

- [Add an icon to Self Help](/add-an-icon-to-self-help.md)
- [Reposition the Self Help Widget](/reposition-the-self-help-widget.md)
- [Self Help Best Practices](/self-help-best-practices.md)