Embed Widget

Installation

Choose your preferred installation method:

Script Tag
React SDK

Add the script before </body>:

<script
  src="https://dashboard.argide.ai/argide-b2b.iife.js"
  data-api-url="https://api.argide.ai"
  data-product-id="YOUR_PRODUCT_ID"
></script>

import Script from 'next/script'

export default function Layout({ children }) {
  return (
    <>
      {children}
      <Script
        src="https://dashboard.argide.ai/argide-b2b.iife.js"
        data-api-url="https://api.argide.ai"
        data-product-id="YOUR_PRODUCT_ID"
        strategy="afterInteractive"
      />
    </>
  )
}

Attribute	Required	Description
`data-product-id`	Yes	Your product ID from dashboard
`data-api-url`	No	Defaults to `https://api.argide.ai`
`data-user-id`	No	Your own ID for the user. See User Identification
`data-name`	No	The user’s name. See User Identification
`data-email`	No	The user’s email. See User Identification
`data-visibility`	No	Set to `"false"` to defer the widget. See Visibility

The agent’s display name comes from your dashboard settings, not from the script tag.After the script loads, use window.argide() to pass functions and objects:

Command	Description
`update`	User attributes and visibility. See Identity
`identify`	JWT token for authenticated API calls. See Identity
`registerTools`	Client-side tool handlers
`setNavigate`	SPA navigation function for internal links (widget mode only)
`resetAndClearSession`	Clear the identity, conversation, and session — use on logout
`resetAndPreserveSession`	Clear the identity but keep the current conversation

Install the SDK:

npm install @argide/react-chat

Add to your app:

import { ArgideWidget } from '@argide/react-chat';
import '@argide/react-chat/styles.css';

export function ArgideWidgetClient() {
  return (
    <ArgideWidget
      productId="YOUR_PRODUCT_ID"
      apiUrl="https://api.argide.ai"
    />
  );
}

The agent’s display name comes from your dashboard settings.

Prop	Required	Description
`productId`	Yes	Your product ID from dashboard
`apiUrl`	Yes	`https://api.argide.ai`
`getIdentityToken`	No	Async function returning a JWT. Called on mount — the SDK does not re-call it when the token expires. See Identity Verification
`context`	No	Page context object sent with every message. Reactive — updates when the object changes
`toolRenderers`	No	Map of tool name → React component for inline rendering. See Tool Renderers
`onToolResult`	No	Callback `(toolName, result) => void` fired when a server-side tool completes
`navigate`	No	SPA navigation function (e.g. `router.push`) for internal links

Copilot Sidebar

A full-height sidebar that automatically pushes your page content aside. Wrap your app with ArgideProvider and place ArgideCopilot alongside your app:

npm install @argide/react-chat

import { ArgideProvider, ArgideCopilot } from '@argide/react-chat';
import '@argide/react-chat/styles.css';

function App() {
  return (
    <ArgideProvider
      productId="YOUR_PRODUCT_ID"
      apiUrl="https://api.argide.ai"
    >
      <YourApp />
      <ArgideCopilot position="right" width={400} />
    </ArgideProvider>
  );
}

Find Your Product ID

In the dashboard, open Deploy → Install
Copy your Product ID

User Identity

There are two ways to tell the agent who the user is. Pick based on what you need.

You want	Use	Backend needed
The user’s name on their conversations	`data-*` or `update`	No
The agent to call your API on the user’s behalf	`identify`	Yes

Attributes — pass the user on the script tag, or with the update command in a single-page app:

window.argide('update', {
  user_id: 'usr_8241',
  name: 'Ada Lovelace',
  email: 'ada@example.com',
});

See User Identification for the full set of attributes, custom attributes, and single-page app setup. JWT — mint a token on your backend and pass it, so Argide can forward it to your API:

window.argide('identify', { token: 'jwt-from-your-backend' });

See Identity Verification for the backend JWT setup. On logout, clear the identity:

window.argide('resetAndClearSession');

Client-Side Tools

Register tools the agent can call. The return value from your handler is sent back to the agent, so it can confirm success or handle errors intelligently. See Client-Side Tools for full setup.

Script Tag
React SDK

window.argide('registerTools', {
  navigateToPage: async ({ path }) => {
    router.push(path)
    return { success: true }  // Agent sees this result
  },

  showUpgradeModal: async () => {
    document.getElementById('upgrade-modal').showModal()
    return { shown: true }
  }
})

import { ArgideWidget } from '@argide/react-chat';

function App() {
  const tools = {
    navigateToPage: async ({ path }) => {
      router.push(path);
      return { success: true };  // Agent sees this result
    },

    showUpgradeModal: async () => {
      document.getElementById('upgrade-modal').showModal();
      return { shown: true };
    }
  };

  return (
    <ArgideWidget
      productId="YOUR_PRODUCT_ID"
      apiUrl="https://api.argide.ai"
      tools={tools}
    />
  );
}

Return meaningful results from your tools. The agent uses these to provide accurate feedback like “Done! I’ve navigated you to Settings” or handle errors gracefully.

Tool Result Callbacks

React to server-side tool completions — refresh data, show a diff UI, dispatch events, etc.

Script Tag
React SDK

window.argide('onToolResult', (toolName, result) => {
  if (toolName === 'propose_revision') {
    showDiffUI(result);
  }
});

<ArgideWidget
  onToolResult={(toolName, result) => {
    if (toolName === 'propose_revision') showDiffUI(result);
  }}
  ...
/>

Tool Renderers

Render custom visuals inline in the chat when a tool completes — data cards, tables, charts, and more. Your renderer receives { result, status } and returns one of:

Return type	Use case
HTML string	Data cards, tables, simple visuals
HTMLElement	Charts via Chart.js, D3, ECharts, Plotly
ReactNode	Full React components (React SDK only)

Script Tag
React SDK

Data Card

Show key metrics with change indicators:

window.argide('registerToolRenderers', {
  query_analytics_chart: ({ result }) => {
    const r = result || {};
    const color = r.changePercent > 0 ? '#059669' : '#ef4444';
    const arrow = r.changePercent > 0 ? '↑' : '↓';
    return `<div style="padding:12px; border:1px solid #e2e8f0; border-radius:8px; background:#fff; font-family:system-ui,sans-serif;">
      <div style="font-size:13px; font-weight:600; color:#0f172a;">${r.title || 'Metric'}</div>
      <div style="font-size:24px; font-weight:700; color:#2563eb; margin-top:4px;">${r.currentValue || 'N/A'}</div>
      ${r.changePercent != null
        ? `<div style="font-size:12px; color:${color};">${arrow} ${Math.abs(r.changePercent).toFixed(1)}%</div>`
        : ''}
      ${r.dashboard_url
        ? `<a href="${r.dashboard_url}" target="_blank" style="font-size:11px; color:#2563eb; text-decoration:none; margin-top:8px; display:inline-block;">View full chart ↗</a>`
        : ''}
    </div>`;
  }
});

Table

Display structured data in rows and columns:

window.argide('registerToolRenderers', {
  query_data_table: ({ result }) => {
    const r = result || {};
    const headers = r.columns || [];
    const rows = r.rows || [];
    return `<div style="border:1px solid #e2e8f0; border-radius:8px; overflow:hidden; font-family:system-ui,sans-serif;">
      <table style="width:100%; border-collapse:collapse; font-size:12px;">
        <thead>
          <tr style="background:#f8fafc;">
            ${headers.map(h =>
              '<th style="padding:8px 12px; text-align:left; font-weight:600; border-bottom:1px solid #e2e8f0;">' + h + '</th>'
            ).join('')}
          </tr>
        </thead>
        <tbody>
          ${rows.map(row =>
            '<tr style="border-bottom:1px solid #f1f5f9;">' +
              row.map(cell =>
                '<td style="padding:6px 12px; color:#334155;">' + cell + '</td>'
              ).join('') +
            '</tr>'
          ).join('')}
        </tbody>
      </table>
    </div>`;
  }
});

Chart (Chart.js, D3, ECharts)

For interactive charts, return an HTMLElement instead of a string. The widget mounts it directly:

<!-- Load Chart.js (or any charting library) -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<script>
window.argide('registerToolRenderers', {
  query_analytics_chart: ({ result }) => {
    const canvas = document.createElement('canvas');
    canvas.style.width = '100%';
    canvas.style.maxHeight = '200px';
    new Chart(canvas, {
      type: 'line',
      data: {
        labels: result.data.map(d => d.date),
        datasets: [{
          label: result.title,
          data: result.data.map(d => d.value),
          borderColor: '#2563eb',
          tension: 0.3,
        }]
      },
      options: { responsive: true, plugins: { legend: { display: false } } }
    });
    return canvas;  // Return the DOM element
  }
});
</script>

Timing: window.argide() must be called after the Argide script has loaded. In plain HTML this happens naturally (scripts execute in order). In Next.js, use onLoad:

<Script
  src="https://dashboard.argide.ai/argide-b2b.iife.js"
  data-product-id="YOUR_PRODUCT_ID"
  data-api-url="https://api.argide.ai"
  strategy="afterInteractive"
  onLoad={() => {
    window.argide('registerToolRenderers', { ... });
  }}
/>

The widget uses Shadow DOM for CSS isolation. Use inline style attributes — Tailwind classes and external CSS won’t apply inside the widget.

React SDK renderers return JSX — full React components with hooks, state, and libraries like Recharts:

<ArgideWidget
  toolRenderers={{
    query_analytics_chart: ({ result }) => <MyChart data={result.data} />,
  }}
  ...
/>

Troubleshooting

Issue	Solution
Widget not appearing	Check Product ID, verify script/component is rendered
Console errors	Check `apiUrl` is correct
CORS errors	Contact support to whitelist your domain

Get Started

Setup

Agent

Agent SDK

Knowledge Base

Integration

Monitor

Organization

Installation

Find Your Product ID

User Identity

Client-Side Tools

Tool Result Callbacks

Tool Renderers

Data Card

Table

Chart (Chart.js, D3, ECharts)

Troubleshooting

​Installation

​Find Your Product ID

​User Identity

​Client-Side Tools

​Tool Result Callbacks

​Tool Renderers

​Data Card

​Table

​Chart (Chart.js, D3, ECharts)

​Troubleshooting

Installation

Find Your Product ID

User Identity

Client-Side Tools

Tool Result Callbacks

Tool Renderers

Data Card

Table

Chart (Chart.js, D3, ECharts)

Troubleshooting