Worktual Chat UI

Drop-in React chat widget for Worktual — presentation only.

The component talks to the Worktual API with an embed JWT (not your org API key). Mint tokens from your backend with @igris262626/sdk.

Install

npm install @igris262626/chat-ui react react-dom

Quick start

import { WorktualChat } from "@igris262626/chat-ui";
import "@igris262626/chat-ui/styles.css";

export function SupportChat() {
  return (
    <WorktualChat
      chatbotId={process.env.NEXT_PUBLIC_CHATBOT_ID!}
      token={embedJwtFromYourBackend}
      apiBase="https://api.worktual.in"
      name="Lola"
      subtitle="Conversational Assistant"
      poweredBy="Worktual"
      color="#000000"
      logoUrl="https://cdn.example.com/logo.png"
      greeting="Hi — how can I help you today?"
    />
  );
}

Mint embedJwtFromYourBackend on the server (client.embedToken(chatbotId)). Never ship the org API key to the browser.

Customization

| Prop | Description | |------|-------------| | color | Brand color (header, FAB, user bubbles) | | logoUrl | Avatar / header logo | | greeting | First assistant message | | name / subtitle / poweredBy | Header copy |

Closing the panel ends the chat session on the API (/sessions/end).

Non-React sites

Use the hosted launcher script instead:

<script
  src="https://YOUR_WIDGET_HOST/chatbot.js"
  data-chatbot-id="CHATBOT_UUID"
  data-token="EMBED_JWT"
  data-api="https://api.worktual.in"
  data-color="#000000"
  data-greeting="Hi — how can I help?"
></script>

Architecture

Browser (@igris262626/chat-ui)
   │  Authorization: Bearer <embed JWT>
   ▼
Worktual API

Your backend (@igris262626/sdk)
   │  Authorization: Bearer <access token>
   └── create bot · ingest PDF · mint embed JWT

Peer dependencies

• react ^18 || ^19
• react-dom ^18 || ^19

License

MIT © Worktual