Install#

Click Guide is in development. Nothing below is live yet. This page describes the integration contract so you can judge the shape of it before you commit an afternoon.

The script tag#

Paste one line before your closing </body> tag.

<script  async  src="https://cdn.clickguide.co.za/v1/click-guide.js"  data-api-key="cg_pk_test_xxxxxxxxxxxx"></script>

The async attribute matters. The loader waits for your page to render before it does anything, so your first paint stays exactly where it was.

Your publishable key is an identifier, not a secret. It is safe in your page source. It only works from the origins you list in the console, and it can only read published guides for the environment it belongs to.

Programmatic setup#

Where you need control over timing or want to pass user context, initialise it yourself.

ClickGuide.init({  apiKey: 'cg_pk_test_xxxxxxxxxxxx',  user: { id: 'internal-user-id' },  traits: { plan: 'standard', role: 'admin' },  consent: { analytics: true },});

Send an opaque identifier for user.id, not an email address. Click Guide uses it to resume a half-finished guide and to count completions. It never needs to know who the person is.

Traits decide which guides a user is offered. An onboarding flow for administrators should not interrupt an accountant.

The rest of the API#

ClickGuide.open();              // open the assistantClickGuide.startFlow(flowId);   // start a specific guideClickGuide.identify(user);      // update the user after a loginClickGuide.setConsent(consent); // update consentClickGuide.destroy();           // remove the overlay and every listener

Calling init twice does nothing the second time. destroy removes every observer and listener it created, which matters for single-page applications that mount and unmount sections of themselves.

Content Security Policy#

If you send a CSP, allow the script and the API.

script-src  https://cdn.clickguide.co.zaconnect-src https://api.clickguide.co.za

Click Guide injects no inline styles into your page. Everything renders inside a shadow root, so style-src needs nothing from you.

Making your controls easier to find#

Optional, and worth ten minutes.

Click Guide identifies controls by what a user sees, and that works without any help from you. Where a control has no visible label, an icon-only button being the usual case, give it a hook.

<button data-click-guide="save-invoice" aria-label="Save invoice">  <svg>...</svg></button>

The aria-label helps your screen reader users today. The data-click-guide attribute survives a redesign that changes the label. Both are cheap.

Your console reports which controls the resolver could not identify, so you can start with the ones that matter instead of annotating everything.

Verify it#

The console has an installation check. Load a page with the script on it, and the check confirms four things: the script loaded, the key is valid, the origin is allowed, and configuration came back.

Where one of those fails, it tells you which and why. Debug mode prints the same detail to your console without printing anything sensitive.

ClickGuide.init({ apiKey: '...', debug: true });

Five minutes from paste to a verified install. Your first guide takes longer, and only because writing good instructions is the part no tool can do for you.