User Guide
This guide covers the full workflow from creating a project to viewing analytics for a published flow.
Creating a project
A default project named My Tracya Project is created automatically when you register. You do not need to create one manually to get started.
To create additional projects (Growth plan: up to 3, Scale plan: unlimited):
- Sign in and open the Projects tab.
- Scroll to the New project card.
- Enter a name (1–100 characters) and click + Create project.
The new project appears in the list immediately and its ID is available to copy. The plan limit is enforced — the creation form is hidden once you reach the maximum for your plan.
Renaming a project
Click the project name in the Projects tab. The name becomes an editable input. Press Enter to save or Escape to cancel.
Switching the active project
Click Switch on any project row, or use the project selector dropdown in the toolbar (visible when you have more than one project). Switching resets the editor canvas (URL, steps, selection mode) for the new project context.
Loading your app URL in the editor
- Open the Editor tab.
- Paste your app's URL in the address bar at the top (e.g.
https://app.example.comorhttp://localhost:3000). - Click Load. Your app loads in the iframe on the left.
The editor proxies the page through /api/proxy to allow cross-origin display. Some apps with aggressive X-Frame-Options or frame-ancestors CSP directives may block iframe embedding.
Using selection mode to pick elements
Selection mode lets you click an element in the loaded app to capture its CSS selector.
- Click the 🖱 Select button in the toolbar. It changes to 🎯 Selecting… when active.
- Click any element in the iframe. The widget highlights the element and returns the CSS selector to the sidebar.
- Selection mode deactivates automatically after one pick.
The captured selector is shown in the step form in the sidebar. You can also type or paste a CSS selector directly.
Adding steps
A flow is an ordered list of steps. Each step anchors to a CSS selector and displays a UI component.
Component types
| Type | Description |
|---|---|
| Tooltip | Small popover anchored to the target element. Supports placement: top, bottom, left, right. |
| Modal | Centred overlay, not anchored to an element. |
| Highlight | Spotlights the target element with a dimmed backdrop. |
| Banner | Full-width bar at the top of the page. |
Adding a step
- In the sidebar, fill in the Flow name field.
- Under First step (or Add a step), select or type a CSS selector.
- Choose a Type and Placement.
- Fill in the Title and Content fields.
- Click + Add step.
Repeat for each step. Steps appear in order in the sidebar list. Click the × on a step card to remove it.
Testing a flow
Click the â–¶ Test button in the toolbar. This opens a demo page in a new tab:
The demo page loads the widget with a direct reference to the current project. Unsaved steps are not included — save the flow first (see below).
Saving (publishing) a flow
Click Save flow in the sidebar. The API creates the flow and all its steps in the database. A green confirmation message ✓ Flow saved successfully appears for 4 seconds.
Saved flows are immediately active and will be fetched by any page that has the widget installed with this project ID. There is no separate "publish" step — saving is publishing.
Viewing analytics
- Open the Analytics tab.
- Select a flow from the list on the left. The panel shows:
- Started — number of unique users who saw step 1.
- Completed — number of users who reached the last step.
- Completion rate — completed ÷ started, as a percentage.
- Step funnel — per-step drop-off chart.
Analytics are scoped to the currently active project. Switching projects (via the toolbar selector or the Projects tab) updates the analytics view for the new project.
Events are sent by the widget to POST /v1/events and stored in the database. The analytics panel reads them via GET /v1/flows/:id/analytics.