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 sees a beacon, it displays an optional label. Beacons appear and disappear based on their trigger and targeting configuration.
Creating a Beacon
- Navigate to Content > Beacons in the dashboard.
- Click Create New Beacon.
- Enter a name for internal reference.
- Select the site the beacon belongs to.
- Enter the CSS selector of the target element. You can use the Chrome Extension to record the selector visually.
- Configure the beacon style (color, size, animation, and optional label).
- Configure the display trigger, targeting, and scheduling from the respective tabs.
- Click Save to create the beacon in
DRAFTstatus, or Publish to make it live.
Beacon Style Options
| Setting | Description | Options |
|---|---|---|
| Pulse Color | The color of the pulsing indicator. | Any hex color (default #3B82F6) |
| Size | The diameter of the beacon dot. | Small, Medium, Large |
| Animation | Controls the pulse animation intensity. | None, Subtle, Full |
| Label | Optional text label displayed alongside the beacon. | Plain text string |
Trigger Types
Configure when the beacon appears under the Trigger tab:
| Trigger | Fires when | Key config |
|---|---|---|
| URL Match | The current URL matches a pattern. | pattern, matchType |
| 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) |
| Time on Page | The user has spent a set duration on the page. | delay (milliseconds) |
| Manual | Programmatically via DAP('showContent', beaconId). | — |
If no trigger is configured, the beacon defaults to URL Match with a wildcard pattern, meaning it shows on all pages.
Scheduling
Configure when the beacon is active using the Scheduling tab:
| Field | Description |
|---|---|
| Publish At | Set a future date and time for the beacon to activate automatically. Leave empty to publish immediately when you click Publish. |
| Expires At | Set a date and time after which the beacon is automatically deactivated. Leave empty for no expiry. |
Times are interpreted in your local timezone. A beacon with both fields set is only active during the specified window.
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.