--- title: "Add a Beacon to an existing Beacon Collection" slug: "add-a-beacon-to-an-existing-beacon-collection" updated: 2024-10-08T12:59:42Z published: 2024-10-08T12:59:42Z --- > ## 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. # Add a Beacon to an existing Beacon Collection Note Whatfix, by default, evaluates only one Beacon collection per page at any given time. To enable this feature, contact [support@whatfix.com](mailto:support@whatfix.com?Subject=Enable%20adding%20a%20Beacon%20to%20an%20existing%20Beacon&Body=Hello%20Team%2C%0A%0APlease%20enable%20adding%20a%20Beacon%20to%20an%20existing%20Beacon%20for%20my%20account.%0A%0AThanks%20and%20regards.). Use the following steps to add a Beacon to an existing Beacon Collection: 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) 2. Click **Beacons**. ![ia_left%20nav_beacons](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/ia_left%20nav_beacons.png) 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) 1. Click **Launch live edit**. ![RB_DB_beacon_launchliveedit](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/RB_DB_beacon_launchliveedit.png) 2. Once the Studio launches in your application, click **+ Add Beacon**. ![add beacon](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/add%20beacon.png) 3. Select an element on the application where you want the Beacon to appear. 4. Enter the name of the Beacon. ![Enter_beaconname](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Enter_beaconname.png) Info The Beacon name is solely for your (creator's) reference and not visible to the end user. 1. Enter the description for the Beacon **Step action**. ![Describe beacon](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Describe%20beacon.png) Info The Beacon description is visible to the end user when they hover their cursor over the Beacon. 1. In the **CONFIGURATIONS** tab, 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) 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) 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) 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) - 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) - 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). 1. Under the **Positioning** section, adjust the position of the Beacon. ![Beacon_position](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Beacon_position.png) 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) - 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) 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) 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) 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) 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%28138%29.png) 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) 2. 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) Note Add Beacons to a Beacon collection that is in the Production stage by moving it to the **Draft Stage**, and then following the steps listed. ## Related - [How does Preview Mode differ from See Live and Launch live edit?](/how-does-preview-mode-differ-from-see-live-and-launch-live-edit.md)