Set Up User Context on Bubble

What You're Setting

User Context is a client-side JavaScript object. On every page where the widget loads for a logged-in user, you attach an object to window.Asyntai.userContext describing who they are. The widget sends this with each message, so the AI can reply with their name, order status, plan tier, or anything else relevant.

Keys act as labels the AI sees, so make them descriptive — use "Customer name" or "Loyalty points", not just "name" or "points".

window.Asyntai = window.Asyntai || {};
window.Asyntai.userContext = {
  "Customer name": "Sarah Chen",
  "Email": "[email protected]",
  "Subscription plan": "Pro",
  "Loyalty points": 1840,
  "Last order": "#8847, out for delivery"
};

Two ways to set it

Either assign synchronously (if data is already on the page), or provide a fetcher that runs when the chat opens. The second option is better for performance — user data is only loaded when someone actually opens the chat.

// Option A — synchronous (data already available)
window.Asyntai.userContext = { "Customer name": "Sarah", ... };

// Option B — async fetch on chat open (better performance)
window.Asyntai.fetchUserContext = function() {
  return fetch('/api/chat-context/')
    .then(r => r.json())
    .then(data => { window.Asyntai.userContext = data; });
};

How Bubble Works

Bubble's Current User is available in any HTML element via dynamic expressions. Drop an HTML element on a reusable header or the page, and use Bubble's dynamic text to inject the logged-in user's fields directly into a <script> block.

Option 1 — HTML Element with Dynamic Expressions (no plugins)

<script>
  window.Asyntai = window.Asyntai || {};
  window.Asyntai.userContext = {
    "Name":  "[Current User's Name]",
    "Email": "[Current User's email]",
    "Plan":  "[Current User's Plan]",
    "Credits": [Current User's Credits]
  };
</script>

Bracketed placeholders become Bubble dynamic expressions. Wrap string fields in quotes; numeric fields can go unquoted.

Option 2 — Toolbox Plugin (cleanest)

The free Toolbox plugin adds a "Run JavaScript" action. On a page-load workflow, trigger Run JavaScript with a composed string — this gives you Bubble's full type system for data transforms (formatting dates, joining lists, etc.) before it hits the DOM.

// In a "Run JavaScript" action on page load,
// use Bubble dynamic data inside a workflow-composed script:
window.Asyntai = window.Asyntai || {};
window.Asyntai.userContext = {
  "Name":         "[Current User's Name]",
  "Email":        "[Current User's email]",
  "Member since": "[Current User's Created Date:formatted as 2021-01-01]"
};

Khắc phục Sự cố