HomeFeatures
Pricing
AboutContact
Sign InStart for free
chatFree Embeddable Chat Widget Generator

WhatsApp Chat Button & Website Widget Generator

Create an interactive floating WhatsApp chat button with custom greeting popups, agent profiles, and brand styling. Ready for WordPress, Shopify, Webflow, and custom websites.

Widget Customizer

Configure your floating WhatsApp button, branding & greeting message.

Embed Ready
Embed Code (Paste before </body>)
<!-- MSGTODAY WhatsApp Floating Chat Widget -->
<script>
(function() {
  var config = {
    phone: "919019303104",
    brand: "MSGTODAY Team",
    agent: "Sarah Jenkins",
    title: "Customer Success • Online",
    greeting: "Hi there! 👋 How can we help you today with WhatsApp Business API?",
    buttonText: "Need help? Chat with us",
    position: "right",
    color: "#00854f"
  };

  var d = document, s = d.createElement('div');
  s.id = 'msgtoday-widget-root';
  s.innerHTML = '<div style="position:fixed;bottom:24px;' + config.position + ':24px;z-index:999999;font-family:system-ui,-apple-system,sans-serif;">'
    + '<a href="https://wa.me/' + config.phone + '?text=' + encodeURIComponent(config.greeting) + '" target="_blank" rel="noopener" style="display:flex;align-items:center;gap:10px;background:' + config.color + ';color:#fff;padding:12px 18px;border-radius:999px;text-decoration:none;box-shadow:0 8px 24px rgba(0,0,0,0.18);font-size:14px;font-weight:600;transition:transform .2s;" onmouseover="this.style.transform=\'scale(1.04)\'" onmouseout="this.style.transform=\'scale(1)\'">'
    + '<svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L0 24l6.335-1.662c1.746.953 3.71 1.458 5.704 1.459h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/></svg>'
    + '<span>' + config.buttonText + '</span>'
    + '</a></div>';
  d.body.appendChild(s);
})();
</script>
Interactive Website Preview
https://yourwebsite.com
S
MSGTODAY Team
Customer Success • Online
Sarah Jenkins
Hi there! 👋 How can we help you today with WhatsApp Business API?
Now
Start Chat on WhatsAppsend

How to Install on Your CMS in 2 Minutes

WP

WordPress

Go to Appearance → Theme File Editor → footer.php, or install any free "Insert Headers and Footers" plugin and paste the snippet before </body>.

SH

Shopify

Go to Online Store → Themes → Edit code → theme.liquid. Scroll to the bottom and paste right before the closing </body> tag.

HTML

Custom React / HTML

Paste the generated <script> snippet directly into your index.html or layout.tsx before the closing body tag.

Need shared team inbox to manage all incoming website chats?

Assign chats to team members, set auto-replies, and send broadcast campaigns with MSGTODAY.

Try MSGTODAY Freearrow_forward
Chat on WhatsApp