Install the snippet

One script shows your published guidance. It uses your publishable key, which is safe in page source.

Your publishable key (it starts with pk_) is in Settings → Install, where every snippet below is filled in for you.

Paste both tags into the <head> of every page, before other scripts.

HTML

<!-- 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>

Add both scripts to the root layout (App Router).

app/layout.tsx

import Script from "next/script";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script id="cueston-queue" strategy="beforeInteractive">
          {`!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" strategy="afterInteractive" />
      </body>
    </html>
  );
}

In GTM, create a Custom HTML tag with the trigger All Pages:

HTML

<!-- GTM → Tags → New → Custom HTML. Trigger: All Pages -->
<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>

To identify users from GTM, see Identify users.

The script loads asynchronously and never blocks your page. The first tag queues calls you make before it has loaded (Cueston.identify(), Cueston.track()…); they run once it's ready. Single-page apps are detected automatically.

Script attributes

Attribute	What it does
`data-key`	Your publishable key. Required.
`data-locale`	Language of the content, like `de` or `pt-BR`. Defaults to the browser's language.
`data-debug`	`true` logs what the snippet does to the browser console (at the Verbose level).
`data-api-host`	Where the SDK sends requests. Defaults to the origin the script loads from.

You can also start it from code instead of the data-key attribute:

JavaScript

Cueston.init({ key: "pk_your_publishable_key", locale: "de", debug: true });

Check it works

In the browser console, document.documentElement.dataset.cuestonSdk returns the SDK version once it has started.
Publish something that targets the page you're on, then reload. Impressions show in Analytics within a minute.
Still nothing? Look at allowed domains, the item's URL pattern and its audience.

What it adds to your site

The snippet loads its renderers from https://app.cueston.com/sdk/v1/ when they're needed and talks to https://app.cueston.com/api/. Guidance renders inside a Shadow DOM, so your styles and Cueston's don't affect each other. It sets no cookies. See Data handling for what it stores and sends.

Script attributes

Check it works

What it adds to your site

On this page