--- title: "Create a Beacon" slug: "create-beacons" updated: 2026-10-19T04:25:41Z published: 2026-10-19T04:25:41Z 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 > [!WARNING] > Note: > > - Whatfix evaluates only one Beacon Collection per page at any given time. To show two or more Beacons on the same page, create them as part of a single Collection. > - Whatfix also enables you to display multiple Beacon Collections on the same page. To enable this feature, contact [**support@whatfix.com**](mailto:support@whatfix.com). 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-11-12T07%3A33%3A24Z&se=2026-11-12T08%3A33%3A24Z&sr=c&sp=r&sig=i1DtrYrgXVVMeYO8%2FVK33bVy6B4BBXQVlMOZIGFNYRI%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-11-12T07%3A33%3A24Z&se=2026-11-12T08%3A33%3A24Z&sr=c&sp=r&sig=i1DtrYrgXVVMeYO8%2FVK33bVy6B4BBXQVlMOZIGFNYRI%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-11-12T07%3A33%3A24Z&se=2026-11-12T08%3A33%3A24Z&sr=c&sp=r&sig=i1DtrYrgXVVMeYO8%2FVK33bVy6B4BBXQVlMOZIGFNYRI%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. > - Add a Display Name to keep internal naming conventions, such as region, release, or module codes, out of the labels that appear to your end users. Users then see the Display Name of the Beacon in shared PDFs and Exports. For more information, see [**Add a Display Name to Whatfix Content**](https://portal.document360.io/studio/docs/add-a-dislay-name-to-whatfix-content). ![The image shows the Collection Name and the Display Name, which can be set while creating content on the Studio.](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Beacon_dispName.png?sv=2026-02-06&spr=https&st=2026-11-12T07%3A33%3A24Z&se=2026-11-12T08%3A33%3A24Z&sr=c&sp=r&sig=i1DtrYrgXVVMeYO8%2FVK33bVy6B4BBXQVlMOZIGFNYRI%3D) 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-11-12T07%3A33%3A24Z&se=2026-11-12T08%3A33%3A24Z&sr=c&sp=r&sig=i1DtrYrgXVVMeYO8%2FVK33bVy6B4BBXQVlMOZIGFNYRI%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-11-12T07%3A33%3A24Z&se=2026-11-12T08%3A33%3A24Z&sr=c&sp=r&sig=i1DtrYrgXVVMeYO8%2FVK33bVy6B4BBXQVlMOZIGFNYRI%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-11-12T07%3A33%3A24Z&se=2026-11-12T08%3A33%3A24Z&sr=c&sp=r&sig=i1DtrYrgXVVMeYO8%2FVK33bVy6B4BBXQVlMOZIGFNYRI%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-11-12T07%3A33%3A24Z&se=2026-11-12T08%3A33%3A24Z&sr=c&sp=r&sig=i1DtrYrgXVVMeYO8%2FVK33bVy6B4BBXQVlMOZIGFNYRI%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-11-12T07%3A33%3A24Z&se=2026-11-12T08%3A33%3A24Z&sr=c&sp=r&sig=i1DtrYrgXVVMeYO8%2FVK33bVy6B4BBXQVlMOZIGFNYRI%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-11-12T07%3A33%3A24Z&se=2026-11-12T08%3A33%3A24Z&sr=c&sp=r&sig=i1DtrYrgXVVMeYO8%2FVK33bVy6B4BBXQVlMOZIGFNYRI%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-11-12T07%3A33%3A24Z&se=2026-11-12T08%3A33%3A24Z&sr=c&sp=r&sig=i1DtrYrgXVVMeYO8%2FVK33bVy6B4BBXQVlMOZIGFNYRI%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-11-12T07%3A33%3A24Z&se=2026-11-12T08%3A33%3A24Z&sr=c&sp=r&sig=i1DtrYrgXVVMeYO8%2FVK33bVy6B4BBXQVlMOZIGFNYRI%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-11-12T07%3A33%3A24Z&se=2026-11-12T08%3A33%3A24Z&sr=c&sp=r&sig=i1DtrYrgXVVMeYO8%2FVK33bVy6B4BBXQVlMOZIGFNYRI%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-11-12T07%3A33%3A24Z&se=2026-11-12T08%3A33%3A24Z&sr=c&sp=r&sig=i1DtrYrgXVVMeYO8%2FVK33bVy6B4BBXQVlMOZIGFNYRI%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-11-12T07%3A33%3A24Z&se=2026-11-12T08%3A33%3A24Z&sr=c&sp=r&sig=i1DtrYrgXVVMeYO8%2FVK33bVy6B4BBXQVlMOZIGFNYRI%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-11-12T07%3A33%3A24Z&se=2026-11-12T08%3A33%3A24Z&sr=c&sp=r&sig=i1DtrYrgXVVMeYO8%2FVK33bVy6B4BBXQVlMOZIGFNYRI%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-11-12T07%3A33%3A24Z&se=2026-11-12T08%3A33%3A24Z&sr=c&sp=r&sig=i1DtrYrgXVVMeYO8%2FVK33bVy6B4BBXQVlMOZIGFNYRI%3D) 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-11-12T07%3A33%3A24Z&se=2026-11-12T08%3A33%3A24Z&sr=c&sp=r&sig=i1DtrYrgXVVMeYO8%2FVK33bVy6B4BBXQVlMOZIGFNYRI%3D) > [!NOTE] > your title goes here > > To add more Beacons, click **+ Add Beacon** on the Studio, and then repeat steps 5 to 13. 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-11-12T07%3A33%3A24Z&se=2026-11-12T08%3A33%3A24Z&sr=c&sp=r&sig=i1DtrYrgXVVMeYO8%2FVK33bVy6B4BBXQVlMOZIGFNYRI%3D) > [!WARNING] > Note > > - Once you have created the Beacon collection, a Collection is automatically created on your Whatfix dashboard. > - To make content like Beacon or Smart Tip display on your page or application, on the Whatfix Dashboard, go to the Content section and move the associated Beacon Collection 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** 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%3A24Z&se=2026-11-12T08%3A33%3A24Z&sr=c&sp=r&sig=i1DtrYrgXVVMeYO8%2FVK33bVy6B4BBXQVlMOZIGFNYRI%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%3A24Z&se=2026-11-12T08%3A33%3A24Z&sr=c&sp=r&sig=i1DtrYrgXVVMeYO8%2FVK33bVy6B4BBXQVlMOZIGFNYRI%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-11-12T07%3A33%3A24Z&se=2026-11-12T08%3A33%3A24Z&sr=c&sp=r&sig=i1DtrYrgXVVMeYO8%2FVK33bVy6B4BBXQVlMOZIGFNYRI%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-11-12T07%3A33%3A24Z&se=2026-11-12T08%3A33%3A24Z&sr=c&sp=r&sig=i1DtrYrgXVVMeYO8%2FVK33bVy6B4BBXQVlMOZIGFNYRI%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-11-12T07%3A33%3A24Z&se=2026-11-12T08%3A33%3A24Z&sr=c&sp=r&sig=i1DtrYrgXVVMeYO8%2FVK33bVy6B4BBXQVlMOZIGFNYRI%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-11-12T07%3A33%3A24Z&se=2026-11-12T08%3A33%3A24Z&sr=c&sp=r&sig=i1DtrYrgXVVMeYO8%2FVK33bVy6B4BBXQVlMOZIGFNYRI%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-11-12T07%3A33%3A24Z&se=2026-11-12T08%3A33%3A24Z&sr=c&sp=r&sig=i1DtrYrgXVVMeYO8%2FVK33bVy6B4BBXQVlMOZIGFNYRI%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-11-12T07%3A33%3A24Z&se=2026-11-12T08%3A33%3A24Z&sr=c&sp=r&sig=i1DtrYrgXVVMeYO8%2FVK33bVy6B4BBXQVlMOZIGFNYRI%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)