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.

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

Step 2: Create a Pop-up

Step 3: Link the Pop-up with the empty Flow

Step 4: Create a Beacon

Step 5: Launch an 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

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

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.

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.

2. Click Pop-ups.

3. Hover your cursor over the Pop-up segment that you want to configure, and then click the Edit icon.

4. Click Set Visibility Rules →.

5. In the Visibility rulessection, click When does the pop up start and stop appearing?
   

6. From the What causes the pop up to appear? dropdown, select Events related to Whatfix content.

   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.

8. Click Content.

9. Select the empty Flow that you created.

10. Click Add.

11. From the Event dropdown, select Before the flow starts.

12. Click Save to save the Visibility Rules.

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.

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.