JavaScript SDK

The Cueflow JavaScript SDK displays messages (banners, modals, checklists, feedback surveys, and changelogs) to your users directly in your application.

Installation

Add the loader script to your application's <head> tag:

<script>
(function(w,d,i){
  w.Cueflow=w.Cueflow||{q:[],
    init:function(u){this.q.push(['init',u])},
    update:function(u){this.q.push(['update',u])},
    track:function(e,p){this.q.push(['track',e,p])},
    check:function(){this.q.push(['check'])},
    shutdown:function(){this.q.push(['shutdown'])}
  };
  var s=d.createElement('script');s.async=1;
  s.src='https://script.cueflow.so/embed/cueflow.js';
  s.setAttribute('data-workspace-id',i);
  d.head.appendChild(s);
})(window,document,'YOUR_WORKSPACE_ID');
</script>

// Add to layout.tsx (runs once)
import Script from 'next/script';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <Script id="cueflow" strategy="afterInteractive">
          {`(function(w,d,i){
            w.Cueflow=w.Cueflow||{q:[],
              init:function(u){this.q.push(['init',u])},
              update:function(u){this.q.push(['update',u])},
              track:function(e,p){this.q.push(['track',e,p])},
              check:function(){this.q.push(['check'])},
              shutdown:function(){this.q.push(['shutdown'])}
            };
            var s=d.createElement('script');s.async=1;
            s.src='https://script.cueflow.so/embed/cueflow.js';
            s.setAttribute('data-workspace-id',i);
            d.head.appendChild(s);
          })(window,document,'YOUR_WORKSPACE_ID');`}
        </Script>
      </body>
    </html>
  );
}

<!-- Add to App.vue or main layout -->
<script setup>
import { onMounted } from 'vue';

onMounted(() => {
  window.Cueflow = window.Cueflow || {
    q: [],
    init: (u) => window.Cueflow.q.push(['init', u]),
    update: (u) => window.Cueflow.q.push(['update', u]),
    track: (e, p) => window.Cueflow.q.push(['track', e, p]),
    check: () => window.Cueflow.q.push(['check']),
    shutdown: () => window.Cueflow.q.push(['shutdown']),
  };
  const s = document.createElement('script');
  s.async = true;
  s.src = 'https://script.cueflow.so/embed/cueflow.js';
  s.setAttribute('data-workspace-id', 'YOUR_WORKSPACE_ID');
  document.head.appendChild(s);
});
</script>

<!-- Add to +layout.svelte -->
<script>
  import { onMount } from 'svelte';

  onMount(() => {
    window.Cueflow = window.Cueflow || {
      q: [],
      init: (u) => window.Cueflow.q.push(['init', u]),
      update: (u) => window.Cueflow.q.push(['update', u]),
      track: (e, p) => window.Cueflow.q.push(['track', e, p]),
      check: () => window.Cueflow.q.push(['check']),
      shutdown: () => window.Cueflow.q.push(['shutdown']),
    };
    const s = document.createElement('script');
    s.async = true;
    s.src = 'https://script.cueflow.so/embed/cueflow.js';
    s.setAttribute('data-workspace-id', 'YOUR_WORKSPACE_ID');
    document.head.appendChild(s);
  });
</script>

<slot />

Find your Workspace ID on the Developer Guide page in the Cueflow dashboard.

Initialize with User Data

After the script loads, initialize Cueflow with your user's information:

<script>
  Cueflow.init({
    id: "USER_ID",           // Required: unique user identifier
    email: "[email protected]",
    name: "John Doe",
    plan: "pro",
    // Add any custom attributes
    company: "Acme Inc",
    is_premium: true
  });
</script>

'use client';
import { useEffect } from 'react';

export function CueflowProvider({ user }) {
  useEffect(() => {
    window.Cueflow?.init({
      id: user.id,
      email: user.email,
      name: user.name,
      plan: user.plan,
      // Add any custom attributes
      company: user.company,
      is_premium: user.isPremium
    });
  }, [user]);

  return null;
}

<script setup>
import { onMounted } from 'vue';
import { useUser } from './composables/user';

const user = useUser();

onMounted(() => {
  window.Cueflow?.init({
    id: user.id,
    email: user.email,
    name: user.name,
    plan: user.plan,
    // Add any custom attributes
    company: user.company,
    is_premium: user.isPremium
  });
});
</script>

<script>
  import { onMount } from 'svelte';
  import { user } from '$lib/stores/user';

  onMount(() => {
    window.Cueflow?.init({
      id: $user.id,
      email: $user.email,
      name: $user.name,
      plan: $user.plan,
      // Add any custom attributes
      company: $user.company,
      is_premium: $user.isPremium
    });
  });
</script>

User Data Reference

Required Fields

Field

Type

Description

id

string

Unique identifier for the user

Standard Fields

Field

Type

Description

email

string

User's email address

name

string

User's display name

phone

string

User's phone number

avatarUrl

string

URL to user's avatar

role

string

User's role in your app

plan

string

Subscription plan

signedUpAt

ISO string

When the user signed up

Custom Attributes

Custom attributes must be defined in your Attributes page first. They are available for targeting rules and personalization.

How It Works

Script loads - Cueflow SDK initializes on your page
User identified - You call Cueflow.init() with user data
Messages fetched - Cueflow checks which messages match this user
Messages displayed - Matching banners, modals, etc. are rendered
Navigation tracked - On SPA navigation, messages are re-evaluated

Available Methods

Method

Description

Cueflow.init(user)

Initialize with user data

Cueflow.update(data)

Update user attributes

Cueflow.track(event, props)

Track custom events

Cueflow.check()

Manually check for messages

Cueflow.shutdown()

Remove all messages and cleanup

SPA Support

Cueflow automatically detects navigation in Single Page Applications by listening to:

pushState / replaceState calls
popstate events

When navigation is detected, Cueflow re-evaluates targeting rules and shows/hides messages accordingly.

If your SPA uses a custom routing mechanism, call Cueflow.check() after navigation to manually trigger message evaluation.

Next Steps

Cueflow.init() - Full reference for initialization
Cueflow.track() - Event tracking guide
Cueflow.update() - Updating user data
Troubleshooting - Common issues and solutions

PreviousOverview NextCueflow.init()

Last updated 1 month ago

Good night

hashtagInstallation

hashtagInitialize with User Data

hashtagUser Data Reference

hashtagRequired Fields

hashtagStandard Fields

hashtagCustom Attributes

hashtagHow It Works

hashtagAvailable Methods

hashtagSPA Support

hashtagNext Steps

Installation

Initialize with User Data

User Data Reference

Required Fields

Standard Fields

Custom Attributes

How It Works

Available Methods

SPA Support

Next Steps