React SDK

AssistifyScript renders the loader. useAssistify drives the widget.

npm install @assistifychat/widget

Render the script

Drop <AssistifyScript> into your root layout. It's a server component:

import { AssistifyScript } from '@assistifychat/widget/react';
 
export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <AssistifyScript widgetId="WIDGET_ID" />
      </body>
    </html>
  );
}

Pre-fill the visitor identity through the identity prop:

<AssistifyScript
  widgetId="WIDGET_ID"
  identity={{ email: visitor.email, userHash: visitor.userHash }}
/>

Boot-time identity requires userHash. Without it the backend ignores the identity and the session starts anonymous (the widget logs a console warning). To attach an unverified email instead, call useAssistify().user.identify(...) on the client. See Identity verification.

Drive from a component

'use client';
import { useAssistify } from '@assistifychat/widget/react';
 
export function SupportButton() {
  const widget = useAssistify({ widgetId: 'WIDGET_ID' });
  return <button onClick={() => widget.chat.open()}>Support</button>;
}

useAssistify returns the same handle on every call. The widget is a page-level singleton; it survives unmounts and StrictMode double-renders.

Panel-only (your own launcher)

Set launcher: false to render the chat panel without the floating launcher, then open it from your own control:

'use client';
import { useAssistify } from '@assistifychat/widget/react';
 
export function HelpButton() {
  const widget = useAssistify({ widgetId: 'WIDGET_ID', launcher: false });
  return <button onClick={() => widget.chat.open()}>Help</button>;
}

Closing the panel hides it completely. The <AssistifyScript launcher={false} /> prop applies the same option to the declarative install. See Panel-only (custom launcher).

Other frameworks

There's no /vue or /svelte subpath. Render the script tag through your template engine, then call mount() from a module-level setup file so it runs once per page rather than once per component. The handle behaves exactly like the one useAssistify returns.

Tell your visitors

Your privacy policy should mention the chat. See Visitor recognition → Your privacy policy for the two notices to link.