Installation
Tracya runs on your site through a small JavaScript snippet. You add it once, and from then on every flow you publish appears automatically, with no further code changes.
Add the snippet
Open the Projects tab in your dashboard, click Show snippet, and copy what you see. It looks like this:
<script src="https://api.tracya.io/static/widget/tracya.min.js" defer></script>
<script>
window.addEventListener('load', function() {
Tracya.init({
projectId: 'YOUR_PROJECT_ID',
apiUrl: 'https://api.tracya.io'
});
});
</script>
Your real project ID is already filled in when you copy from the dashboard. Paste the two script tags into your site, just before the closing </body> tag, on every page where a flow might appear. If your app is a single-page application, adding it once to your main HTML template is enough, Tracya follows client-side navigation on its own.
That is the whole installation. Publish a flow, reload your app, and it shows up.
The init options
Tracya.init() takes a single configuration object. Two fields matter:
projectId is the identifier of the project whose flows you want to load. It is a UUID, and the dashboard fills it in for you. Every flow you build belongs to a project, and the widget only ever loads flows from the one project ID you pass here.
apiUrl tells the widget where to fetch flows from. For the hosted service this is always https://api.tracya.io. The dashboard sets it for you, and you should not need to change it.
Loading the widget only for signed-in users
By default the widget loads on every page that carries the snippet. If you only want flows to run for authenticated users, wrap the init call in your own check:
<script src="https://api.tracya.io/static/widget/tracya.min.js" defer></script>
<script>
window.addEventListener('load', function() {
if (isUserLoggedIn()) { // replace with your own auth check
Tracya.init({
projectId: 'YOUR_PROJECT_ID',
apiUrl: 'https://api.tracya.io'
});
}
});
</script>
Replace isUserLoggedIn() with whatever your app uses to know a user is signed in. If the check fails, init is never called and the widget stays dormant.
Restricting which domains can load your flows
By default your flows load on any site that carries the snippet with your project ID. If you want to lock that down, open the Projects tab and add one or more domains under Allowed domains.
Once the list has at least one entry, Tracya checks the origin of every request against it. Flows load on the domains you listed and are refused everywhere else with a clear error. An empty list means no restriction: flows load anywhere. This is worth setting once you go to production, so that nobody can lift your project ID and run your flows on another site.
You can enter a full host like app.example.com, or a wildcard like *.example.com to cover every subdomain.
Content Security Policy
If your site sends a Content Security Policy, it must allow the widget to load and to reach the Tracya API. The widget is a script served from api.tracya.io, and it fetches your flows from the same origin, so both script-src and connect-src need that host:
If your CSP is stricter than this, the browser blocks the widget silently, and no flow appears. A quick check of the browser console will show the CSP violation if that is what is happening.
Checking it works
Open your app with the snippet in place, and make sure at least one flow is published and active for the project. If the flow has a First visit only trigger and you have already seen it, clear your site data or open a private window, otherwise it will not show again.
If nothing appears, open the browser console. The widget logs a clear message when something is wrong: an unauthorized domain, an unreachable API, or a step whose target element could not be found. The Troubleshooting page walks through each case.