WhatsApp Website Widget Builder
Generate clean, custom, and lightweight WhatsApp chat widgets to embed on your website and convert visitors into chat leads instantly.
100% Lightweight
Pure HTML, CSS, and JS. Zero performance lag, no external tracking scripts
Widget Configuration
Configure your chat widget design and behaviors
Live Visual Preview
Interactive mock preview of your widget
<!-- ChatDivo WhatsApp Widget -->
<div id="chatdivo-wa-widget" style="position: fixed; bottom: 24px; right: 24px; z-index: 999999; font-family: -apple-system, BlinkMacSystemFont, sans-serif;">
<!-- Widget Floating Button -->
<button id="chatdivo-wa-btn" style="display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 50%; background-color: #25D366; border: none; box-shadow: 0 4px 12px rgba(0,0,0,0.15); cursor: pointer; transition: transform 0.2s ease; outline: none;">
<svg viewBox="0 0 24 24" width="32" height="32" fill="white"><path d="M12.031 6.172c-3.181 0-5.767 2.586-5.768 5.766-.001 1.298.431 2.522 1.218 3.511l-.813 2.973 3.056-.801c.961.579 2.073.886 3.208.887l.002.001c3.182 0 5.769-2.586 5.77-5.768 0-1.543-.6-2.993-1.69-4.084a5.72 5.72 0 0 0-4.083-1.69zm3.438 8.163c-.151.424-.877.83-1.206.877-.3.043-.69.077-1.127-.062-.27-.086-.607-.22-1.01-.392-1.722-.731-2.825-2.477-2.91-2.593-.086-.115-.69-.917-.69-1.723 0-.806.414-1.2.564-1.353.151-.152.33-.228.496-.228.166 0 .331.002.475.008.151.006.353-.058.552.424.2.484.685 1.67.746 1.794.06.124.1.267.018.428-.081.161-.122.259-.243.402-.121.142-.254.318-.363.427-.121.121-.248.252-.107.494.141.242.628 1.034 1.348 1.675.927.825 1.705 1.08 1.947 1.2.242.121.382.103.524-.06.141-.163.606-.704.768-.944.161-.242.323-.203.542-.121.22.082 1.393.657 1.635.778.242.121.402.181.463.284.06.103.06.592-.091 1.016z"/></svg>
</button>
<!-- Widget Chat Box Window -->
<div id="chatdivo-wa-box" style="display: none; flex-direction: column; width: 320px; border-radius: 16px; background-color: white; box-shadow: 0 8px 30px rgba(0,0,0,0.15); position: absolute; bottom: 80px; right: 0; overflow: hidden; border: 1px solid #e2e8f0;">
<!-- Chat Header -->
<div style="background-color: #25D366; color: white; padding: 20px; position: relative;">
<button id="chatdivo-wa-close" style="position: absolute; top: 12px; right: 12px; background: none; border: none; color: white; cursor: pointer; font-size: 18px; outline: none; line-height: 1;">×</button>
<div style="font-weight: bold; font-size: 16px;">Chat with Us</div>
<div style="font-size: 13px; opacity: 0.9; margin-top: 4px;">Typically replies in minutes</div>
</div>
<!-- Chat Body -->
<div style="padding: 20px; background-color: #f0f2f5; font-size: 14px; color: #111b21; line-height: 1.4;">
<div style="background-color: white; padding: 12px 16px; border-radius: 8px; box-shadow: 0 1px 2px rgba(0,0,0,0.1); max-width: 90%; word-break: break-word; position: relative; font-family: sans-serif;">
Hi there! How can we help you today?
<div style="position: absolute; top: 6px; left: -8px; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-right: 8px solid white;"></div>
</div>
</div>
<!-- Chat Action Footer -->
<div style="padding: 16px; background-color: white; text-align: center; border-top: 1px solid #e1e9eb;">
<a href="https://wa.me/1" target="_blank" style="display: inline-block; width: 100%; box-sizing: border-box; background-color: #25D366; color: white; padding: 12px; border-radius: 24px; text-decoration: none; font-weight: bold; font-size: 14px; transition: opacity 0.2s;" onmouseover="this.style.opacity='0.9'" onmouseout="this.style.opacity='1'">Start Chat</a>
</div>
</div>
</div>
<script>
(function() {
var btn = document.getElementById('chatdivo-wa-btn');
var box = document.getElementById('chatdivo-wa-box');
var close = document.getElementById('chatdivo-wa-close');
btn.onclick = function() {
box.style.display = box.style.display === 'none' || box.style.display === '' ? 'flex' : 'none';
};
close.onclick = function(e) {
e.stopPropagation();
box.style.display = 'none';
};
})();
</script>Installation instructions: Copy this entire block and paste it directly into your website's HTML file before the closing </body> tag.
Widget Tips
Contrast your button theme colors well
Use prefilled messages to qualify leads
Write helpful, descriptive headers
Enhance User Experience with a Free WhatsApp Chat Button
Driving traffic to your website is only half the battle. Once visitors arrive, you must establish an open channel of communication before they click away. Traditional contact forms are notoriously slow, and standard website live chat features are expensive and require dedicated agent setups. Embedding a free WhatsApp button connects visitors directly to your business via their favorite mobile app.
Pure Performance: Pure HTML, CSS, and JS
Most online chat builders force you to load bulky external JavaScript tracking pixels. These scripts slow down page load speed, hurting SEO scores and frustrating users. The ChatDivo WhatsApp Widget Builder creates 100% lightweight code snippets that run locally. There are no tracking scripts, no cookies, and no bloat, keeping your pages running fast while safeguarding user data privacy.
Bridging Desktop and Mobile Channels
The generated widget auto-detects user environments. When scanned or clicked on mobile devices, it automatically launches the native WhatsApp messenger. On desktop screens, it seamlessly targets the WhatsApp Web platform. This cross-device fluidity ensures that regardless of how your clients access your website, they can start chats immediately.
Explore the ChatDivo Marketing Suite
ChatDivo is committed to building free, high-utility tools for modern digital marketers. Beyond the Widget Builder, you can draft professional, character-compliant profile bios using the free AI WhatsApp Bio Generator, or construct click-to-chat links and high-quality downloadable QR codes with the WhatsApp Link Generator. To draft offline autoresponders, check out the Away Message Generator. To discover our full suite of automated products, explore the ChatDivo Tools Suite, or visit the ChatDivo Home Page to see how our AI conversational agents can help scale your support channels.