--- title: "Create a Beacon" slug: "create-a-beacon" updated: 2026-08-06T15:17:17Z published: 2026-08-06T15:17:17Z canonical: "support.whatfix.com/create-a-beacon" --- > ## 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 Beacon creation is a two-step process: [Step 1: Create the Beacon](/desktop/docs/create-a-beacon#Step-Create-the-Beacon) [Step 2: Configure the segment for the Beacon](/desktop/docs/create-a-beacon#Step-Configure-the-segment-for-the-Beacon) ## Step 1: Create the Beacon Use the following steps to create a Beacon collection: 1. Go to the target application where you want to create a Beacon, and then Launch the **Whatfix Studio**. 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-12T08%3A27%3A34Z&se=2026-11-12T09%3A27%3A34Z&sr=c&sp=r&sig=egqYttIwlOdwXn26rnfAOy6DOJ%2F2SGzy2ITmpm3tHMI%3D) 3. Enter a name for the Beacon Collection. ![beacon collection name](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/beacon%20collection%20name.png?sv=2026-02-06&spr=https&st=2026-11-12T08%3A27%3A34Z&se=2026-11-12T09%3A27%3A34Z&sr=c&sp=r&sig=egqYttIwlOdwXn26rnfAOy6DOJ%2F2SGzy2ITmpm3tHMI%3D)          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%20beacon.png?sv=2026-02-06&spr=https&st=2026-11-12T08%3A27%3A34Z&se=2026-11-12T09%3A27%3A34Z&sr=c&sp=r&sig=egqYttIwlOdwXn26rnfAOy6DOJ%2F2SGzy2ITmpm3tHMI%3D) 2. Select an element on the application where the Beacon must appear. 3. In the **CONFIGURATIONS** tab, under the **Beacon style** section, choose the style and color of the Beacon. ![Clm_Beacon_style](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Clm_Beacon_style.png?sv=2026-02-06&spr=https&st=2026-11-12T08%3A27%3A34Z&se=2026-11-12T09%3A27%3A34Z&sr=c&sp=r&sig=egqYttIwlOdwXn26rnfAOy6DOJ%2F2SGzy2ITmpm3tHMI%3D)          Note           Select the **Custom** style to configure the text of your Beacon. ![clm_Beacon_text](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/clm_Beacon_text.png?sv=2026-02-06&spr=https&st=2026-11-12T08%3A27%3A34Z&se=2026-11-12T09%3A27%3A34Z&sr=c&sp=r&sig=egqYttIwlOdwXn26rnfAOy6DOJ%2F2SGzy2ITmpm3tHMI%3D) 1. Under the **Positioning** section, adjust the position of the Beacon. ![clm_smart tip_basic positioning](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/clm_smart%20tip_basic%20positioning.png?sv=2026-02-06&spr=https&st=2026-11-12T08%3A27%3A34Z&se=2026-11-12T09%3A27%3A34Z&sr=c&sp=r&sig=egqYttIwlOdwXn26rnfAOy6DOJ%2F2SGzy2ITmpm3tHMI%3D)          your title goes here           There are two different positioning modes, - In the **Basic Positioning mode**, 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-12T08%3A27%3A34Z&se=2026-11-12T09%3A27%3A34Z&sr=c&sp=r&sig=egqYttIwlOdwXn26rnfAOy6DOJ%2F2SGzy2ITmpm3tHMI%3D) - In the **Advanced Positioning mode**, 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. ![clm_beacon_advanced positioning](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/clm_beacon_advanced%20positioning.png?sv=2026-02-06&spr=https&st=2026-11-12T08%3A27%3A34Z&se=2026-11-12T09%3A27%3A34Z&sr=c&sp=r&sig=egqYttIwlOdwXn26rnfAOy6DOJ%2F2SGzy2ITmpm3tHMI%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-12T08%3A27%3A34Z&se=2026-11-12T09%3A27%3A34Z&sr=c&sp=r&sig=egqYttIwlOdwXn26rnfAOy6DOJ%2F2SGzy2ITmpm3tHMI%3D) 2. Enter the name of the Beacon. ![beacon name](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/beacon%20name.png?sv=2026-02-06&spr=https&st=2026-11-12T08%3A27%3A34Z&se=2026-11-12T09%3A27%3A34Z&sr=c&sp=r&sig=egqYttIwlOdwXn26rnfAOy6DOJ%2F2SGzy2ITmpm3tHMI%3D)          Info           The Beacon name is solely for your (creator's) reference and not visible to the end user. 1. 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-12T08%3A27%3A34Z&se=2026-11-12T09%3A27%3A34Z&sr=c&sp=r&sig=egqYttIwlOdwXn26rnfAOy6DOJ%2F2SGzy2ITmpm3tHMI%3D)          Info           The Beacon description is visible to the end user when they hover their cursor over the Beacon. 1. Set the condition to stop displaying the Beacon. ![disappearance of beacon](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/disappearance%20of%20beacon.png?sv=2026-02-06&spr=https&st=2026-11-12T08%3A27%3A34Z&se=2026-11-12T09%3A27%3A34Z&sr=c&sp=r&sig=egqYttIwlOdwXn26rnfAOy6DOJ%2F2SGzy2ITmpm3tHMI%3D) 2. 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-12T08%3A27%3A34Z&se=2026-11-12T09%3A27%3A34Z&sr=c&sp=r&sig=egqYttIwlOdwXn26rnfAOy6DOJ%2F2SGzy2ITmpm3tHMI%3D)          your title goes here           To add more Beacons, click **+ Add Beacon** on the Studio, and then repeat steps 4 to 12. 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-12T08%3A27%3A34Z&se=2026-11-12T09%3A27%3A34Z&sr=c&sp=r&sig=egqYttIwlOdwXn26rnfAOy6DOJ%2F2SGzy2ITmpm3tHMI%3D)          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. ## Step 2: Configure the segment for the Beacon 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-11-12T08%3A27%3A34Z&se=2026-11-12T09%3A27%3A34Z&sr=c&sp=r&sig=egqYttIwlOdwXn26rnfAOy6DOJ%2F2SGzy2ITmpm3tHMI%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-11-12T08%3A27%3A34Z&se=2026-11-12T09%3A27%3A34Z&sr=c&sp=r&sig=egqYttIwlOdwXn26rnfAOy6DOJ%2F2SGzy2ITmpm3tHMI%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-11-12T08%3A27%3A34Z&se=2026-11-12T09%3A27%3A34Z&sr=c&sp=r&sig=egqYttIwlOdwXn26rnfAOy6DOJ%2F2SGzy2ITmpm3tHMI%3D)          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-11-12T08%3A27%3A34Z&se=2026-11-12T09%3A27%3A34Z&sr=c&sp=r&sig=egqYttIwlOdwXn26rnfAOy6DOJ%2F2SGzy2ITmpm3tHMI%3D)          Note           For more information on the different conditions that can be used in Visibility Rules, see [Visibility and display rule conditions](/desktop/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_Whentab1](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-11-12T08%3A27%3A34Z&se=2026-11-12T09%3A27%3A34Z&sr=c&sp=r&sig=egqYttIwlOdwXn26rnfAOy6DOJ%2F2SGzy2ITmpm3tHMI%3D)          Note           - Attach a Flow, Video, or Link 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-11-12T08%3A27%3A34Z&se=2026-11-12T09%3A27%3A34Z&sr=c&sp=r&sig=egqYttIwlOdwXn26rnfAOy6DOJ%2F2SGzy2ITmpm3tHMI%3D) - The attached content is displayed based on the Disappearance of Beacon setting you configured while creating it. 1. Click **Save**.          Info           - The Beacon stops displaying once the end user clicks it. - To show the Beacon again, refresh the Beacon segment or re-create it. 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-11-12T08%3A27%3A34Z&se=2026-11-12T09%3A27%3A34Z&sr=c&sp=r&sig=egqYttIwlOdwXn26rnfAOy6DOJ%2F2SGzy2ITmpm3tHMI%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-11-12T08%3A27%3A34Z&se=2026-11-12T09%3A27%3A34Z&sr=c&sp=r&sig=egqYttIwlOdwXn26rnfAOy6DOJ%2F2SGzy2ITmpm3tHMI%3D)          your title goes here           Only one Beacon segment can be shown per page. To enable multiple Beacon segments to show on a single page, contact [support@whatfix.com](mailto:support@whatfix.com?subject=Enable%20multiple%20Beacon%20segments%20on%20the%20same%20page&body=Hi%20team%2C%0A%0APlease%20enable%20multiple%20Beacon%20segments%20on%20the%20same%20page%20on%20the%20following%20account%3A%0A%0AENT%20ID%3A%20%0A%0ARegards%2C%0A).