Documentation

Quick Start

Add one script tag to your HTML. That's it.

<script
  src="https://unpkg.com/kleenchat/widget.js"
  data-whatsapp="https://wa.me/1234567890"
  data-slack="https://join.slack.com/..."
  defer>
</script>

The widget auto-detects channels from data-* attributes and shows the correct icons.

Supported Channels

Add any combination of these as data-{channel}="{url}" attributes:

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 advanced configuration, 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="https://wa.me/123" defer></script>

Config Options

Option	Type	Default	Description
`heading`	string	"Chat with us"	Modal heading text
`subtitle`	string	"Pick your preferred channel"	Modal subtitle
`fabHeading`	string	"Need help?"	Floating button heading
`fabSubtitle`	string	"We typically reply in minutes"	Floating button subtitle
`avatars`	string[]	[]	URLs of avatar images to display
`ctaLabel`	string	—	CTA button text (optional)
`ctaUrl`	string	—	CTA button link (optional)
`theme.primaryColor`	string	"#6366f1"	Primary accent color

Self-hosting

You can self-host the widget instead of using unpkg:

npm install kleenchat

Then copy node_modules/kleenchat/dist/widget.js to your static files and reference it directly.