Payload CMS and other admin panels

Admin panels such as Payload CMS are a good fit for tours: one login, many screens. This is what to set up.

Where to put the code

• init(): once, in the admin app's root client component (in Payload, a custom component registered as a provider or a beforeDashboard component). Use trackRouteChanges: true, because the admin is a single-page app and its screens change without a reload.
• identify(): right after the signed-in user is known, with their id and traits (role, email).

import { init, identify } from "@justonecx/sdk";

void init({ publicKey: "pk_your_key", apiUrl: "https://api.justonecx.com", trackRouteChanges: true, excludePaths: ["/api/**"] });
identify(user.id, { email: user.email, role: user.role });

Give elements stable anchors

Payload's generated class names change between versions. Add a data-jcx attribute to the components you want to point at, in your own custom components:

<button data-jcx="posts-create">Create new</button>

Then point the tour at [data-jcx="posts-create"]. Elements you cannot edit (Payload's own buttons) can be found by their visible text or ARIA role instead: add a text or role target in the step.

Keep the storefront out

If the same app serves a public site and the admin, only the admin should show tours. Use excludePaths for the public paths, or disableTours: true where the SDK should not run tours at all. See init and Targeting.

Live preview frames

Payload's live preview renders your site in an iframe. Add excludePaths for the preview route, or disableTours, disableAnnouncements and disableSurveys, so the frame does not show widgets. A second copy of the SDK on a page logs a warning and stays inactive.