--- title: "Customize the appearance of Self Help" slug: "appearance-and-orientation-of-self-help" updated: 2025-11-06T06:33:06Z published: 2025-11-06T06:33:06Z --- > ## 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 enable Improved Self Help 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 customize the appearance of the Improved Self Help widget. Configure the visual and layout aspects of the widget. ![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/SH_Style.png) > [!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, click **Style**. ![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/ia_left nav_style.png) 2. Click **Self Help**. ![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/styles_sh.png) 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 it’s open state. ![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/SH_Style.png) - **Mode:** Enable the **Mode** toggle. Choose between **Light** and **Dark** modes to adjust the widget’s background appearance. ![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/SH_Panel_mode.png) - **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**, with **Regular** set as default. ![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/SH_Corner_radius.png) - **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) - **Spacing**: Set the spacing between the content in the Improved Self Help widget. The available options are **Compact** (4px), **Regular** (8px), and **Relaxed** (12px), with **Regular** set as default. ![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/SH_Spacing.png) ## **Customize the appearance of the Self Help Header** Customize the **Header** of the Improved Self Help widget in it’s open state. ![Self Help Configure Header](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/SH_Header (1).png) - **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 25 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 **FAB** of the Improved Self Help widget in it’s closed state. ![Self Help Content Creator FAB](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/SH_FAB_Content%20Creator.png) - **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) 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. - **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) - **Size**: Set the size of the FAB icon. The default size is a maximum of 56x56 px. ![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/SH_Fab.png) - **Icon**: Change the FAB icon. Five predefined icon options are available, with the **Bulb** icon set as the default for the Improved Self Help widget. You can also upload custom icons using the **Plus** icon. The icons must be in PNG or SVG formats. The file size should not exceed 25 KB, and 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) - **Icon Text**: Customize the FAB icon text. This changes the text that appears when you hover your cursor over 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 15 characters. ![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/SH_Fab_Text.png) - **Text and Icon color**: Configure how Self Help text and the FAB icon appear when a background color is selected. 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) 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 FAB. Choose one of the 12 available position options. FAB appears in this position for all end users. However, you can allow end users to change the position of FAB by enabling them to drag and drop it to their preferred location. To do this, 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) - **Allow drag-and-drop**: Enable or disable the drag and drop toggle. This enables end users to freely move the FAB icon anywhere on their screen. ![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/SH_Pin_Position(1).png) 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) > [!WARNING] > Note: > > - Preview the changes made using the [Preview mode](/studio/docs/how-to-use-preview-mode-to-review-content) on Studio before publishing the content and making it available for your end users. > - Additionally, Whatfix enables you to test Advanced Customization code changes using [Preview Extension](/studio/docs/use-preview-extension-to-test-whatfix-content). > - Once previewed, you must perform a [Push to Production](/studio/docs/pushing-content-to-production-best-practices) for these changes to reflect for your end 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)