- Free Tools
- Widget Maker
Widget Maker
Free contact widget builder for your website
A contact widget is a floating button on your website that opens a panel with one-click access to your messaging platforms — WhatsApp, Telegram, Messenger, Instagram, and more. Visitors prefer their own apps over filling out web forms, and businesses get higher contact rates and faster replies.
This tool builds the widget visually. Pick your colors, your platforms, your icon, copy the embed code, and paste it into your website. The live preview is the real widget — not a mockup — so what you see is exactly what your visitors will see.
The widget itself is open source and hosted on unpkg, so the embed code references a single CDN URL. There's no account, no signup, no tracking. Configuration is encoded in a single attribute on the script tag, so the widget is portable across WordPress, Shopify, Squarespace, plain HTML, and any framework.
For a fuller solution that aggregates conversations from every platform into one inbox, with team chat, AI replies, and analytics, see the paid Converge product. The free widget is a great starting point for solo operators and small teams that just want to surface the right contact channels.
How to Use This Generator
- Header: set the title (greeting line) and optional subtitle visitors see when the widget opens.
- Brand: pick brand color, background color, and title text color. Optionally upload a header image (banner background).
- Style: pick a border radius (rounded panel) and button radius (rounded launcher button), then a button icon.
- Platforms: toggle the platforms you offer. For each enabled platform, paste the link or address (e.g. wa.me URL for WhatsApp, t.me URL for Telegram, your email).
- Optional: set a popup message that appears next to the launcher, or a direct call phone number.
- Export: Copy Embed Code copies a one-line script tag to your clipboard. Paste it into your site before
</body>. Or downloadwidget-config.jsonif your platform expects a config file.
Pro Tips
- Use a real WhatsApp link: the format is
https://wa.me/15551234567(your number, no plus, no spaces). You can also append?text=Hello%20therefor a pre-filled message. - Telegram public username: use
https://t.me/yourusername. For private accounts usehttps://t.me/+phonenumber. - Match the brand: the launcher button color should reuse your existing primary color. Subtle wins — flashy widgets get ignored.
- Test on mobile first: ~70% of widget clicks happen on phones, where panel sizing matters most.
- Two channels minimum, four maximum: too few looks limited, too many causes choice paralysis. WhatsApp + Email is a strong default.
- Re-encode on every change: the widget reads the config attribute on first load. If you copy the embed once and edit later, copy again — the encoded config is different.