@hostwebhook/chat-widget

Framework-agnostic chat widget for HostWebhook chat triggers. Works in any frontend framework via a single Web Component, plus a thin React wrapper for teams that want typed JSX and native event handlers.

npm install @hostwebhook/chat-widget

Plain HTML / Vue / Svelte / Angular

<script type="module">
  import '@hostwebhook/chat-widget';
</script>

<hw-chat chat-id="abc123"></hw-chat>

React / Next.js

import { HwChat } from '@hostwebhook/chat-widget/react';

export default function Page() {
  return <HwChat chatId="abc123" />;
}

Signed triggers (authenticated embeds)

When the trigger is in signed mode, provide a callback that fetches an HMAC signature from your backend. The widget caches the token and refreshes it automatically before the 5-minute window expires.

<HwChat
  chatId="abc123"
  authProvider={async () => {
    const r = await fetch('/api/my-chat-auth', { credentials: 'include' });
    return r.json(); // { sig, ts }
  }}
/>

Or declaratively (no JS):

<hw-chat chat-id="abc123" auth-endpoint="/api/my-chat-auth"></hw-chat>

Your backend computes:

const sig = crypto.createHmac('sha256', process.env.HW_CHAT_SECRET)
  .update(`${sessionId}:${ts}`)
  .digest('hex');

Theming

Every customisable token is a CSS variable on the host element:

hw-chat {
  --hw-primary: #7c3aed;
  --hw-bg: #09090b;
  --hw-text: #fafafa;
  --hw-muted: #71717a;
  --hw-radius: 16px;
}

Status

v0.1 — API plumbing + Web Component registration. Full ChatView UI port ships next. Existing <script src=".../widget.js"> embed still works and will be switched to this package under the hood in a later phase.