---
title: "Create a Beacon on Mirror"
slug: "create-a-beacon-on-mirror"
updated: 2026-06-23T11:04:16Z
published: 2026-06-23T11:04:16Z
canonical: "support.whatfix.com/create-a-beacon-on-mirror"
---

> ## 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 on Mirror

## Overview

Whatfix enables you to create a Beacon on a Mirror simulation to draw learner attention to a single, specific element on a Mirror Screen that they should notice or act on. A Beacon acts as a visual shout-out and can [link to additional content](/studio/docs/add-multimedia-content-to-beacons) for more context.

For example, you can create a Beacon on a Mirror simulation to highlight a newly introduced button on a practice screen, so learners do not miss it while moving through the Workflow. Additionally, you can [link an existing Flow to a Beacon](/studio/docs/link-a-flow-to-a-beacon) to provide additional guidance to your learners.

For more information, see [What are Beacons?](/studio/docs/what-are-beacons)

## Use Cases

Use Beacons to implement the following use cases:

- Point learners toward a critical field, button, or icon on a Mirror Screen that is easy to overlook.
- Signal where a new or changed feature appears within a training simulation.
- Attach supporting content to the Beacon so learners get additional detail without leaving the Mirror Screen.

## Create a Beacon

Expand the following accordions for more details:

****Step-1: Create a 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.

![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/CLM_editor plug in.png?sv=2026-02-06&spr=https&st=2026-10-29T13%3A38%3A54Z&se=2026-10-29T14%3A38%3A54Z&sr=c&sp=r&sig=Lhr8ANe8dhSIiN9O6jfp0bC1KjCZp27x34KJA3p8DEo%3D)
2. Under **CONTENT**, click **Beacon**.

![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Whatfix_Studio_Click_Beacon.png?sv=2026-02-06&spr=https&st=2026-10-29T13%3A38%3A54Z&se=2026-10-29T14%3A38%3A54Z&sr=c&sp=r&sig=Lhr8ANe8dhSIiN9O6jfp0bC1KjCZp27x34KJA3p8DEo%3D)
3. Enter a name for the Beacon Collection.

![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Whatfix_Studio_Beacon_Name.png?sv=2026-02-06&spr=https&st=2026-10-29T13%3A38%3A54Z&se=2026-10-29T14%3A38%3A54Z&sr=c&sp=r&sig=Lhr8ANe8dhSIiN9O6jfp0bC1KjCZp27x34KJA3p8DEo%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 your learners.
> - Visibility Rules are defined at the Beacon collection level. Consequently, a Beacon must belong to a collection in order to be displayed, even when only a single Beacon is present on a page.
4. Click **Add Beacon** to create a new Beacon.

![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Whatfix_Studio_Click_Add_Beacon.png?sv=2026-02-06&spr=https&st=2026-10-29T13%3A38%3A54Z&se=2026-10-29T14%3A38%3A54Z&sr=c&sp=r&sig=Lhr8ANe8dhSIiN9O6jfp0bC1KjCZp27x34KJA3p8DEo%3D)
5. Select an element on the application where the Beacon must appear.

![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Create_Flow_Leads_Click.png?sv=2026-02-06&spr=https&st=2026-10-29T13%3A38%3A54Z&se=2026-10-29T14%3A38%3A54Z&sr=c&sp=r&sig=Lhr8ANe8dhSIiN9O6jfp0bC1KjCZp27x34KJA3p8DEo%3D)
6. Enter a description for the Beacon action.

![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Whatfix_Studio_Enter_Beacon_Description.png?sv=2026-02-06&spr=https&st=2026-10-29T13%3A38%3A54Z&se=2026-10-29T14%3A38%3A54Z&sr=c&sp=r&sig=Lhr8ANe8dhSIiN9O6jfp0bC1KjCZp27x34KJA3p8DEo%3D)

> [!NOTE]
> Info:
> 
> The Beacon description is visible to your learner when they hover their cursor over the Beacon.
7. Enter the name of the Beacon.

![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Whatfix_Studio_BeaconName.png?sv=2026-02-06&spr=https&st=2026-10-29T13%3A38%3A54Z&se=2026-10-29T14%3A38%3A54Z&sr=c&sp=r&sig=Lhr8ANe8dhSIiN9O6jfp0bC1KjCZp27x34KJA3p8DEo%3D)
8. In the **Configurations** tab, under the **Disappear Beacon** section, select the required condition to stop displaying the Beacon.

![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Whatfix_Studio_Disappear_Beacon_Options.png?sv=2026-02-06&spr=https&st=2026-10-29T13%3A38%3A54Z&se=2026-10-29T14%3A38%3A54Z&sr=c&sp=r&sig=Lhr8ANe8dhSIiN9O6jfp0bC1KjCZp27x34KJA3p8DEo%3D)
9. Under **Appearance**, select the required theme and color for the Beacon. For more information, see [Configure Style and Tooltips](/studio/docs/configure-themes-and-tooltips).

![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Whatfix_Studio_Tooltip_Color.png?sv=2026-02-06&spr=https&st=2026-10-29T13%3A38%3A54Z&se=2026-10-29T14%3A38%3A54Z&sr=c&sp=r&sig=Lhr8ANe8dhSIiN9O6jfp0bC1KjCZp27x34KJA3p8DEo%3D)
10. Under **Icon**, select the Type, Color, and Size of the icon.

![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Configure_beaconicon(1).png?sv=2026-02-06&spr=https&st=2026-10-29T13%3A38%3A54Z&se=2026-10-29T14%3A38%3A54Z&sr=c&sp=r&sig=Lhr8ANe8dhSIiN9O6jfp0bC1KjCZp27x34KJA3p8DEo%3D)

> [!WARNING]
> Note:
> 
> - By default, Whatfix provides four types of icons for a Beacon, that is, Custom, Radial, Ripple, and Speckle. For more information, see [Types of Beacons](/studio/docs/what-are-beacons?highlight=Beacon%20style%20name).
> - Whatfix enables you to add custom icons for Beacons. To add custom icons, see Use custom icons for Beacon. For more information, see [Use custom icons for Beacons](/studio/docs/use-custom-icons-for-beacon).
11. Under **Positioning**, adjust the position of the Beacon.

![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Beacon_position(1).png?sv=2026-02-06&spr=https&st=2026-10-29T13%3A38%3A54Z&se=2026-10-29T14%3A38%3A54Z&sr=c&sp=r&sig=Lhr8ANe8dhSIiN9O6jfp0bC1KjCZp27x34KJA3p8DEo%3D)

> [!WARNING]
> Note:
> 
> There are two different positioning modes,
> 
> - In the **Basic** positioning mode, you can choose among the 8 available positions.
> 
> ![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/clm_beacon_basic positioning(1).png?sv=2026-02-06&spr=https&st=2026-10-29T13%3A38%3A54Z&se=2026-10-29T14%3A38%3A54Z&sr=c&sp=r&sig=Lhr8ANe8dhSIiN9O6jfp0bC1KjCZp27x34KJA3p8DEo%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.
> 
> ![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Advanced_positioning(1).png?sv=2026-02-06&spr=https&st=2026-10-29T13%3A38%3A54Z&se=2026-10-29T14%3A38%3A54Z&sr=c&sp=r&sig=Lhr8ANe8dhSIiN9O6jfp0bC1KjCZp27x34KJA3p8DEo%3D)
12. Under **Tooltip Position**, choose the required position of the tooltip.

![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Whatfix_Studio_Tooltip_Position.png?sv=2026-02-06&spr=https&st=2026-10-29T13%3A38%3A54Z&se=2026-10-29T14%3A38%3A54Z&sr=c&sp=r&sig=Lhr8ANe8dhSIiN9O6jfp0bC1KjCZp27x34KJA3p8DEo%3D)
13. Under **Additional Options**, enable the **Anchor to Page** or **Anchor to Element** toggle based on your requirement. For more information, see [Anchor content to a Page](/studio/docs/anchor-to-page) and [Anchor content to an Element](/studio/docs/anchor-to-element).

![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Whatfix_Studio_Disappear_Beacon_Options(1).png?sv=2026-02-06&spr=https&st=2026-10-29T13%3A38%3A54Z&se=2026-10-29T14%3A38%3A54Z&sr=c&sp=r&sig=Lhr8ANe8dhSIiN9O6jfp0bC1KjCZp27x34KJA3p8DEo%3D)
14. In the **Visibility Rules**, enter the required visibility rules for the Beacon. Visibility Rules enable you to configure Beacons to display the tooltip only when pre-determined conditions are met. For more information, see [Understand New Visibility Rules for Content](/studio/docs/understand-advanced-visibility-rules-for-content) and [Configure Where DAP Guidance Appears](/mirror/docs/configure-where-dap-guidance-appears).

![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Whatfix_Studio_Visibility_Rules.png?sv=2026-02-06&spr=https&st=2026-10-29T13%3A38%3A54Z&se=2026-10-29T14%3A38%3A54Z&sr=c&sp=r&sig=Lhr8ANe8dhSIiN9O6jfp0bC1KjCZp27x34KJA3p8DEo%3D)
15. Click **Save Beacon**.

![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Whatfix_Studio_Click_Save_Beacon.png?sv=2026-02-06&spr=https&st=2026-10-29T13%3A38%3A54Z&se=2026-10-29T14%3A38%3A54Z&sr=c&sp=r&sig=Lhr8ANe8dhSIiN9O6jfp0bC1KjCZp27x34KJA3p8DEo%3D)

> [!NOTE]
> Info:
> 
> To add more Beacons, click **Add Beacon** on Whatfix Studio, and then repeat steps 5 to 15.![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Whatfix_Studio_ClIck_Add_Beacon.png?sv=2026-02-06&spr=https&st=2026-10-29T13%3A38%3A54Z&se=2026-10-29T14%3A38%3A54Z&sr=c&sp=r&sig=Lhr8ANe8dhSIiN9O6jfp0bC1KjCZp27x34KJA3p8DEo%3D)

> [!WARNING]
> Note:
> 
> Once you have created the Beacon collection, it is automatically created on your Whatfix Guidance Dashboard. For more information, see [Overview of the Whatfix Guidance Dashboard](/studio/docs/overview-of-the-whatfix-dashboard).

****Step-2: Configure the Visibility Rules for the Beacon****

Use the following steps to configure visibility rules for a Beacon

1. On the [Whatfix Guidance Dashboard](/studio/docs/overview-of-the-whatfix-dashboard), click **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-29T13%3A38%3A54Z&se=2026-10-29T14%3A38%3A54Z&sr=c&sp=r&sig=Lhr8ANe8dhSIiN9O6jfp0bC1KjCZp27x34KJA3p8DEo%3D)
2. Click **Beacons**.

![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/ia_left nav_beacons.png?sv=2026-02-06&spr=https&st=2026-10-29T13%3A38%3A54Z&se=2026-10-29T14%3A38%3A54Z&sr=c&sp=r&sig=Lhr8ANe8dhSIiN9O6jfp0bC1KjCZp27x34KJA3p8DEo%3D)
3. Hover your cursor over the Beacon collection you want to configure, and then click **Edit**.

![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/image-9II7CORP.png?sv=2026-02-06&spr=https&st=2026-10-29T13%3A38%3A54Z&se=2026-10-29T14%3A38%3A54Z&sr=c&sp=r&sig=Lhr8ANe8dhSIiN9O6jfp0bC1KjCZp27x34KJA3p8DEo%3D)
4. Click **Collection Visibility**.

![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/image-KC932NR0.png?sv=2026-02-06&spr=https&st=2026-10-29T13%3A38%3A54Z&se=2026-10-29T14%3A38%3A54Z&sr=c&sp=r&sig=Lhr8ANe8dhSIiN9O6jfp0bC1KjCZp27x34KJA3p8DEo%3D)
5. Expand the **Where does the beacons colection Rules appear?** section, and configure URL and Page tags. For more information, see [Set Where your Content or Widget appears with the New Visibility Rules](/studio/docs/set-where-your-widget-appears).

![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/image-EI1HA2MQ.png?sv=2026-02-06&spr=https&st=2026-10-29T13%3A38%3A54Z&se=2026-10-29T14%3A38%3A54Z&sr=c&sp=r&sig=Lhr8ANe8dhSIiN9O6jfp0bC1KjCZp27x34KJA3p8DEo%3D)
6. Expand the **When does the beacons collection Rules start and stop appearing?** section, and configure when you want to start showing the Beacon collection. For more information, see [Set When your Content or Widget Appears with the new Visibility Rules](/studio/docs/set-when-your-widget-appears-using-visiblity-rules-20).

![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/image-JS0G0J2V.png?sv=2026-02-06&spr=https&st=2026-10-29T13%3A38%3A54Z&se=2026-10-29T14%3A38%3A54Z&sr=c&sp=r&sig=Lhr8ANe8dhSIiN9O6jfp0bC1KjCZp27x34KJA3p8DEo%3D)
7. 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 Content or Widget with the New Visibility Rules](/studio/docs/set-who-can-see-your-widget).

![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/image-BDSQTJRX.png?sv=2026-02-06&spr=https&st=2026-10-29T13%3A38%3A54Z&se=2026-10-29T14%3A38%3A54Z&sr=c&sp=r&sig=Lhr8ANe8dhSIiN9O6jfp0bC1KjCZp27x34KJA3p8DEo%3D)
8. Click **Save**.

![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Mirror_DB_Guidance_Click_Save.png?sv=2026-02-06&spr=https&st=2026-10-29T13%3A38%3A54Z&se=2026-10-29T14%3A38%3A54Z&sr=c&sp=r&sig=Lhr8ANe8dhSIiN9O6jfp0bC1KjCZp27x34KJA3p8DEo%3D)

> [!WARNING]
> Note:
> 
> To display the Beacon on your Mirror simulation, you must move both the Beacon and the Mirror simulation from the **Draft** stage to the **Production** stage before you share them with your learners. Publish the Beacon on the Whatfix Guidance Dashboard and the Mirror simulation on the Whatfix Mirror Dashboard.
> 
> 
> 
> For more information, see [Publish all Whatfix content and widgets to Production](/studio/docs/pushing-whatfix-content-to-production) and [Publish Whatfix Mirror](/mirror/docs/publish-whatfix-mirror).

A replica of an application screen captured based on a UI element.

Whatfix Studio is a browser plug-in that enables you to create various types of Whatfix content, such as Flows, Smart Tips, Beacons, and so on. The plug-in can be installed on Google Chrome and the new Microsoft Edge browsers.