--- title: "Create a Beacon" slug: "create-beacons" updated: 2026-08-11T06:05:25Z published: 2026-08-11T06:05:25Z canonical: "support.whatfix.com/create-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. # Create a Beacon Whatfix enables you to create Beacons using the Whatfix Studio. Expand the following sections to learn how to create, configure, and manage Beacons: **Step 1: Create the Beacon** Use the following steps to create a Beacon collection: 1. Log in to the application where you want to create content, and then launch **Whatfix Studio**. ![CLM_editor plug in2](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/CLM_editor%20plug%20in%282%29.png?sv=2026-02-06&spr=https&st=2026-10-15T07%3A53%3A13Z&se=2026-10-15T08%3A53%3A13Z&sr=c&sp=r&sig=jGjcAUet%2BXC8fA%2BicEDSS8na019dhSkJeSgPqx8zpzs%3D) 2. On Whatfix Studio, click **Beacon**. ![clm_studio_beacon](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/clm_studio_beacon.png?sv=2026-02-06&spr=https&st=2026-10-15T07%3A53%3A13Z&se=2026-10-15T08%3A53%3A13Z&sr=c&sp=r&sig=jGjcAUet%2BXC8fA%2BicEDSS8na019dhSkJeSgPqx8zpzs%3D) 3. Enter a name for the Beacon Collection. ![Enter_Beacon_Name](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Enter_Beacon_Name.png?sv=2026-02-06&spr=https&st=2026-10-15T07%3A53%3A13Z&se=2026-10-15T08%3A53%3A13Z&sr=c&sp=r&sig=jGjcAUet%2BXC8fA%2BicEDSS8na019dhSkJeSgPqx8zpzs%3D) > [!NOTE] > Info > > - A Beacon collection is a group of Beacons and are usually on the same page. > - The Beacon collection name is solely for your (creator's) reference and is not visible to the end-user. > - Visibility Rules are defined for a Beacon collection. So even if you have only one Beacon on a page, it needs to be part of a collection. 1. Click **+ Add Beacon** to create a new Beacon. ![Add_Beacon](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Add_Beacon.png?sv=2026-02-06&spr=https&st=2026-10-15T07%3A53%3A13Z&se=2026-10-15T08%3A53%3A13Z&sr=c&sp=r&sig=jGjcAUet%2BXC8fA%2BicEDSS8na019dhSkJeSgPqx8zpzs%3D) 2. Select an element on the application where the Beacon must appear. 3. Enter a description for the Beacon action. ![RB_DB_beaconaction](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/RB_DB_beaconaction.png?sv=2026-02-06&spr=https&st=2026-10-15T07%3A53%3A13Z&se=2026-10-15T08%3A53%3A13Z&sr=c&sp=r&sig=jGjcAUet%2BXC8fA%2BicEDSS8na019dhSkJeSgPqx8zpzs%3D) > [!NOTE] > Info > > The Beacon description is visible to the end user when they hover their cursor over the Beacon. 1. On Studio, enter the name of the Beacon. ![Enter_beaconname](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Enter_beaconname.png?sv=2026-02-06&spr=https&st=2026-10-15T07%3A53%3A13Z&se=2026-10-15T08%3A53%3A13Z&sr=c&sp=r&sig=jGjcAUet%2BXC8fA%2BicEDSS8na019dhSkJeSgPqx8zpzs%3D) > [!NOTE] > Info > > The Beacon name is solely for your (creator's) reference and not visible to the end user. 1. In the **CONFIGURATIONS** tab, expand **Interaction**, and then, under the **Disappear Beacon** section, select the condition to stop displaying the Beacon. ![Disappear_Beacon](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Disappear_Beacon.png?sv=2026-02-06&spr=https&st=2026-10-15T07%3A53%3A13Z&se=2026-10-15T08%3A53%3A13Z&sr=c&sp=r&sig=jGjcAUet%2BXC8fA%2BicEDSS8na019dhSkJeSgPqx8zpzs%3D) 2. Expand **Appearance**, under the **Tooltip** section, make the following changes: - Change the tip **Color** using the color picker or enter the hex code in the text box. - Customize the style, color, and size of the text of the Beacon Tooltip. ![Config_beaconappearance](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Config_beaconappearance.png?sv=2026-02-06&spr=https&st=2026-10-15T07%3A53%3A13Z&se=2026-10-15T08%3A53%3A13Z&sr=c&sp=r&sig=jGjcAUet%2BXC8fA%2BicEDSS8na019dhSkJeSgPqx8zpzs%3D) 1. Under the **Icon** section, select the **Type**, **Color**, and **Size** of the icon. ![Configure_beaconicon](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Configure_beaconicon.png?sv=2026-02-06&spr=https&st=2026-10-15T07%3A53%3A13Z&se=2026-10-15T08%3A53%3A13Z&sr=c&sp=r&sig=jGjcAUet%2BXC8fA%2BicEDSS8na019dhSkJeSgPqx8zpzs%3D) > [!WARNING] > your title goes here > > - By default, Whatfix provides four types of icons for a Beacon, that is, Custom, Radial, Ripple, and Speckle. ![Beacon_type](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Beacon_type.png?sv=2026-02-06&spr=https&st=2026-10-15T07%3A53%3A13Z&se=2026-10-15T08%3A53%3A13Z&sr=c&sp=r&sig=jGjcAUet%2BXC8fA%2BicEDSS8na019dhSkJeSgPqx8zpzs%3D) > - Select the **Custom** icon to configure the **Text** of your Beacon. ![Custom_icon](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Custom_icon.png?sv=2026-02-06&spr=https&st=2026-10-15T07%3A53%3A13Z&se=2026-10-15T08%3A53%3A13Z&sr=c&sp=r&sig=jGjcAUet%2BXC8fA%2BicEDSS8na019dhSkJeSgPqx8zpzs%3D) > - You cannot change the size of the **Custom** icon. > - Whatfix enables you to add custom icons for Beacons. To add custom icons, see [Use custom icons for Beacon](/studio/docs/change-the-icon-for-beacon). > [!NOTE] > Note > > Once you start selecting the element to place the Beacon, your cursor changes to the set Beacon style. Then, place the Beacon to any desired position. > > ![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Beacon%20style%281%29.gif?sv=2026-02-06&spr=https&st=2026-10-15T07%3A53%3A13Z&se=2026-10-15T08%3A53%3A13Z&sr=c&sp=r&sig=jGjcAUet%2BXC8fA%2BicEDSS8na019dhSkJeSgPqx8zpzs%3D) 1. Expand **Positioning** and adjust the position of the Beacon. ![Beacon_position](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Beacon_position.png?sv=2026-02-06&spr=https&st=2026-10-15T07%3A53%3A13Z&se=2026-10-15T08%3A53%3A13Z&sr=c&sp=r&sig=jGjcAUet%2BXC8fA%2BicEDSS8na019dhSkJeSgPqx8zpzs%3D) > [!WARNING] > your title goes here > > There are two different positioning modes, > > - In the **Basic Positioning mode**, you can choose among the 8 available positions. ![clm_beacon_basic positioning](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/clm_beacon_basic%20positioning.png?sv=2026-02-06&spr=https&st=2026-10-15T07%3A53%3A13Z&se=2026-10-15T08%3A53%3A13Z&sr=c&sp=r&sig=jGjcAUet%2BXC8fA%2BicEDSS8na019dhSkJeSgPqx8zpzs%3D) > - In the **Advanced Positioning mode**, you can adjust the position of the Beacon by pixel. Either use the navigational arrows or enter the value in the **Movement on key click(px)** dropdown to change the position by pixels. > - Click the **Lock** icon to unlock and reposition the Beacon. ![Advanced_positioning](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Advanced_positioning.png?sv=2026-02-06&spr=https&st=2026-10-15T07%3A53%3A13Z&se=2026-10-15T08%3A53%3A13Z&sr=c&sp=r&sig=jGjcAUet%2BXC8fA%2BicEDSS8na019dhSkJeSgPqx8zpzs%3D) 1. In the **Tooltip Position** section, choose the position of the tooltip. ![clm_beacon_tooltip position](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/clm_beacon_tooltip%20position.png?sv=2026-02-06&spr=https&st=2026-10-15T07%3A53%3A13Z&se=2026-10-15T08%3A53%3A13Z&sr=c&sp=r&sig=jGjcAUet%2BXC8fA%2BicEDSS8na019dhSkJeSgPqx8zpzs%3D) > [!WARNING] > your title goes here > > [Display Rules](/studio/docs/visibility-and-display-rule-conditions-1) enable you to configure Beacons to display the tooltip only when pre-determined conditions are met. > > Use the following steps to add Display Rules to a Beacon: > > a. Click **ADVANCED OPTIONS**. ![Click_Advanced_Options](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Click_Advanced_Options.png?sv=2026-02-06&spr=https&st=2026-10-15T07%3A53%3A13Z&se=2026-10-15T08%3A53%3A13Z&sr=c&sp=r&sig=jGjcAUet%2BXC8fA%2BicEDSS8na019dhSkJeSgPqx8zpzs%3D) > > b. Expand the Display Rules section and then click **+ Add Rule**. ![Click_Add_rule](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Click_Add_rul.png?sv=2026-02-06&spr=https&st=2026-10-15T07%3A53%3A13Z&se=2026-10-15T08%3A53%3A13Z&sr=c&sp=r&sig=jGjcAUet%2BXC8fA%2BicEDSS8na019dhSkJeSgPqx8zpzs%3D) > > c. Set the desired conditions. For more information on the different conditions that can be used in Display Rules, see [Visibility and Display Rule Conditions](/studio/docs/visibility-and-display-rule-conditions-1). ![image.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/image%28326%29.png?sv=2026-02-06&spr=https&st=2026-10-15T07%3A53%3A13Z&se=2026-10-15T08%3A53%3A13Z&sr=c&sp=r&sig=jGjcAUet%2BXC8fA%2BicEDSS8na019dhSkJeSgPqx8zpzs%3D) > > Additional conditions can be added using **+ Add Rule**, if needed. 1. Click **Save Beacon**. ![save beacon](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/save%20beacon.png?sv=2026-02-06&spr=https&st=2026-10-15T07%3A53%3A13Z&se=2026-10-15T08%3A53%3A13Z&sr=c&sp=r&sig=jGjcAUet%2BXC8fA%2BicEDSS8na019dhSkJeSgPqx8zpzs%3D) > [!NOTE] > your title goes here > > To add more Beacons, click **+ Add Beacon** on the Studio, and then repeat steps 5 to 11. 1. To save the Beacon collection, click **Save Beacon**. ![RB_beacon_clicksavebeacon](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/RB_beacon_clicksavebeacon.png?sv=2026-02-06&spr=https&st=2026-10-15T07%3A53%3A13Z&se=2026-10-15T08%3A53%3A13Z&sr=c&sp=r&sig=jGjcAUet%2BXC8fA%2BicEDSS8na019dhSkJeSgPqx8zpzs%3D) > [!WARNING] > Note > > - Once you have created the Beacon collection, a segment is automatically created on your Whatfix dashboard. > - To make content like Beacon or Smart Tip display on your page/ application, on the Whatfix Dashboard, go to the Widget section and move the associated Beacon segment from Draft to Production. > [!NOTE] > Info: > > Edit a Beacon inside a collection during the Beacon creation process. For more information, see [Edit Beacons](/studio/docs/edit-beacons). **Step 2: Configure the Visibility Rules for the Beacon (If you are on the New Unified Dashboard Experience)** 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-10-15T07%3A53%3A13Z&se=2026-10-15T08%3A53%3A13Z&sr=c&sp=r&sig=jGjcAUet%2BXC8fA%2BicEDSS8na019dhSkJeSgPqx8zpzs%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-10-15T07%3A53%3A13Z&se=2026-10-15T08%3A53%3A13Z&sr=c&sp=r&sig=jGjcAUet%2BXC8fA%2BicEDSS8na019dhSkJeSgPqx8zpzs%3D) 1. Hover your cursor over the Beacon collection you want to configure, and then click **Edit**. ![Image](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/image-9II7CORP.png?sv=2026-02-06&spr=https&st=2026-10-15T07%3A53%3A13Z&se=2026-10-15T08%3A53%3A13Z&sr=c&sp=r&sig=jGjcAUet%2BXC8fA%2BicEDSS8na019dhSkJeSgPqx8zpzs%3D) 2. Click **Collection Visibility**. ![Image](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/image-KC932NR0.png?sv=2026-02-06&spr=https&st=2026-10-15T07%3A53%3A13Z&se=2026-10-15T08%3A53%3A13Z&sr=c&sp=r&sig=jGjcAUet%2BXC8fA%2BicEDSS8na019dhSkJeSgPqx8zpzs%3D) 3. Expand **Where does the beacons colection Rules appear?** section, and configure URL and Page tags. For more information, see [Set Where your Widget or Content appears](/studio/docs/set-where-your-widget-appears). ![Image](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/image-EI1HA2MQ.png?sv=2026-02-06&spr=https&st=2026-10-15T07%3A53%3A13Z&se=2026-10-15T08%3A53%3A13Z&sr=c&sp=r&sig=jGjcAUet%2BXC8fA%2BicEDSS8na019dhSkJeSgPqx8zpzs%3D) 4. Expand **When does the beacons collection Rules start and stop appearing?** section, and configure configure when you want to start showing your widget. For more information, see [Set When your Content appears](https://support.whatfix.com/studio/docs/set-when-your-widget-appears-using-visiblity-rules-20) ![Image](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/image-JS0G0J2V.png?sv=2026-02-06&spr=https&st=2026-10-15T07%3A53%3A13Z&se=2026-10-15T08%3A53%3A13Z&sr=c&sp=r&sig=jGjcAUet%2BXC8fA%2BicEDSS8na019dhSkJeSgPqx8zpzs%3D) 5. Expand **Who does the beacons collection Rules appear to?** section, and configure who you want to show your content to. For more information, see [Set Who can see your Widget](/studio/docs/set-who-can-see-your-widget). ![Image](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/image-BDSQTJRX.png?sv=2026-02-06&spr=https&st=2026-10-15T07%3A53%3A13Z&se=2026-10-15T08%3A53%3A13Z&sr=c&sp=r&sig=jGjcAUet%2BXC8fA%2BicEDSS8na019dhSkJeSgPqx8zpzs%3D) 6. Click **Save**. ![Image](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/image-7SUR242F.png?sv=2026-02-06&spr=https&st=2026-10-15T07%3A53%3A13Z&se=2026-10-15T08%3A53%3A13Z&sr=c&sp=r&sig=jGjcAUet%2BXC8fA%2BicEDSS8na019dhSkJeSgPqx8zpzs%3D) **Step 2: Configure the Visibility Rules for the Beacon (Old Experience)** > [!WARNING] > Note: > > If your account is Smart Context enabled, then Whatfix automatically configures the Visibility Rules. In that case, skip to step 7. Use the following steps to configure a Beacon segment: 1. On the Whatfix Guidance dashboard, click **Widgets**. ![ia_left_nav_widgets](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/ia_left_nav_widgets.png?sv=2026-02-06&spr=https&st=2026-10-15T07%3A53%3A13Z&se=2026-10-15T08%3A53%3A13Z&sr=c&sp=r&sig=jGjcAUet%2BXC8fA%2BicEDSS8na019dhSkJeSgPqx8zpzs%3D) 2. Click **Beacons**. ![ia_widget_beacons](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/ia_widget_beacons.png?sv=2026-02-06&spr=https&st=2026-10-15T07%3A53%3A13Z&se=2026-10-15T08%3A53%3A13Z&sr=c&sp=r&sig=jGjcAUet%2BXC8fA%2BicEDSS8na019dhSkJeSgPqx8zpzs%3D) 1. In the **Draft** stage, hover your cursor over the auto-created segment, 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-10-15T07%3A53%3A13Z&se=2026-10-15T08%3A53%3A13Z&sr=c&sp=r&sig=jGjcAUet%2BXC8fA%2BicEDSS8na019dhSkJeSgPqx8zpzs%3D) > [!NOTE] > Info > > The Beacon collection that is attached is the newly published content. 1. Expand the **Set Visibility Rules** section and configure your Visibility Rules that determine how the Beacon collection is displayed to the end user. ![RB_DB_beacon_setvisibilityrules](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/RB_DB_beacon_setvisibilityrules.png?sv=2026-02-06&spr=https&st=2026-10-15T07%3A53%3A13Z&se=2026-10-15T08%3A53%3A13Z&sr=c&sp=r&sig=jGjcAUet%2BXC8fA%2BicEDSS8na019dhSkJeSgPqx8zpzs%3D) > [!WARNING] > Note > > For more information on the different conditions that can be used in Visibility Rules, see [Visibility and display rule conditions](/studio/docs/visibility-and-display-rule-conditions). 1. Click the **When** tab, and then select the number of times you want to show the Beacon. ![RB_DB_Whentab(1)](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/RB_DB_Whentab%281%29.png?sv=2026-02-06&spr=https&st=2026-10-15T07%3A53%3A13Z&se=2026-10-15T08%3A53%3A13Z&sr=c&sp=r&sig=jGjcAUet%2BXC8fA%2BicEDSS8na019dhSkJeSgPqx8zpzs%3D) > [!WARNING] > Note > > - A Flow, Video, or Link can be attached to a Beacon. > - To attach content to a Beacon, expand the attach content section, click **Attach Content**, and then select any content that you want to display to your users. ![attach content](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/attach%20content.png?sv=2026-02-06&spr=https&st=2026-10-15T07%3A53%3A13Z&se=2026-10-15T08%3A53%3A13Z&sr=c&sp=r&sig=jGjcAUet%2BXC8fA%2BicEDSS8na019dhSkJeSgPqx8zpzs%3D) > - The attached content is displayed based on the Disappearance of Beacon setting you configured while creating it. 1. Click **Save**. > [!NOTE] > Info > > - The Beacon stops displaying once the end user clicks it. > - To show the Beacon again, you can refresh the Beacon segment or re-create it. > - If Beacons are to be used for multiple pages, separate segments need to be created for each individual page. > - Subsequent changes to the Beacon collection do not update the corresponding segment. 1. Once you are done creating the Beacon collection, select the segment, and then click **Send to ready**. ![clm_db_send_to_ready](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/clm_db_send_to_ready.png?sv=2026-02-06&spr=https&st=2026-10-15T07%3A53%3A13Z&se=2026-10-15T08%3A53%3A13Z&sr=c&sp=r&sig=jGjcAUet%2BXC8fA%2BicEDSS8na019dhSkJeSgPqx8zpzs%3D) 2. Go to the **Ready** stage and select the segment you want to move to the Production stage, and then click **Push to production**. ![clm_db_push_to_production](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/clm_db_push_to_production.png?sv=2026-02-06&spr=https&st=2026-10-15T07%3A53%3A13Z&se=2026-10-15T08%3A53%3A13Z&sr=c&sp=r&sig=jGjcAUet%2BXC8fA%2BicEDSS8na019dhSkJeSgPqx8zpzs%3D) Note: If you're using the [JS Embed method](/studio/docs/integrating-whatfix-using-javascript) to test or publish Whatfix content, add the relevant conditions in Map Stages. This ensures that the content appears in the correct instance. For more information, see [How to add conditions in Map Stages?](/studio/docs/how-are-the-visibility-rules-evaluated-while-mapping-stages) (Log in to see the article) ## Related - [Beacons Best Practices](/beacons-best-practices.md)