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

:::(Warning) (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.){target="_blank"}.
:::

## Customize Beacons at the account level
Use the following steps to customize the Beacon at the account level:

{{snippet.click_themes}}


2. Click **Beacons**.
![widget_beacons](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Click_Beacons_DB.png){height="" width="500"}


3. 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){height="" width="700"}

4. Click **Save**.

:::(Info) (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){target=`_blank`}.
:::

**** 
## Customize Beacons at the Beacon level
Use the following steps to customize a particular Beacon:

{{snippet.beacons_content_edit}}

4. 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){height="" width="500"}

5. 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){height="" width=""}

:::(Warning) (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){height="" width="500"}
:::

6. Click **Save**.
![Studio_Beaconlevel_SaveEdits.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Studio_Beaconlevel_SaveEdits.png){height="" width="500"}

:::(Warning) (Note)
* Customize Beacons during creation. For more information, see [Create Beacons](/studio/docs/create-beacons){target="_blank"}.
* For these changes to reflect for your end users, you must [push your edited Beacon to Production](/studio/docs/pushing-whatfix-content-to-production){target=`_blank`}.
:::

## 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)