Embed the Chat Widget

The Panacea chat widget is a floating chat button that lets visitors ask questions and get instant AI-powered answers backed by your knowledge base. It runs in a Shadow DOM so it cannot conflict with your page styles.

Getting your embed snippet

Go to Integration in the left sidebar.
Copy the HTML snippet shown. It uses your tenant ID and API base URL automatically.

The snippet looks like this:

<!-- Panacea Widget Embed -->
<script>
  window.Panacea = {
    tenantId: "<YOUR_TENANT_ID>",
    apiBase: "https://panacea.aevr.online",
    persona: {
      name: "Aria",
      greeting: "Hi! How can I help?"
    },
    theme: { primaryColor: "#22c55e" },
    escalationKeywords: []
  };
</script>
<script src="https://panacea.aevr.online/widget/widget.iife.js"></script>

Replace <YOUR_TENANT_ID> with your Tenant ID (shown on the Integration page — it is not an API key).

Configuration options

The window.Panacea object accepts these fields:

Field	Type	Default	Description
`tenantId`	string	(required)	Your workspace tenant ID
`apiBase`	string	current origin	Base URL of your Panacea deployment
`theme.primaryColor`	string	`"#22c55e"`	Hex colour for the chat button
`theme.position`	string	`"bottom-right"`	`"bottom-right"` or `"bottom-left"`
`theme.zIndex`	number	2147483647	CSS z-index for the widget
`persona.name`	string	configured in dashboard	Agent display name
`persona.greeting`	string	configured in dashboard	Opening message
`persona.avatarUrl`	string	—	URL to agent avatar image
`initialMessage`	string	—	Pre-fill the chat input
`transport`	string	`"rest"`	`"rest"` or `"ws"`
`customerToken`	string	—	Signed JWT for identity-linked sessions (server-generated)
`escalationKeywords`	string[]	`[]`	Words that trigger a soft escalation offer
`showEscalationButton`	boolean	—	Show a persistent "Talk to a person" button (Growth+)
`collectVisitorInfo`	string/object/false	—	Visitor self-identification form mode (Growth+)

Installing on your website

Paste the snippet before the closing </body> tag of every page where you want the widget.

HTML site

<body>
  <!-- your content -->

  <script>
    window.Panacea = {
      tenantId: "ten_xxxxxxxxxxxx",
      apiBase: "https://panacea.aevr.online"
    };
  </script>
  <script src="https://panacea.aevr.online/widget/widget.iife.js"></script>
</body>

Next.js (App Router)

For Next.js apps, use the React component library @usepanacea/react instead of the plain IIFE snippet — it handles customer identity tokens, page context, and SSR cleanly:

// components/panacea-provider.tsx
"use client";
import { PanaceaProvider, PanaceaChat } from "@usepanacea/react";

export function PanaceaSupportProvider({ children }: { children: React.ReactNode }) {
  return (
    <PanaceaProvider
      tenantId={process.env.NEXT_PUBLIC_PANACEA_TENANT_ID!}
      apiBase={process.env.NEXT_PUBLIC_PANACEA_API_BASE}
      tokenUrl="/api/panacea-token"
    >
      {children}
      <PanaceaChat title="Support" />
    </PanaceaProvider>
  );
}

See the Integration page in the dashboard for the full React snippet including the server-side token route.

WordPress

Add the snippet to your theme's footer.php file just before </body>, or use a plugin like Insert Headers and Footers.

Identified vs anonymous sessions

By default, widget sessions are anonymous. To link sessions to a known customer (for cross-session history and identity-verified escalations):

Generate a customer token server-side using POST /api/v1/auth/customer-token.
Pass it to the widget via customerToken or the tokenUrl option.

Anonymous sessions are available on all plans. Customer identity linking requires Growth plan or above.

Testing the widget

After installing, reload your page. You should see a chat button in the corner. Click it and type a question to verify it responds.

If the widget does not appear, check the browser console for a [Panacea] window.Panacea.tenantId is required warning, which means tenantId is missing or not set before the script loads.