Quay Chat

Open-source site chat widget. Visitors message from your site; you answer in Slack, Telegram, a webhook, or your own backend.

Quay is the UI. You bring the backend. Point endpoint at something that speaks the Quay HTTP protocol, or start from the example adapters.

Desktop-only for now (large screens with fine pointers). Mobile support comes later.

Install

npm i @aligfx/quay

import { createQuay } from "@aligfx/quay";
import "@aligfx/quay/style.css";

createQuay({
  endpoint: "https://chat.example.com",
  title: "Support",
  avatar: "/avatar.png",
  position: "right",
  theme: {
    panel: "#141416",
    well: "#1a1a1d",
    fg: "#ececee",
    muted: "#8b8b93",
  },
});

Script tag (CDN)

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aligfx/quay/dist/quay.css" />
<script src="https://cdn.jsdelivr.net/npm/@aligfx/quay/dist/quay.iife.js"></script>
<script>
  Quay.init({
    endpoint: "https://chat.example.com",
    title: "Support",
  });
</script>

Quick demo

Live: aligfx.github.io/quay

Local:

git clone https://github.com/aligfx/quay.git
cd quay
npm install
npm run build
npm run demo

Open the URL printed in the terminal. Pushing to main rebuilds the hosted demo via GitHub Pages.

Configuration

| Option | Type | Default | Description | | --- | --- | --- | --- | | endpoint | string | — | Required. Backend base URL | | title | string | "Chat" | Panel title | | avatar | string | — | Avatar image URL | | hostLabel | string | title / "Host" | Label on host messages | | emptyText | string | — | Empty-state copy | | placeholder | string | — | Composer placeholder | | subtitle | string | — | Optional line on the name gate | | position | "left" \| "right" | "right" | Dock side | | storageKey | string | "quay_chat_v1" | localStorage key | | theme | object | — | CSS token overrides (fg → --quay-fg) | | desktopOnly | boolean | true | Skip mount on non-desktop |

Full reference: docs/configuration.md

Bring your own channel

1. Deploy something that implements docs/protocol.md
2. Or adapt an example:
   • Generic webhook
   • Slack Incoming Webhook
   • Telegram Bot

Docs

• Configuration
• HTTP protocol
• Theming
• Adapters

License

MIT