Set Up User Context on a Custom Site

Inject user context from any framework, headless setup, or custom auth system

Standard・Pro・Enterprise プラン

Switch platform:

カスタム Shopify WooCommerce BigCommerce Ecwid OpenCart Magento PrestaShop Odoo WordPress Drupal Joomla Ghost Wix Squarespace Webflow 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; });
};

Security & size: Never include passwords, credit card numbers, API tokens, or anything sensitive — this data is on the client and visible to anyone inspecting the page. Context is capped at 2,000 characters on Standard and 10,000 characters on Pro; if you exceed it, the tail is truncated.

The General Pattern

Wherever your login logic lives — Next.js with Auth0, a Django template, a Rails view, a React SPA with Supabase — the pattern is always the same: render a small inline script on pages where a user is logged in, and set window.Asyntai.userContext with fields that help the AI.

Framework Examples

Next.js / React (with any auth provider)

// components/AsyntaiContext.jsx
'use client';
import { useEffect } from 'react';
import { useUser } from '@auth0/nextjs-auth0/client'; // or Clerk, Supabase, NextAuth...

export default function AsyntaiContext() {
  const { user } = useUser();
  useEffect(() => {
    if (!user) return;
    window.Asyntai = window.Asyntai || {};
    window.Asyntai.userContext = {
      "Customer name": user.name,
      "Email": user.email,
      "Subscription plan": user.plan ?? "Free",
    };
  }, [user]);
  return null;
}

// Then mount <AsyntaiContext /> once in your layout.

Vue 3

// In your root App.vue or a dedicated composable
import { watchEffect } from 'vue';
import { useAuth } from './composables/useAuth';

const { user } = useAuth();

watchEffect(() => {
  if (!user.value) return;
  window.Asyntai = window.Asyntai || {};
  window.Asyntai.userContext = {
    "Customer name": user.value.name,
    "Plan": user.value.plan,
  };
});

Django / Rails / Laravel / any server-rendered framework

Render the script inline in your base template so the data ships with the HTML:

{% if user.is_authenticated %}
<script>
window.Asyntai = window.Asyntai || {};
window.Asyntai.userContext = {
  "Customer name": "{{ user.get_full_name|escapejs }}",
  "Email": "{{ user.email|escapejs }}",
  "Plan": "{{ user.profile.plan|escapejs }}"
};
</script>
{% endif %}

Fetch on Demand (Recommended for Performance)

Rather than shipping user context with every page load, define a fetcher — the widget calls it only when the chat actually opens, so idle visitors don't pay the cost:

window.Asyntai = window.Asyntai || {};
window.Asyntai.fetchUserContext = function() {
  return fetch('/api/chat-context/', { credentials: 'include' })
    .then(r => r.json())
    .then(data => {
      window.Asyntai.userContext = data;
    });
};

Your /api/chat-context/ endpoint checks the session and returns the JSON object. This keeps the initial page load lean and centralizes the context definition on your server.

ヒント: If your app is fully client-side (SPA), set window.Asyntai.userContext right after your auth state resolves — typically in the same effect that triggers a re-render on login.

トラブルシューティング

The AI doesn't seem to know who I am

Open your browser DevTools → Console → type window.Asyntai.userContext after the page loads. You should see your object. If it says undefined, your script didn't run — check the script order (context must be set after the widget script loads, or be re-set whenever the user logs in).

Context works on some pages but not others

The widget reads window.Asyntai.userContext on every message. If a page loads fresh (no SPA routing), you need to set context on that page too. For single-page apps, set it once after login and update it whenever user data changes.

Data is stale after the user updates their profile

Re-assign window.Asyntai.userContext with the fresh data after any update. The next message the user sends will include the updated values — no page reload needed.

Context is truncated

You're over the size limit (2k chars Standard, 10k Pro). Trim verbose fields — keep order history to last 2-3 items, truncate long descriptions, drop fields the AI doesn't need.

User Context status page shows "Not receiving context"

Visit the User Context settings page while logged in as a test user, then send a chat message. The status refreshes within a few seconds. If still empty, check the browser console for JavaScript errors and verify the object is set before the chat message is sent.

Privacy reminder: Only share fields relevant to the conversation. Passing a customer's full purchase history when they just want to ask a general question is wasteful and can confuse the AI. Scope context to what helps.

ドキュメント