R/Tools/Widget Generator
PricingStart Free Trial
100% Free Forever • Zero Watermark • No Coding Required

WhatsApp Website Chat Widget Generator

Design a custom branded floating WhatsApp chat button and interactive greeting popup card. Copy 1-line clean embed code for Shopify, WordPress, WooCommerce, Webflow, and custom HTML.

1

Destination WhatsApp Number

Where visitor messages will be sent

+92

Leading zero is automatically removed (e.g. 0300 becomes 300).

Pre-populates in the user's WhatsApp chat input when they click Start Chat.

2

Brand Name & Agent Avatar

Personalize who appears in the chat popup card

3

Greeting Message & Presets

Welcome text shown inside the chat card

1-Click Industry Presets:
4

Appearance & Screen Placement

Position, button shape, and color scheme

Custom:

Interactive Live Viewport

yourstore.com
Live Preview
Sara • Customer Support
Sara • Customer Support
Typically replies within 2 minutes

Hi there! 👋 Welcome to our store. Need help finding the right product or tracking your active order? Tap below to chat!

Just now
Start WhatsApp Chat
Test Link on WhatsApp

Embed Code Snippet

Zero Watermark
<!-- WhatsApp Chat Widget by R&B WA-CRM (crm.rbgroup.com.pk) -->
<div id="rb-wa-widget-container"></div>
<script>
(function() {
  var config = {
    phone: "923001234567",
    text: "Hi!%20I%20found%20your%20website%20and%20have%20a%20quick%20question.",
    brandName: "R&B Lifestyle Store",
    agentName: "Sara • Customer Support",
    agentStatus: "Typically replies within 2 minutes",
    avatarUrl: "https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?auto=format&fit=crop&w=160&q=80",
    greeting: "Hi there! 👋 Welcome to our store. Need help finding the right product or tracking your active order? Tap below to chat!",
    teaser: "Need help? Chat with us 👋",
    position: "right",
    style: "round",
    pillText: "Chat with us",
    themeColor: "#25D366",
    showBadge: true,
    showTeaser: true
  };

  var d = document;
  var wrap = d.getElementById("rb-wa-widget-container");
  if (!wrap) return;

  var style = d.createElement("style");
  style.innerHTML = `
    .rb-wa-float { position: fixed; bottom: 24px; ${config.position === 'left' ? 'left: 24px;' : 'right: 24px;'} z-index: 99999; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
    .rb-wa-btn { display: flex; align-items: center; gap: 8px; background: ${config.themeColor}; color: #fff; border: none; border-radius: ${config.style === 'pill' ? '50px' : '50%'}; ${config.style === 'pill' ? 'padding: 12px 20px;' : 'width: 60px; height: 60px;'} cursor: pointer; box-shadow: 0 4px 18px rgba(0,0,0,0.22); transition: transform 0.2s, box-shadow 0.2s; font-weight: 600; font-size: 14px; position: relative; }
    .rb-wa-btn:hover { transform: scale(1.06); box-shadow: 0 6px 24px rgba(0,0,0,0.3); }
    .rb-wa-badge { position: absolute; top: -2px; right: -2px; background: #ef4444; color: #fff; width: 20px; height: 20px; border-radius: 50%; font-size: 11px; font-weight: bold; display: flex; align-items: center; justify-content: center; border: 2px solid #fff; }
    .rb-wa-teaser { position: absolute; bottom: 72px; ${config.position === 'left' ? 'left: 0;' : 'right: 0;'} background: #fff; color: #1f2937; padding: 10px 14px; border-radius: 12px; font-size: 13px; font-weight: 500; white-space: nowrap; box-shadow: 0 4px 16px rgba(0,0,0,0.14); border: 1px solid rgba(0,0,0,0.06); cursor: pointer; animation: rbFade 0.3s ease; }
    .rb-wa-card { position: fixed; bottom: 96px; ${config.position === 'left' ? 'left: 24px;' : 'right: 24px;'} width: 330px; max-width: calc(100vw - 32px); background: #ffffff; border-radius: 18px; box-shadow: 0 12px 36px rgba(0,0,0,0.22); overflow: hidden; display: none; flex-direction: column; z-index: 100000; animation: rbSlide 0.25s cubic-bezier(0.16, 1, 0.3, 1); border: 1px solid rgba(0,0,0,0.08); }
    .rb-wa-card.active { display: flex; }
    .rb-wa-head { background: ${config.themeColor}; color: #fff; padding: 16px; display: flex; align-items: center; justify-content: space-between; }
    .rb-wa-agent { display: flex; align-items: center; gap: 12px; }
    .rb-wa-avatar { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255,255,255,0.4); }
    .rb-wa-name { font-weight: 700; font-size: 14px; }
    .rb-wa-sub { font-size: 11px; opacity: 0.9; }
    .rb-wa-close { background: none; border: none; color: #fff; cursor: pointer; font-size: 18px; line-height: 1; padding: 4px; }
    .rb-wa-body { background: #efeae2; padding: 16px; min-height: 120px; }
    .rb-wa-bubble { background: #fff; color: #111; padding: 12px 14px; border-radius: 0 14px 14px 14px; font-size: 13px; line-height: 1.45; box-shadow: 0 1px 3px rgba(0,0,0,0.08); margin-bottom: 8px; position: relative; }
    .rb-wa-time { font-size: 10px; color: #888; text-align: right; margin-top: 4px; }
    .rb-wa-foot { padding: 12px 16px; background: #fff; border-top: 1px solid #eee; }
    .rb-wa-send { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; background: ${config.themeColor}; color: #fff; border: none; padding: 12px; border-radius: 10px; font-weight: 600; font-size: 14px; text-decoration: none; box-sizing: border-box; }
    .rb-wa-send:hover { opacity: 0.94; }
    @keyframes rbSlide { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
    @keyframes rbFade { from { opacity: 0; } to { opacity: 1; } }
  `;
  d.head.appendChild(style);

  var root = d.createElement("div");
  root.className = "rb-wa-float";
  root.innerHTML = `
    ${config.showTeaser ? '<div class="rb-wa-teaser" id="rb-wa-teaser-el">' + config.teaser + '</div>' : ''}
    <div class="rb-wa-card" id="rb-wa-card-el">
      <div class="rb-wa-head">
        <div class="rb-wa-agent">
          <img src="${config.avatarUrl}" class="rb-wa-avatar" alt="${config.agentName}" />
          <div>
            <div class="rb-wa-name">${config.agentName}</div>
            <div class="rb-wa-sub">${config.agentStatus}</div>
          </div>
        </div>
        <button class="rb-wa-close" id="rb-wa-close-btn">&times;</button>
      </div>
      <div class="rb-wa-body">
        <div class="rb-wa-bubble">
          <div>${config.greeting}</div>
          <div class="rb-wa-time">Just now</div>
        </div>
      </div>
      <div class="rb-wa-foot">
        <a href="https://wa.me/${config.phone}?text=${config.text}" target="_blank" rel="noopener noreferrer" class="rb-wa-send">
          <span>Start WhatsApp Chat</span>
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
        </a>
      </div>
    </div>
    <button class="rb-wa-btn" id="rb-wa-btn-el" aria-label="WhatsApp Chat">
      ${config.showBadge ? '<span class="rb-wa-badge">1</span>' : ''}
      <svg width="28" height="28" viewBox="0 0 24 24" fill="currentColor"><path d="M.057 24l1.687-6.163c-1.041-1.804-1.588-3.849-1.587-5.946.003-6.556 5.338-11.891 11.893-11.891 3.181.001 6.167 1.24 8.413 3.488 2.245 2.248 3.481 5.236 3.48 8.414-.003 6.557-5.338 11.892-11.893 11.892-1.99-.001-3.951-.5-5.688-1.448l-6.305 1.654zm6.597-3.807c1.676.995 3.276 1.591 5.392 1.592 5.448 0 9.886-4.434 9.889-9.885.002-5.462-4.415-9.89-9.881-9.892-5.452 0-9.887 4.434-9.889 9.884-.001 2.225.651 3.891 1.746 5.634l-.999 3.648 3.742-.981zm11.387-5.464c-.074-.124-.272-.198-.57-.347-.297-.149-1.758-.868-2.031-.967-.272-.099-.47-.149-.669.149-.198.297-.768.967-.941 1.165-.173.198-.347.223-.644.074-.297-.149-1.255-.462-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.297-.347.446-.521.151-.172.2-.296.3-.495.099-.198.05-.372-.025-.521-.075-.148-.669-1.611-.916-2.206-.242-.579-.487-.501-.669-.51l-.57-.01c-.198 0-.52.074-.792.372s-1.04 1.016-1.04 2.479 1.065 2.876 1.213 3.074c.149.198 2.095 3.2 5.076 4.487.709.306 1.263.489 1.694.626.712.226 1.36.194 1.872.118.571-.085 1.758-.719 2.006-1.413.248-.695.248-1.29.173-1.414z"/></svg>
      ${config.style === 'pill' ? '<span>' + config.pillText + '</span>' : ''}
    </button>
  `;

  wrap.appendChild(root);

  var card = d.getElementById("rb-wa-card-el");
  var btn = d.getElementById("rb-wa-btn-el");
  var closeBtn = d.getElementById("rb-wa-close-btn");
  var teaser = d.getElementById("rb-wa-teaser-el");

  function toggleCard() {
    var isOpen = card.classList.contains("active");
    if (isOpen) {
      card.classList.remove("active");
    } else {
      card.classList.add("active");
      if (teaser) teaser.style.display = "none";
    }
  }

  btn.addEventListener("click", toggleCard);
  if (closeBtn) closeBtn.addEventListener("click", function(e) {
    e.stopPropagation();
    card.classList.remove("active");
  });
  if (teaser) teaser.addEventListener("click", toggleCard);
})();
</script>

Lightweight snippet (<3KB). Zero dependencies or jQuery required. Works on Shopify, WooCommerce, WordPress, Webflow, Squarespace, Wix, and custom landing pages.

Scale Your Inbound Conversions

Ready to Upgrade from a Simple Link to Official WhatsApp Automation?

Free link widgets are great for small stores. When your website reaches 20+ inquiries daily, manual phone typing loses 40% of customers to delayed replies.

Feature / CapabilityStandard Free WidgetR&B WA-CRM Official Cloud API
Number of Simultaneous Agents1 phone device onlyUnlimited agents on 1 official verified number
After-Hours Response TimeDelayed until human wakes upInstant 24/7 autonomous AI Sales Agent
Shopify & WooCommerce SyncManual lookup requiredAutomated COD confirmation & live tracking bot
Meta Ads Attribution (CAPI)No ad revenue attributionFull Click-to-WhatsApp ad ROAS tracking & CAPI
Account Safety & Official StatusRisk of personal number banOfficial Meta Cloud API & Green Tick verification

Frequently Asked Questions (WhatsApp Chat Widget)

Is this WhatsApp website widget 100% free with no watermark?

Yes. Unlike third-party platforms that display watermarks or charge monthly subscription fees, this widget code is completely free, open, and clean. You can embed it on as many domains or client websites as you want without paying a single rupee.

Will adding this widget script slow down my Shopify or WordPress site?

No. The generated script is lightweight (<3KB) and executes asynchronously after your primary content loads. It uses zero external libraries or jQuery, ensuring perfect 100/100 Google PageSpeed and Core Web Vitals scores.

How do I install the widget on Shopify?

In your Shopify admin dashboard, navigate to Online Store > Themes > Edit code. Open the theme.liquid file in the Layout folder. Scroll to the bottom and paste the copied snippet immediately before the closing </body> tag, then click Save.

How do I install this on WordPress or WooCommerce?

You can install the free WPCode (or Header and Footer Scripts) plugin from the WordPress repository. Go to Code Snippets > Header & Footer, paste the snippet into the Footer box, and click Save. Alternatively, paste it into your child theme's footer.php file.

What happens when a visitor clicks the chat button?

On mobile devices, clicking the button instantly opens the official WhatsApp app on the visitor's phone with your pre-filled starter message ready to send. On desktop computers, it seamlessly launches WhatsApp Web or the WhatsApp Desktop app.

Official Meta Tech Provider

Turn Inbound Website Chats into Loyal Customers with WA-CRM

Equip your sales and support teams with official Meta Cloud API, unified multi-agent inbox, 24/7 AI chat flows, and zero markups on Meta message fees.

Start 7-Day Free TrialView Flat Pricing