Creating Beacons

What Are Beacons

Beacons are pulsing visual indicators attached to specific UI elements in your application. They draw attention to features, controls, or changes that users might otherwise overlook -- without interrupting the user's workflow.

When a user clicks a beacon, it can display a tooltip with additional information, start a flow, or open an external URL.

Creating a Beacon

1. Navigate to Content > Beacons in the dashboard.
2. Click Create New Beacon.
3. Use the visual selector to choose the target element on your application page.
4. Configure the beacon style and animation (see below).
5. Set the click behavior -- what happens when the user interacts with the beacon.
6. Configure audience targeting and page URL rules.
7. Click Save to create the beacon in DRAFT status, or Publish to make it live.

Beacon Styles

Beacons use a pulse animation by default -- a circular indicator that rhythmically expands and contracts to attract attention. You can customize:

• Color -- Match your brand or use a contrasting color for visibility.
• Size -- Adjust the beacon diameter relative to the target element.
• Animation speed -- Control the pulse frequency (slow, normal, fast).
• Opacity -- Set the transparency of the beacon and its pulse rings.

Positioning

Beacons are positioned relative to their target element. Available positions include:

• Top-right (default) -- Appears at the upper-right corner of the element.
• Top-left, Bottom-left, Bottom-right -- Other corner positions.
• Center -- Overlays the center of the target element.
• Custom offset -- Specify pixel offsets from the element's edge for precise placement.

The beacon follows the target element if the page scrolls or the layout changes.

Trigger Types

Configure when the beacon appears using a trigger type:

Trigger	Fires when	Key config
exit_intent	The user's cursor moves toward the browser chrome.	—
scroll_depth	The user scrolls past a specified percentage of the page.	percentage (0–100), url
time_on_page	The user has spent a set duration on the page.	delay (ms), url
side_button	The user clicks a persistent launcher button on the side of the viewport.	buttonColor, buttonPosition
url_match	The current URL matches a pattern.	pattern, matchType
manual	Programmatically via DAP('showContent', beaconId).	—

If no trigger is configured, the beacon is treated as manual — it appears only when invoked via the SDK or as part of a flow.

Click Behavior

Configure what happens when a user clicks the beacon:

Action	Description
Show tooltip	Display a tooltip with contextual information anchored to the same element.
Start flow	Launch a specific flow, beginning from its first step.
Open URL	Navigate to an external or internal URL (opens in a new tab or the same tab).
Custom callback	Execute a JavaScript callback defined in your application.

After the user interacts with the beacon, it can be configured to disappear permanently, reappear on the next visit, or remain visible.

Use Cases

• Feature discovery -- Attach a beacon to a newly launched feature to guide users toward it.
• Onboarding prompts -- Place beacons on key actions that new users should complete.
• Change indicators -- Highlight UI elements that have moved or been updated after a redesign.