Free, open-source embeddable chat widget. One script tag — visitors see a floating widget with links to your WhatsApp, Slack, Telegram, LinkedIn, and more.
No backend. No accounts. No nonsense.
<scriptsrc="https://unpkg.com/kleenchat/widget.js"
data-whatsapp="https://wa.me/1234567890"
data-slack="https://join.slack.com/..."
data-linkedin="https://linkedin.com/in/you"
defer></script>That's it. Widget auto-detects channels from data-* attributes.
| Channel | Attribute | Example URL |
|---|---|---|
data-whatsapp | https://wa.me/1234567890 | |
| Slack | data-slack | https://join.slack.com/... |
data-linkedin | https://linkedin.com/in/you | |
| Telegram | data-telegram | https://t.me/username |
data-email | mailto:hello@example.com | |
| Messenger | data-messenger | https://m.me/pagename |
| X | data-x | https://x.com/handle |
| Discord | data-discord | https://discord.gg/invite |
| Calendly | data-calendly | https://calendly.com/you |
For custom headings, avatars, colors — set window.kleenchat before loading the script:
<script>window.kleenchat={heading: "Chat with us ✌️",subtitle: "Pick your platform",fabHeading: "Need help?",fabSubtitle: "Real person here 👋",avatars: ["avatar1.jpg","avatar2.jpg"],ctaLabel: "Book a demo",ctaUrl: "https://cal.com/you",theme: {primaryColor: "#6366f1"},};</script><scriptsrc="https://unpkg.com/kleenchat/widget.js" data-whatsapp="..." defer></script>| Option | Type | Default |
|---|---|---|
heading | string | "Chat with us" |
subtitle | string | "Pick your preferred channel" |
fabHeading | string | "Need help?" |
fabSubtitle | string | "We typically reply in minutes" |
avatars | string[] | [] |
ctaLabel | string | — |
ctaUrl | string | — |
theme.primaryColor | string | "#6366f1" |
npm install kleenchat
# Copy node_modules/kleenchat/dist/widget.js to your static filesbun install
bun run build # builds dist/widget.js
bun run dev # vite dev server# Site (kleenchat.com)cd site
bun install
bun run devMIT