Install Click Guide#

<script  async  src="https://cdn.clickguide.co.za/latest/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.

By default a floating beacon appears in the bottom-right of every page the script loads on. Two ways to change that from the script tag:

<script  async  src="https://cdn.clickguide.co.za/latest/click-guide.js"  data-api-key="cg_pk_test_xxxxxxxxxxxx"  data-launcher-label="Help"  data-launcher-position="bottom-left"></script>

Positions: bottom-right (default), bottom-left, top-right, top-left.

To suppress the launcher entirely and drive Click Guide from your own controls, set data-launcher="false" and call the programmatic hooks below.

Once the script has loaded, window.ClickGuide is available:

ClickGuide.open();              // open the launcher panelClickGuide.close();             // close the launcher panelClickGuide.start(flowId);       // play a specific guide (or the first one if omitted)ClickGuide.ask(question);       // send a question to the assistant, resolves with the answerClickGuide.record();            // start recording a new guide (author-mode)ClickGuide.destroy();           // tear down the launcher and every listener it added

destroy removes every observer and listener the launcher created, which matters for single-page applications that mount and unmount sections of themselves. Call it before you replace a mount point.

There is no init, no identify, no setConsent and no user-tracking. The launcher is scoped to the key it was loaded with, and the key names the tenant. Click Guide does not need to know who your users are.

If you send a CSP, allow the script and its runtime calls.

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

The SDK proxies its runtime calls back through the CDN origin (/runtime/... on cdn.clickguide.co.za), so only one host needs to be allowed. Click Guide injects no inline styles into your page. Everything renders inside a shadow root, so style-src needs nothing from you.

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 id="save-invoice" aria-label="Save invoice">  <svg>...</svg></button>

The aria-label helps your screen reader users today. An explicit id survives a redesign that changes the label. Both are cheap and the recorder picks the strongest anchor available.

Fair-use ceilings apply per SDK session and per MCP token; a real user never hits them, and a runaway script does:

When you hit one, the response is HTTP 429 with {"error": "rate_limited", "detail": "..."}. The launcher surfaces this as "The help assistant is unavailable right now. Please try again in a moment." rather than the technical error.

In the console, open Applications, select yours, and switch to the Usage tab. If your install is live, Sessions starts counting as soon as the first browser loads a page carrying the script. Three counters:

• Sessions - one per browser-tab load of your page. Broken install = Sessions drops to zero.
• Questions - one per assistant call from the Ask tab.
• Guides - one per walkthrough started from the Guides tab.

The chart is per day for the last 7 / 30 / 90 days, scoped to the current application or the whole organisation. No question text, no URLs, no user identifiers - counts only.

Debug mode prints details to the browser console without printing anything sensitive.

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

You will see one line: [click-guide] ready. environment=test application=... flows=.... Its absence means the script did not load or the key was rejected - the console's browser tab will show the specific reason in that case.

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.