Getting Started7 min read

How to Pass Logged-In User Data to Your Chat Widget (Authenticated Context)

Configure your company profile, embed the chat widget, and set up authenticated user context so your AI chatbot knows who it's talking to — greeting users by name and skipping email collection for logged-in visitors.

Sam Turner··Updated

The Settings page is your control center for company identity, widget embedding, and connecting your app's user system to SupportHQ. This guide covers the main settings page, the embed snippet, and the powerful authenticated user context feature.

Company Profile

Navigate to Settings (the main page). At the top you'll see your account info:

Company Name

Your display name, shown in the dashboard and used as the default bot name if you haven't set a custom one in Branding settings. Update it here anytime — it takes effect immediately.

Slug

Auto-generated from your company name (e.g., acme-inc). This is used in URLs like your public help center at /help/acme-inc. The slug is read-only after creation.

API Key

Your unique API key (starting with pk_live_) identifies your account and is used in the embed snippet. It's partially masked in the UI for security — click to copy the full key.

Allowed Domains (Required)

Before your widget will work on any website, you must configure Allowed Domains in the Settings page. This is a security measure that prevents unauthorized sites from embedding your widget and consuming your message quota.

  • * — allow the widget on all domains
  • Specific domains (one per line) — e.g., yoursite.com. Subdomains are included automatically (app.yoursite.com, www.yoursite.com).

If this field is empty, the widget will not load — API requests will be rejected with a 403 error. You'll see a red status indicator on the settings page when no domains are configured.

Embedding the Chat Widget

Once allowed domains are configured, copy the embed snippet from the Settings page and paste it into the <body> of any webpage: 

<script src="https://supporthq.ai/widget.js" data-key="pk_live_YOUR_KEY" defer></script>

That's it — one line of code and your AI agent is live on that page. The widget appears as a floating chat bubble in the bottom-right corner.

Authenticated User Context

By default, the chat widget treats every visitor as anonymous. But if your website has a login system, you can connect it to SupportHQ so the AI knows who it's talking to — their name, email, and any other context you provide.

This means:

  • The AI greets users by name: "Hi Sarah, how can I help?"
  • No need to ask for email — the AI already has it for bookings and lead capture
  • You can show a personalized welcome message for logged-in users
  • Conversations are tied to a real user identity instead of an anonymous visitor ID

How It Works

The flow is simple:

  1. You create an API endpoint on your server that returns the current user's info
  2. You tell SupportHQ the URL of that endpoint
  3. You add data-auth="1" to the embed script tag
  4. When the widget loads, it calls your endpoint (with cookies) to get the user's info
  5. The AI uses that info to personalize the conversation

Step 1: Create Your Auth Endpoint

Create an API route on your server that returns the current logged-in user's info as JSON. The widget will call this endpoint with credentials: 'include', so your session cookies are sent automatically.

Your endpoint should return: 

{
  "name": "Sarah Johnson",
  "email": "sarah@example.com",
  "id": "usr_12345"
}

All fields are optional — return whatever you have. If the user is not logged in, return an empty object {} or a 401 status, and the widget will fall back to anonymous mode.

Example (Next.js): 

// app/api/user-context/route.ts
export async function GET(req: Request) {
  const session = await getSession(req);
  if (!session?.user) {
    return Response.json({});
  }
  return Response.json({
    name: session.user.name,
    email: session.user.email,
    id: session.user.id,
  });
}

Example (Express): 

app.get('/api/user-context', (req, res) => {
  if (!req.session?.user) {
    return res.json({});
  }
  res.json({
    name: req.session.user.name,
    email: req.session.user.email,
    id: req.session.user.id,
  });
});

Important: Your endpoint must allow CORS requests from the domain where the widget is embedded, and it must support credentials: 'include' so cookies are sent.

Step 2: Configure the Auth Endpoint URL

In Settings, find the Auth Endpoint URL field and enter the full URL of your endpoint (e.g., https://yoursite.com/api/user-context). Click Save.

Step 3: Set the Authenticated Welcome Message

Below the auth endpoint field, you'll see Authenticated Welcome Message. This is the greeting shown to logged-in users instead of the default welcome message. Use {{user_name}} to insert the user's name:

"Hi {{user_name}}! How can I help you today?"

If this field is left empty, the default welcome message is used for everyone.

Step 4: Update Your Embed Code

Add data-auth="1" to your existing embed snippet: 

<script src="https://supporthq.ai/widget.js" data-key="pk_live_YOUR_KEY" data-auth="1" defer></script>

That's the only change needed on your site. The widget now calls your auth endpoint on load, and if a user is logged in, the AI automatically has their context.

What the AI Does with User Context

When the AI has user context, it behaves differently:

  • Name — the AI addresses the user by name naturally in conversation, without asking
  • Email — the AI uses it for bookings and lead capture automatically, skipping "What's your email?" entirely
  • User ID — included in conversation metadata for your reference

If the auth endpoint fails or the user isn't logged in, the widget silently falls back to anonymous mode — no errors, no broken experience.

Agent Unavailable Fallback

When a visitor requests a live agent but no agents are online, SupportHQ needs a fallback plan. You can configure what happens in Settings → Conversations. The available fallback actions are:

Email (Default)

Sends an email notification to your configured notification address with the visitor's details and message. The simplest option — you get an email, then follow up manually.

Create Ticket

Automatically creates a support ticket in your SupportHQ Tickets dashboard. If you have SMTP configured, the visitor also receives a confirmation email with a ticket reference. This is the best option if you're using the ticket system.

HubSpot

Creates a ticket in your connected HubSpot pipeline. Requires a HubSpot connector with a configured ticket pipeline and stage. Great if your team already works out of HubSpot.

Zapier

Sends a webhook to your Zapier automation with the visitor's details. This lets you route to any tool — Slack, Notion, Asana, a Google Sheet — whatever your Zap is configured to do.

Tips

  • Test your auth endpoint — open it in a browser while logged in and verify it returns the expected JSON. Then test while logged out to confirm it returns {} or 401.
  • CORS matters — your auth endpoint must allow requests from your website's domain with credentials. If it fails silently, check browser console for CORS errors.
  • Don't expose sensitive data — only return name, email, and ID. Never include passwords, tokens, or internal account details in the auth endpoint response.
  • Use authenticated context for SaaS apps — if your users are logged in, there's no reason to make them type their name and email in chat. Connect your user system and the experience becomes seamless.
  • Set a fallback action — don't leave visitors hanging when agents are offline. The ticket fallback is the most robust option since it creates a trackable record.
  • Configure allowed domains first — the widget won't work until you add at least one domain (or *) in the Allowed Domains field. This protects your message quota from unauthorized usage.
Tags:authenticated chatbotpass user data to chat widgetpersonalized chat widgetchatbot user contextembed chat widget with authchatbot knows logged in user
All Guides