@qemuguest/site-chat-widget

A website live-chat window and contact form. No dependencies, about 6 KB gzipped, themeable with CSS variables. Talks to @qemuguest/site-chat-server, which relays to SimpleX (one chat per customer), Telegram and email, and replies show up live in the window.

Script tag

<script src="https://unpkg.com/@qemuguest/site-chat-widget/dist/embed.global.js"
        data-endpoint="https://example.com/api/site-chat"
        data-title="Chat with us" data-accent="#15803d" defer></script>

<a href="#" data-site-chat-open>Talk to us</a>       <!-- opens the chat -->
<div data-site-chat-contact></div>                  <!-- a contact form -->

Also: data-subtitle, data-greeting, data-position="left", data-ask-details="false". Script API: window.SiteChat.open() / .close().

React

import { SiteChat, ContactForm, openSiteChat } from "@qemuguest/site-chat-widget/react";

<SiteChat
  endpoint="/api/site-chat"
  title="Chat with us"
  subtitle="We usually reply within minutes"
  greeting="Hi! Questions? Send a message and we'll reply right here."
  quickReplies={[{ q: "How much is it?", a: "£90 a month + VAT, cancel any time." }]}
  accent="#15803d"
/>
<ContactForm endpoint="/api/site-chat" />
<button onClick={openSiteChat}>Just want to get in touch</button>

Plain JS / any framework

import { createSiteChat, mountContactForm } from "@qemuguest/site-chat-widget";
const chat = createSiteChat({ endpoint: "/api/site-chat", title: "Chat with us" });
chat.open(); chat.close(); chat.destroy();
mountContactForm(document.querySelector("#contact")!, { endpoint: "/api/site-chat" });

Options

| Option | Default | | | --- | --- | --- | | endpoint | (required) | where site-chat-server is mounted | | title, subtitle, greeting | sensible English | header and first bot line | | quickReplies | [] | { q, a } chips answered instantly (not sent to the server) | | askDetails | true | ask for name / email / phone after the first message | | accent | #15803d | or theme with CSS variables | | position | "right" | "left" | | pollMs | { open: 3000, closed: 20000 } | how often to check for replies | | storageKey | "site-chat" | localStorage key; the conversation resumes after reloads | | headers | none | extra request headers | | labels | English | every UI string | | css | true | set false to ship your own stylesheet (import { css } for the default) |

Theming

.sc-root { --sc-accent: #6d28d9; --sc-radius: 12px; --sc-font: "Inter", sans-serif; }

Variables: --sc-accent, --sc-accent-ink, --sc-bg, --sc-soft, --sc-text, --sc-muted, --sc-border, --sc-radius, --sc-font, --sc-z. All classes are prefixed sc-. Messages are always rendered as text, never HTML. Icons are from Lucide (ISC).

MIT