Skip to content

README.md

Latest commit

 

History

History
90 lines (71 loc) · 2.82 KB

README.md

File metadata and controls

90 lines (71 loc) · 2.82 KB

KleenChat

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.

Quick Start

<script
  src="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.

Supported Channels

Channel Attribute Example URL
WhatsApp data-whatsapp https://wa.me/1234567890
Slack data-slack https://join.slack.com/...
LinkedIn data-linkedin https://linkedin.com/in/you
Telegram data-telegram https://t.me/username
Email 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

Customization

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>
<script src="https://unpkg.com/kleenchat/widget.js" data-whatsapp="..." defer></script>

Config Options

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"

Self-Hosting

npm install kleenchat
# Copy node_modules/kleenchat/dist/widget.js to your static files

Development

bun install
bun run build     # builds dist/widget.js
bun run dev       # vite dev server

# Site (kleenchat.com)
cd site
bun install
bun run dev

License

MIT