Skip to main content

Recording Flows

The Chrome Extension captures user interactions as flow steps. Each click is recorded with its CSS selector, page URL, and element text, producing a step-by-step walkthrough you can publish to your dashboard.

How Recording Works​

When recording is active, the extension injects a content script into the current page. Every click generates a step entry containing:

  • CSS selector of the clicked element (used to anchor tooltips during playback).
  • Page URL at the time of the click.
  • Element text for display context.
  • Timestamp for ordering.

The extension stores steps locally until you save or discard the recording.

Starting a Recording​

  1. Navigate to the page in your application where the flow should begin.
  2. Click the BreakGround icon in the toolbar to open the popup.
  3. Enter a flow name (or leave blank for "Untitled Flow").
  4. Click Start Recording. The popup closes and a red pulse indicator confirms recording is active.

Capturing Steps​

With recording active, interact with your application as a user would:

  • Click buttons, links, menu items, or form fields. Each click creates a new step.
  • Navigate between pages. The extension continues recording across page transitions.
  • The popup shows a running count of steps captured so far.

Reviewing Captured Steps​

Click the BreakGround icon to reopen the popup at any time during recording. Click Stop Recording to finish. The popup displays the full list of captured steps, each showing its order number, interaction type, and the element text or selector.

From the review screen you can:

  • Remove a step by clicking the delete button next to it.
  • Discard the entire recording to start over.

Saving to the Dashboard​

When you are satisfied with the captured steps:

  1. Click Save Flow. The extension sends the flow and its steps to the BreakGround API using your authenticated session.
  2. On success, you see a confirmation with the new flow ID.
  3. Open the BreakGround dashboard to configure targeting rules, add descriptions to individual steps, set trigger conditions, and publish the flow to end users.

Tips​

  • Keep flows focused on a single task (5-10 steps). Shorter flows have higher completion rates.
  • Use unique, stable CSS selectors in your application (e.g., data-testid attributes) so steps remain valid after UI changes.
  • If a step captures the wrong element, remove it from the review list and re-record that interaction.