--- title: "Customize a Beacon" slug: "customize-beacons" updated: 2026-08-06T15:06:38Z published: 2026-08-06T15:06:38Z canonical: "support.whatfix.com/customize-beacons" --- > ## 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 a Beacon Whatfix enables you to customize a Beacon and the accompanying text to match the style of your application. Customization is done at two levels: - Account level - Beacon level Each Whatfix Beacon has unique properties, such as style and color, distinct from the account-level settings. For example, while all Beacons in your account could be styled as Radial by default, a specific Beacon can be customized to a Custom style to highlight a new update.          Note           The account level configuration for Beacons is available by default. To enable Beacon level configuration, contact [support@whatfix.com](mailto:support@whatfix.com?Subject=Enable%20Beacon%20level%20configuration&Body=Hello%20Team%2C%0A%0APlease%20enable%20Beacon%20level%20configuration%20for%20my%20account.%0A%0AThanks%20and%20regards.). ## Customize Beacons at the account level Use the following steps to customize the Beacon at the account level: 1. On the Whatfix Guidance dashboard, click **Style**. ![ia_left%20nav_style](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/ia_left%20nav_style.png?sv=2026-02-06&spr=https&st=2026-11-12T07%3A33%3A27Z&se=2026-11-12T08%3A33%3A27Z&sr=c&sp=r&sig=PN0kS0I5PqiS5SCgVadSlr6wcHJ2PQemvKEf9mYKPRw%3D) 1. Click **Beacons**. ![widget_beacons](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Click_Beacons_DB.png?sv=2026-02-06&spr=https&st=2026-11-12T07%3A33%3A27Z&se=2026-11-12T08%3A33%3A27Z&sr=c&sp=r&sig=PN0kS0I5PqiS5SCgVadSlr6wcHJ2PQemvKEf9mYKPRw%3D) 2. Edit the Beacon based on the following: - Change the Beacon style - Change the Beacon color using the color picker - Change the tooltip color using the respective color picker ![clm_Beacon_customize](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/clm_Beacon_customize.png?sv=2026-02-06&spr=https&st=2026-11-12T07%3A33%3A27Z&se=2026-11-12T08%3A33%3A27Z&sr=c&sp=r&sig=PN0kS0I5PqiS5SCgVadSlr6wcHJ2PQemvKEf9mYKPRw%3D) 1. Click **Save**.          your title goes here           For these changes to reflect for your end users, you must do a [push to Production](/studio/docs/pushing-whatfix-content-to-production). --- ## Customize Beacons at the Beacon level Use the following steps to customize a particular Beacon: 1. On the Whatfix Guidance dashboard, click **Content**. ![ia_left_nav_content](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/ia_left_nav_content.png?sv=2026-02-06&spr=https&st=2026-11-12T07%3A33%3A27Z&se=2026-11-12T08%3A33%3A27Z&sr=c&sp=r&sig=PN0kS0I5PqiS5SCgVadSlr6wcHJ2PQemvKEf9mYKPRw%3D) 2. Click **Beacons**. ![ia_left%20nav_beacons](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/ia_left%20nav_beacons.png?sv=2026-02-06&spr=https&st=2026-11-12T07%3A33%3A27Z&se=2026-11-12T08%3A33%3A27Z&sr=c&sp=r&sig=PN0kS0I5PqiS5SCgVadSlr6wcHJ2PQemvKEf9mYKPRw%3D) 3. Hover your cursor over the Beacon collection you want to edit, and then click the **Edit** icon. ![db_beacon_edit](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/db_beacon_edit.png?sv=2026-02-06&spr=https&st=2026-11-12T07%3A33%3A27Z&se=2026-11-12T08%3A33%3A27Z&sr=c&sp=r&sig=PN0kS0I5PqiS5SCgVadSlr6wcHJ2PQemvKEf9mYKPRw%3D) 1. On the Beacon you want to customize, click **Launch live edit**. ![DB_Beacon_launchliveedit](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/DB_Beacon_launchliveedit.png?sv=2026-02-06&spr=https&st=2026-11-12T07%3A33%3A27Z&se=2026-11-12T08%3A33%3A27Z&sr=c&sp=r&sig=PN0kS0I5PqiS5SCgVadSlr6wcHJ2PQemvKEf9mYKPRw%3D) 2. Go to the Beacon that you want to customize and click **Edit step**. ![Studio_Beaconlevel_Editsteps.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Studio_Beaconlevel_Editsteps.png?sv=2026-02-06&spr=https&st=2026-11-12T07%3A33%3A27Z&se=2026-11-12T08%3A33%3A27Z&sr=c&sp=r&sig=PN0kS0I5PqiS5SCgVadSlr6wcHJ2PQemvKEf9mYKPRw%3D)          Note:           - By default, the Beacon color is red. - To change the Beacon color, go to **CONFIGURATIONS** and then select a **Beacon color**. Choose from the existing color palette or enter the hex code of the desired color. You can also select the **Type** or **Size** of the Beacon. ![Studio_Beacons_Becaonlevel_appearance.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Studio_Beacons_Becaonlevel_appearance.png?sv=2026-02-06&spr=https&st=2026-11-12T07%3A33%3A27Z&se=2026-11-12T08%3A33%3A27Z&sr=c&sp=r&sig=PN0kS0I5PqiS5SCgVadSlr6wcHJ2PQemvKEf9mYKPRw%3D) 1. Click **Save**. ![Studio_Beaconlevel_SaveEdits.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Studio_Beaconlevel_SaveEdits.png?sv=2026-02-06&spr=https&st=2026-11-12T07%3A33%3A27Z&se=2026-11-12T08%3A33%3A27Z&sr=c&sp=r&sig=PN0kS0I5PqiS5SCgVadSlr6wcHJ2PQemvKEf9mYKPRw%3D)          Note           - Customize Beacons during creation. For more information, see [Create Beacons](/studio/docs/create-beacons). - For these changes to reflect for your end users, you must [push your edited Beacon to Production](/studio/docs/pushing-whatfix-content-to-production). ## Related - [Beacon does not show up on the chosen position](/beacon-isnt-showing-up-on-the-chosen-position.md) - [Beacon does not display in preview mode](/beacon-not-displaying-in-preview-mode.md)