--- title: "Trigger a Pop-up from a Beacon" slug: "trigger-a-pop-up-from-a-beacon" updated: 2025-01-29T12:59:50Z published: 2025-01-29T12:59:50Z --- > ## 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. # Trigger a Pop-up from a Beacon You are responsible for increasing the usage of and promoting a brand new feature in your application and want to effectively communicate this information to your users. Beacons can help by drawing users’ attention to the new feature. However, while Beacons are useful for drawing attention to updates, triggering a Pop-up is more impactful. A Pop-up not only captures the users’ attention but also provides a focused, interactive space to deliver detailed information about the new feature. Whatfix enables you to trigger a Pop-up from a Beacon. By triggering a Pop-up using a Beacon, you initially capture the users’ attention with a visually striking indicator, and then seamlessly transition to a detailed, interactive message. This approach ensures that users not only notice the new feature but also engage with comprehensive information and actionable steps. The Beacon serves as a prompt, while the Pop-up delivers an in-depth explanation. ![Trigger a Pop-up from a Beacon](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Trigger%20a%20Pop-up%20from%20a%20Beacon.gif) Use the following steps to implement this use case: [Step 1: Create an empty Flow on the page where you want to show the Beacon and the Pop-up](/studio/docs/trigger-a-pop-up-from-a-beacon#step-1-create-an-empty-flow-on-the-page-where-you-want-to-show-the-beacon-and-the-popup) [Step 2: Create a Pop-up](/studio/docs/trigger-a-pop-up-from-a-beacon#step-2-create-a-popup) [Step 3: Link the Pop-up with the empty Flow](/studio/docs/trigger-a-pop-up-from-a-beacon#step-3-link-the-popup-with-the-empty-flow) [Step 4: Create a Beacon](/studio/docs/trigger-a-pop-up-from-a-beacon#step-4-create-a-beacon) [Step 5: Launch an empty Flow from the Beacon.](/studio/docs/trigger-a-pop-up-from-a-beacon#step-5-launch-empty-flow-from-the-beacon) ### Step 1: Create an empty Flow on the page where you want to show the Beacon and the Pop-up Consider that you want to show the Pop-up on the landing page of your application. Create an empty Flow on that page that is set to fail. This means that although the Flow never shows up, Whatfix recognizes that a Flow was run on the page and enables you to show any widget linked to it. Use the following steps to create an empty Flow: 1. Create a Flow using Whatfix Studio. For more information on creating a Flow, see [Create a Flow](/studio/docs/creating-a-flow-1) 2. Select any element on the screen. Since this is just an empty Flow, it doesn’t matter which element you select. 3. Go to the **ADVANCED OPTIONS** section and add the following Display Rule: Selected Element Is → CSS Selector → empty![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/image(476).png) --- ### Step 2: Create a Pop-up Create a Pop-up based on your requirements. For more information on how to create a Pop-up, see [Create a Pop-up](/studio/docs/creating-pop-ups). --- ### Step 3: Link the Pop-up with the empty Flow Once you have created the Pop-up, use the following steps to link it with the empty Flow: 1. Go to the Whatfix Guidance Dashboard, click **Widgets**. ![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/image(432).png) 2. Click **Pop-ups**.![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/image(435).png) 3. Hover your cursor over the Pop-up segment that you want to configure, and then click the **Edit** icon.![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/image(436).png) 4. Click **Set Visibility Rules →.**![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/image(437).png) 5. In the **Visibility rules**section, click **When does the pop up start and stop appearing?**![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/image(489).png) 6. From the **What causes the pop up to appear?** dropdown, select **Events related to Whatfix content**.![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/image(477).png) > [!WARNING] > Note > > When the **Events related to Whatfix content** condition is selected, all other Visibility Rules become unavailable. 7. From the **Content type** dropdown, select **Flow**.![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/image(478).png) 8. Click**Content**.![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/image(479).png) 9. Select the empty Flow that you created.![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/image(480).png) 10. Click **Add**.![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/image(481).png) 11. From the **Event** dropdown, select **Before the flow starts**.![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/image(482).png) 12. Click **Save** to save the Visibility Rules.![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/image(483).png) 13. Make any other edits as required in the Pop-up, then click **Save**. --- ### Step 4: Create a Beacon Create a Beacon based on your requirements. For more information on how to create a Beacon, see [Create a Beacon](/studio/docs/create-beacons). --- ### Step 5: Launch an empty Flow from the Beacon Link the empty Flow to the created Beacon. The Flow launches automatically when the user clicks the Beacon. For more information, see [Link a Flow to a Beacon](/studio/docs/link-a-flow-to-a-beacon).