Free WhatsApp Website Widget Generator

Build a customizable floating WhatsApp chat popup for your website in 60 seconds. Copy-paste the lightweight HTML code—no coding skills or monthly subscriptions needed.

1. Customize Your Chat Widget

Brand / Agent Name

WhatsApp Number (with country code)

Status Subtitle

Floating Button Label

Welcome Bubble Greeting

Pre-filled User Message

CTA Button Text

Header & Button Color

Screen Position

https://yourwebsite.com

Interactive Preview

AIsoule Support

🟢 Typically replies in 2 minutes

Hi there! 👋 How can we help you grow your business today?

Start Chat on WhatsApp⚡ Powered by AIsoule

2. Copy & Paste Before </body>

Zero external scripts · Instant load · 100% Free

<!-- Free WhatsApp Chat Widget by AIsoule (https://aisoule.com/tools/widget-generator/) -->
<div id="aisoule-wa-widget" style="position:fixed;bottom:24px;right:24px;z-index:99999;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;">
  <div id="aisoule-wa-popup" style="display:none;width:320px;background:#fff;border-radius:20px;box-shadow:0 12px 40px rgba(0,0,0,0.16);overflow:hidden;margin-bottom:14px;border:1px solid rgba(0,0,0,0.06);">
    <div style="background:#006d2f;color:#fff;padding:16px 18px;display:flex;align-items:center;justify-content:space-between;">
      <div>
        <div style="font-weight:700;font-size:15px;">AIsoule Support</div>
        <div style="font-size:11px;opacity:0.85;margin-top:2px;">🟢 Typically replies in 2 minutes</div>
      </div>
      <button onclick="document.getElementById('aisoule-wa-popup').style.display='none'" style="background:none;border:none;color:#fff;font-size:18px;cursor:pointer;line-height:1;">&times;</button>
    </div>
    <div style="background:#efeae2;padding:18px 16px;">
      <div style="background:#fff;padding:12px 14px;border-radius:0 14px 14px 14px;font-size:13px;color:#111827;line-height:1.45;box-shadow:0 1px 2px rgba(0,0,0,0.08);">
        Hi there! 👋 How can we help you grow your business today?
      </div>
    </div>
    <div style="padding:14px 16px;background:#fff;text-align:center;">
      <a href="https://wa.me/919876543210?text=Hi!%20I%20visited%20your%20website%20and%20have%20a%20question." target="_blank" rel="noopener noreferrer" style="display:block;background:#25D366;color:#fff;text-decoration:none;font-weight:700;font-size:14px;padding:11px 16px;border-radius:999px;">
        Start Chat on WhatsApp
      </a>
      <a href="https://aisoule.com" target="_blank" rel="noopener" style="display:block;font-size:10px;color:#9ca3af;text-decoration:none;margin-top:8px;">⚡ Powered by AIsoule</a>
    </div>
  </div>
  <button onclick="var p=document.getElementById('aisoule-wa-popup');p.style.display=p.style.display==='none'?'block':'none'" style="display:inline-flex;align-items:center;gap:10px;background:#006d2f;color:#fff;border:none;padding:13px 20px;border-radius:999px;font-weight:700;font-size:14px;cursor:pointer;box-shadow:0 6px 20px rgba(0,0,0,0.2);">
    <span>💬 Chat with us</span>
  </button>
</div>

Zero Meta Messaging Fees

Want AI to Answer Website Visitors 24/7 Inside the Widget?

Upgrade to AIsoule Smart Chat Window—visitors chat live in their browser with your AI chatbot and human agents without paying a single Meta conversation fee!

Explore Smart Chat Window

How to Install the Free WhatsApp Chat Widget on Any Platform

1. Shopify & Online Stores

In your Shopify Admin, go to Online Store → Themes → Edit Code. Open theme.liquid and paste the widget snippet right above the closing </body> tag.

2. WordPress, WooCommerce & Elementor

Use the free WPCode (Insert Headers and Footers) plugin or Elementor Custom Code to paste the snippet in the Sitewide Footer—no heavy WordPress plugin required.

3. Webflow, Wix & Custom HTML

Paste the snippet into your site’s Custom Footer Code settings or Google Tag Manager (Custom HTML tag triggered on All Pages).

Frequently Asked Questions

Customize your brand name, WhatsApp phone number, greeting text, and button color using our generator above. Click "Copy Widget HTML Code" and paste the snippet right before the closing </body> tag of your website, Shopify theme.liquid, or WordPress footer.

No! The generated snippet is 100% pure, lightweight vanilla HTML/CSS/JS (~2KB) with zero external library dependencies or render-blocking scripts, ensuring a 100/100 Google PageSpeed score.

Yes! Because it is standard HTML and inline JavaScript, it works on every website builder and CMS including Shopify, WordPress, Elementor, WooCommerce, Webflow, Squarespace, Wix, and custom React/Next.js/Nuxt apps.

You can upgrade to AIsoule’s Smart Chat Window or Official WhatsApp Business API to let an AI chatbot answer visitors 24/7, qualify leads, and route conversations to your live sales team.

Free WhatsApp Growth Suite