Cueflow.shutdown()

Remove all messages and clean up Cueflow. Call this when the user logs out or when you need to reset.

Syntax

Cueflow.shutdown()

Parameters

None.

Basic Example

// Clean up Cueflow
Cueflow.shutdown();

When to Use

User Logout

Always call shutdown() when a user logs out:

async function handleLogout() {
  await api.logout();

  // Clean up Cueflow
  Cueflow.shutdown();

  // Redirect to login
  window.location.href = '/login';
}

Switching Users

When switching between users (e.g., account impersonation):

async function switchUser(newUserId) {
  // Clean up current user's Cueflow state
  Cueflow.shutdown();

  // Get new user's data
  const newUser = await api.getUser(newUserId);

  // Re-initialize with new user
  Cueflow.init({
    id: newUser.id,
    email: newUser.email,
    name: newUser.name,
    plan: newUser.plan
  });
}

Component Unmount

In React/Vue when the component unmounts:

// React
useEffect(() => {
  Cueflow.init({ id: user.id, ... });

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

// Vue
beforeUnmount() {
  Cueflow.shutdown();
}

Testing/Development

Reset state during development or testing:

// Reset and reinitialize
Cueflow.shutdown();
Cueflow.init({ id: 'test-user', ... });

What Happens

When you call shutdown():

1. Removes all messages - Banners, modals, checklists, etc. are removed from DOM

2. Removes styles - Cueflow CSS is removed

3. Stops navigation listener - No longer listens for page changes

4. Resets internal state - User data and contact ID cleared

After shutdown(), you can call init() again with a new user.

Framework Examples

React with Auth

import { useEffect } from 'react';
import { useAuth } from './auth-context';

function CueflowProvider({ children }) {
  const { user, isAuthenticated } = useAuth();

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

    return () => {
      Cueflow.shutdown();
    };
  }, [isAuthenticated, user?.id]);

  return children;
}

Next.js App Router

// app/providers.jsx
'use client';

import { useEffect } from 'react';
import { useSession } from 'next-auth/react';

export function CueflowProvider({ children }) {
  const { data: session, status } = useSession();

  useEffect(() => {
    if (status === 'authenticated' && session?.user) {
      Cueflow.init({
        id: session.user.id,
        email: session.user.email,
        name: session.user.name
      });
    }

    if (status === 'unauthenticated') {
      Cueflow.shutdown();
    }

    return () => {
      Cueflow.shutdown();
    };
  }, [status, session?.user?.id]);

  return children;
}

Vue with Vuex

// store/auth.js
export default {
  actions: {
    async logout({ commit }) {
      await api.logout();
      commit('CLEAR_USER');

      // Clean up Cueflow
      if (window.Cueflow) {
        Cueflow.shutdown();
      }
    }
  }
}

Safe to Call Anytime

shutdown() is safe to call even if:

• Cueflow wasn't initialized

• Already shut down

• No messages are displayed

// All of these are safe
Cueflow.shutdown();
Cueflow.shutdown(); // No error
Cueflow.shutdown(); // Still no error

Complete User Session Flow

// 1. User logs in
async function handleLogin(credentials) {
  const user = await api.login(credentials);

  Cueflow.init({
    id: user.id,
    email: user.email,
    name: user.name,
    plan: user.subscription.plan
  });
}

// 2. User updates their plan
async function handleUpgrade(newPlan) {
  await api.upgradePlan(newPlan);

  Cueflow.update({
    plan: newPlan
  });
}

// 3. User logs out
async function handleLogout() {
  await api.logout();

  Cueflow.shutdown();

  window.location.href = '/login';
}

Next Steps

• Cueflow.init() - Re-initialize after shutdown

• Overview - Full embed script reference