Quickstart

Create a workspace

Sign up. A workspace holds your team, your guidance and your keys.

Add the snippet to your app

Open Settings → Install in the dashboard. The snippet there already has your publishable key in it. Paste both tags into the <head> of every page:

<!-- Cueston: tours, tooltips and banners -->
<script>!function(w){var c=w.Cueston=w.Cueston||{};c.q=c.q||[];["identify","reset","page","track","start","show","dismiss","on","off"].forEach(function(m){c[m]=c[m]||function(){c.q.push([m].concat([].slice.call(arguments)))}})}(window);</script>
<script src="https://app.cueston.com/sdk/v1/cueston.js" data-key="pk_your_publishable_key" async></script>

The first tag queues calls made before the script has loaded. Next.js and Google Tag Manager versions are in Install the snippet.

Tell Cueston who is signed in

Call identify once you know the user, and reset when they sign out:

Cueston.identify("user-123", {
  name: "Ada",
  email: "ada@acme.com",
  role: "admin",
  permissions: ["billing:manage", "reports:view"],
  plan: "pro",
});

Use your own stable account id, not an email address. Traits like role and plan let you target guidance. See Identify users.

Build a tour

In the dashboard, create a tour, set the page it starts on (its URL pattern) and add steps. To point a step at an element, type a CSS selector or pick the element on your site with the Chrome extension.

Before you publish, use Preview on site to open your real app with the draft on top. Only you see it.

Publish and check

Publish the tour, then open a matching page in your app. Impressions and completions appear in Analytics within a minute.

Nothing showing? Check the snippet loaded: in the browser console, document.documentElement.dataset.cuestonSdk returns the SDK version. Add data-debug="true" to the script tag and it logs what it does to the console (at the Verbose level).