User Sessions

User Sessions#

The Widget SDK supports both anonymous and identified visitors. When you associate a visitor with your internal user ID, conversations persist across devices, and the chatbot personalizes greetings. This page covers the full session lifecycle — from login to logout.

How Sessions Work#

By default, the widget assigns an anonymous visitor ID stored in the browser’s localStorage. This means a visitor returning in the same browser sees their previous chat history — but switching devices or clearing storage starts a new identity.

When you identify a visitor with your own user ID, the chatbot links conversations to that identity. The same user sees consistent chat history regardless of which device they use.

Login — Identifying a User#

When a user logs in, call Gydr.identify() with their user ID and optional profile data before creating the widget. The user ID is encoded into the widget at creation time and cannot be changed after.

// After your authentication completes
Gydr.identify({
  visitorId: 'customer-123',
  name: 'Sarah',
  email: 'sarah@example.com',
  phone: '+60123456789',
  company: 'Acme Corp'
});

// Then create the widget
Gydr.bubble({ apiKey: 'pk_live_YOUR_KEY' });

Logout — Clearing User Data#

When a user logs out, you must clear the previous user’s chat data to prevent the next user from seeing it. There are two approaches depending on your integration method.

Method 1: Programmatic — Gydr.reset()#

The recommended approach for JavaScript-based integrations. Calling reset() clears all visitor data from browser storage, destroys the active widget, and resets the SDK to a clean state.

function handleLogout() {
  // 1. Clear chatbot state
  Gydr.reset();

  // 2. Perform your logout logic
  auth.signOut();

  // 3. Optionally, set up a new anonymous widget
  Gydr.bubble({ apiKey: 'pk_live_YOUR_KEY' });
}

Method 2: Data Attributes — Empty Visitor ID#

For data-attribute-only integrations (no JavaScript), set data-visitor-id to an empty string on the logged-out page. The widget detects the empty value and clears the in-memory identified state, so the next widget initialization starts as an anonymous visitor. Note that this does not wipe storage inside the chatbox iframe — for a complete data wipe (e.g. after logout on a shared device) use Gydr.reset() programmatically instead.

<!-- Empty data-visitor-id signals a logout -->
<script
  src="https://cdn.infinichat.dev/widget.js"
  data-api-key="pk_live_YOUR_KEY"
  data-visitor-id=""
  async
></script>

Switching Users (User A → User B)#

On shared devices (kiosks, family computers), one user may log out and another log in without a page reload. Always call reset() between users to guarantee full session isolation.

// User A logs out
Gydr.reset();

// User B logs in
Gydr.identify({
  visitorId: 'user-b-456',
  name: 'Alex'
});
Gydr.bubble({ apiKey: 'pk_live_YOUR_KEY' });

What reset() Clears#

When Gydr.reset() is called, the SDK performs the following cleanup:

Common Patterns#

Conditional Widget Based on Auth State#

Show an identified widget for logged-in users and an anonymous widget for guests.

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

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

  useEffect(() => {
    // Reset on auth state change
    window.Gydr?.reset();

    if (isAuthenticated && user) {
      window.Gydr?.identify({
        visitorId: user.id,
        name: user.name,
        email: user.email
      });
    }

    // Create widget for both authenticated and anonymous
    window.Gydr?.bubble({ apiKey: 'pk_live_YOUR_KEY' });

    return () => {
      window.Gydr?.reset();
    };
  }, [isAuthenticated, user]);

  return null; // Widget renders itself
}

SPA Navigation with Auth Changes#

In single-page applications where the page does not reload between login and logout, use reset() as part of your auth state change handler.

function AuthProvider({ children }) {
  const [user, setUser] = useState(null);

  const login = async (credentials) => {
    const user = await api.login(credentials);
    setUser(user);

    // Set up identified widget
    window.Gydr?.reset();
    window.Gydr?.identify({
      visitorId: user.id,
      name: user.name
    });
    window.Gydr?.bubble({ apiKey: 'pk_live_YOUR_KEY' });
  };

  const logout = async () => {
    await api.logout();

    // Clear chat state and start anonymous session
    window.Gydr?.reset();
    window.Gydr?.bubble({ apiKey: 'pk_live_YOUR_KEY' });

    setUser(null);
  };

  return (
    <AuthContext.Provider value={{ user, login, logout }}>
      {children}
    </AuthContext.Provider>
  );
}