Creating Beacons

The BreakGround Chrome Extension lets you create standalone beacons while browsing your live application. Beacons are pulsing visual indicators attached to UI elements — they draw attention to features or controls without interrupting the user's workflow.

Creating a Beacon

1. Click the BreakGround icon in the toolbar to open the popup.

2. From the main menu, click New under Beacon.

3. Enter a name for internal reference and an optional label displayed alongside the pulse indicator.

4. Click Pick Element to activate the element selector. Hover over your application page — elements highlight as you move the cursor. Click the target element to capture its CSS selector.

5. Choose the beacon appearance:

   Setting	Options
   Pulse color	Any color via the color picker. Match your brand or use a contrasting color for visibility.
   Size	sm (small), md (medium), lg (large).

6. Click Preview to see how the beacon will look on the current page.

7. Click Save to create the beacon. It is saved in DRAFT status; publish it from the BreakGround dashboard when ready.

Editing an Existing Beacon

1. From the main menu, click Edit under Beacon.
2. Select the beacon from the list. The extension loads its current configuration.
3. Modify any fields and click Save to update.

Tips

• After saving, open the BreakGround dashboard to configure when the beacon appears (trigger type), which users see it (audience targeting), and how the click interaction behaves.
• Use beacons for feature discovery — attach them to newly released controls so users are guided toward what is new without being interrupted mid-task.