Installing the Embed Script

The Cueflow embed script displays your messages to users in your website or application.

Basic Installation

Add the script tag to your HTML, typically before the closing </body> tag:

<script src="https://script.cueflow.so/embed/cueflow.js"
        data-workspace-id="YOUR_WORKSPACE_ID"></script>

Find your Workspace ID on the Install page in the Cueflow dashboard.

Initialize with User Data

After the script loads, call Cueflow.init() with your user's information:

Cueflow.init({
  id: 'user-123',           // Required - unique identifier
  email: '[email protected]',
  name: 'Jane Smith',
  plan: 'pro',
  role: 'admin',
  signedUpAt: '2024-01-15'
});

Required Fields

Field	Type	Description
id	string	Required. Unique identifier for the user (your internal user ID)

Standard Fields

Field	Type	Description
email	string	User's email address
name	string	User's display name
phone	string	Phone number
plan	string	Subscription plan (e.g., "free", "pro", "enterprise")
role	string	User role (e.g., "admin", "member")
signedUpAt	string	ISO date when user signed up

Custom Attributes

You can pass any additional properties as custom attributes:

Cueflow.init({
  id: 'user-123',
  email: '[email protected]',
  // Custom attributes
  company: 'Acme Inc',
  teamSize: 50,
  isTrialing: true
});

Custom attributes appear in Cueflow and can be used for targeting rules.

Single Page Applications (SPA)

Cueflow automatically detects navigation in SPAs by listening to the History API. Messages are re-evaluated on each page change.

If you need to manually trigger a message check (e.g., after a state change):

Cueflow.check();

Updating User Data

When user attributes change, update Cueflow to refresh targeting:

// User upgraded their plan
Cueflow.update({
  plan: 'enterprise'
});

Tracking Events

Track user actions to trigger event-based messages:

// Track a simple event
Cueflow.track('completed_onboarding');

// Track with properties
Cueflow.track('feature_used', {
  feature: 'export',
  format: 'csv'
});

Cleanup

When a user logs out or you need to remove Cueflow:

Cueflow.shutdown();

This removes all messages and cleans up event listeners.

Framework Examples

React

import { useEffect } from 'react';

function App({ user }) {
  useEffect(() => {
    if (user) {
      window.Cueflow.init({
        id: user.id,
        email: user.email,
        name: user.name,
        plan: user.subscription.plan
      });
    }

    return () => {
      window.Cueflow.shutdown();
    };
  }, [user]);

  return <div>...</div>;
}

Vue

<script setup>
import { onMounted, onUnmounted } from 'vue';

const props = defineProps(['user']);

onMounted(() => {
  if (props.user) {
    window.Cueflow.init({
      id: props.user.id,
      email: props.user.email,
      name: props.user.name
    });
  }
});

onUnmounted(() => {
  window.Cueflow.shutdown();
});
</script>

Next.js

'use client';

import { useEffect } from 'react';
import Script from 'next/script';

export function CueflowProvider({ user, workspaceId }) {
  useEffect(() => {
    if (user && window.Cueflow) {
      window.Cueflow.init({
        id: user.id,
        email: user.email,
        name: user.name
      });
    }
  }, [user]);

  return (
    <Script
      src="https://script.cueflow.so/embed/cueflow.js"
      data-workspace-id={workspaceId}
      strategy="afterInteractive"
    />
  );
}

Troubleshooting

Messages not appearing

1. Check that the Workspace ID is correct

2. Verify Cueflow.init() is called with a valid id

3. Ensure your message is Published (not Draft)

4. Check targeting rules match the current user/page

Console errors

• Cueflow: user.id is required - Make sure you pass an id field to init

• Cueflow: Already initialized - Only call init once per page load

• Cueflow: Not initialized - Call init before using other methods