Host guide: React & Next.js

This content is for v1.x. Switch to the latest version for up-to-date documentation.

React apps should use the component instead of the script embed — same features, no global config object, fully typed props.

React

import { ChatWidget } from "claudius-chat-widget";
import "claudius-chat-widget/style.css";

export function App() {
  return (
    <ChatWidget
      apiUrl="https://your-worker.workers.dev"
      title="Support"
      subtitle="Ask me anything"
      theme="auto"
      accentColor="#0057a3"
      position="bottom-right"
    />
  );
}

All options from the widget reference are props, including locale, translations, and triggers (with real RegExp support in matchUrl/pattern).

Next.js

The widget touches window, sessionStorage, and matchMedia, so render it as a client component:

"use client";

import { ChatWidget } from "claudius-chat-widget";
import "claudius-chat-widget/style.css";

export function Chat() {
  return <ChatWidget apiUrl="https://your-worker.workers.dev" theme="auto" />;
}

Mount it once in your root layout. On the Pages Router, load it with next/dynamic and ssr: false instead.