Install / Embed Script

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

Installation

Add the script tag to your HTML, 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.

Basic Setup

After loading the script, initialize Cueflow with your user's data:

<script>
  Cueflow.init({
    id: 'user-123',           // Required - unique user identifier
    email: '[email protected]',
    name: 'Jane Smith',
    plan: 'pro'
  });
</script>

Complete Example

<!DOCTYPE html>
<html>
<head>
  <title>My App</title>
</head>
<body>
  <!-- Your app content -->

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

  <script>
    // Initialize after your user logs in
    Cueflow.init({
      id: 'user-123',
      email: '[email protected]',
      name: 'Jane Smith',
      plan: 'pro',
      role: 'admin',
      signedUpAt: '2024-01-15T10:30:00Z',
      // Custom attributes
      company: 'Acme Inc',
      teamSize: 50
    });
  </script>
</body>
</html>

How It Works

Script loads - Cueflow script 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

Framework Integration

React / Next.js

// components/CueflowProvider.jsx
import { useEffect } from 'react';
import { useUser } from './your-auth-provider';

export function CueflowProvider({ children }) {
  const { user } = useUser();

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

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

  return children;
}

Vue.js

// plugins/cueflow.js
export default {
  install(app) {
    app.mixin({
      mounted() {
        if (this.$root === this && this.$store.state.user) {
          const user = this.$store.state.user;
          Cueflow.init({
            id: user.id,
            email: user.email,
            name: user.name,
            plan: user.plan
          });
        }
      },
      beforeUnmount() {
        if (this.$root === this) {
          Cueflow.shutdown();
        }
      }
    });
  }
};

Angular

// services/cueflow.service.ts
import { Injectable, OnDestroy } from '@angular/core';
import { AuthService } from './auth.service';

declare global {
  interface Window {
    Cueflow: any;
  }
}

@Injectable({ providedIn: 'root' })
export class CueflowService implements OnDestroy {
  constructor(private auth: AuthService) {
    this.auth.user$.subscribe(user => {
      if (user && window.Cueflow) {
        window.Cueflow.init({
          id: user.id,
          email: user.email,
          name: user.displayName,
          plan: user.plan
        });
      }
    });
  }

  ngOnDestroy() {
    if (window.Cueflow) {
      window.Cueflow.shutdown();
    }
  }
}

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

PreviousWorkspace Settings NextCueflow.init()

Last updated 2 days ago

Good night