Free WhatsApp Widget Builder for Websites

Create a professional WhatsApp chat widget in minutes. No coding required!

✅ 100% Free🚀 Easy Setup🎨 Customizable📱 Mobile Ready

Customize Your WhatsApp Widget

Build your perfect WhatsApp chat button with our easy-to-use widget builder. Customize colors, position, messages, and more to match your brand.

Business Name

WhatsApp Phone Number

Include country code (e.g., +1 for US, +44 for UK)

Primary Color

Widget Position

Bottom Right

Bottom Left

Show Text on Button

Welcome Message

Input Placeholder

Widget Features:

• WhatsApp icon when chat is closed
• Stays in same position when opened/closed
• Choose left or right positioning
• Optional text button for better visibility
• Custom colors with preset palette

Live Preview

See exactly how your WhatsApp widget will look on your website

Your Website Background

Get Your WhatsApp Widget Code

Copy and paste this code into your website's HTML to add the WhatsApp chat widget. Works with WordPress, Shopify, Wix, Squarespace, and any HTML website.

<!-- WhatsApp Widget by WhatsAble -->
<div id="wa-widget"></div>
<script>
(function(){
var c={"businessName":"Your Business","phoneNumber":"+1234567890","primaryColor":"#25D366","welcomeMessage":"Hi! How can we help you today?","placeholderText":"Type your message...","buttonText":"Start Chat","position":"bottom-right","showButtonText":false,"buttonLabel":"Message us"},d=document,w='wa-'+Date.now(),
whatsappIcon='<svg viewBox="0 0 24 24" style="width:24px;height:24px;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.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893A11.821 11.821 0 0020.885 3.488"/></svg>',
closeIcon='<svg style="width:16px;height:16px;fill:currentColor" viewBox="0 0 20 20"><path fillRule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clipRule="evenodd"></path></svg>',
sendIcon='<svg style="width:16px;height:16px;fill:currentColor" viewBox="0 0 24 24"><path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/></svg>',
h='<div style="position:fixed;bottom:20px;right:20px;z-index:9999;font-family:-apple-system,BlinkMacSystemFont,\'Segoe UI\',Roboto,Oxygen,Ubuntu,Cantarell,sans-serif">'+
'<div id="'+w+'-chat" style="display:none;position:absolute;bottom:70px;right:0;width:320px;background:white;border-radius:12px;box-shadow:0 10px 40px rgba(0,0,0,0.2);overflow:hidden;border:1px solid #e5e5e5">'+
'<div style="background:'+c.primaryColor+';color:white;padding:16px;display:flex;align-items:center;justify-content:space-between">'+
'<div style="display:flex;align-items:center;gap:12px">'+
'<div style="width:40px;height:40px;background:rgba(255,255,255,0.2);border-radius:50%;display:flex;align-items:center;justify-content:center">'+whatsappIcon+'</div>'+
'<div><div style="font-weight:600;font-size:16px">'+c.businessName+'</div><div style="font-size:12px;opacity:0.9">Typically replies instantly</div></div>'+
'</div>'+
'<button onclick="closeChat()" style="background:rgba(255,255,255,0.2);border:none;color:white;cursor:pointer;padding:8px;border-radius:4px;display:flex;align-items:center;justify-content:center;transition:background-color 0.2s" onmouseover="this.style.background=\'rgba(255,255,255,0.3)\'" onmouseout="this.style.background=\'rgba(255,255,255,0.2)\'">'+closeIcon+'</button>'+
'</div>'+
'<div style="padding:16px;background:#f5f5f5;min-height:200px">'+
'<div style="background:white;border-radius:12px;border-top-left-radius:4px;padding:12px;box-shadow:0 1px 2px rgba(0,0,0,0.1);margin-bottom:16px;max-width:80%">'+
'<div style="font-size:14px;color:#333;line-height:1.4">'+c.welcomeMessage+'</div>'+
'<div style="font-size:11px;color:#666;margin-top:6px">'+new Date().toLocaleTimeString([],{hour:'2-digit',minute:'2-digit'})+'</div>'+
'</div>'+
'<div id="'+w+'-preview" style="display:none;text-align:right;margin-bottom:16px">'+
'<div style="background:'+c.primaryColor+';color:white;border-radius:12px;border-top-right-radius:4px;padding:12px;display:inline-block;max-width:80%;box-shadow:0 1px 2px rgba(0,0,0,0.1)">'+
'<div id="'+w+'-previewText" style="font-size:14px"></div>'+
'</div>'+
'</div>'+
'</div>'+
'<div style="padding:16px;border-top:1px solid #eee;background:white">'+
'<div style="display:flex;gap:8px;margin-bottom:8px">'+
'<input id="'+w+'-input" placeholder="'+c.placeholderText+'" style="flex:1;padding:8px 12px;border:1px solid #ddd;border-radius:4px;outline:none;font-size:14px;transition:border-color 0.2s" onfocus="this.style.borderColor=\''+c.primaryColor+'\'" onblur="this.style.borderColor=\'#ddd\'" onkeypress="if(event.key===\'Enter\')sendMessage()" oninput="updatePreview()">'+
'<button onclick="sendMessage()" style="background:'+c.primaryColor+';color:white;border:none;padding:8px 12px;border-radius:4px;cursor:pointer;transition:all 0.2s;display:flex;align-items:center;justify-content:center" onmouseover="this.style.opacity=\'0.9\';this.style.transform=\'scale(1.05)\'" onmouseout="this.style.opacity=\'1\';this.style.transform=\'scale(1)\'">'+sendIcon+'</button>'+
'</div>'+
'<div style="text-align:center">'+
'<a href="https://whatsable.app/?utm_source=widget&utm_medium=referral&utm_campaign=powered_by" target="_blank" style="font-size:11px;color:#666;text-decoration:none;transition:color 0.2s" onmouseover="this.style.color=\'#333\'" onmouseout="this.style.color=\'#666\'">Powered by WhatsAble</a>'+
'</div>'+
'</div>'+
'</div>'+
'<button id="'+w+'-btn" onclick="toggleChat()" style="width:56px;height:56px;border-radius:50%;background:'+c.primaryColor+';color:white;border:none;cursor:pointer;box-shadow:0 4px 20px rgba(0,0,0,0.15);transition:all 0.2s;display:flex;align-items:center;justify-content:center" onmouseover="this.style.transform=\'scale(1.1)\';this.style.boxShadow=\'0 6px 25px rgba(0,0,0,0.2)\'" onmouseout="this.style.transform=\'scale(1)\';this.style.boxShadow=\'0 4px 20px rgba(0,0,0,0.15)\'">'+
'<svg viewBox="0 0 24 24" style="width:28px;height:28px;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.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893A11.821 11.821 0 0020.885 3.488"/></svg>'+
'</button>'+
'</div>';
d.getElementById('wa-widget').innerHTML=h;
var isOpen=false;
window.toggleChat=function(){
  var chat=d.getElementById(w+'-chat'),btn=d.getElementById(w+'-btn');
  isOpen=!isOpen;
  chat.style.display=isOpen?'block':'none';
  if(btn){
    btn.innerHTML=isOpen?closeIcon:whatsappIcon;
  }
};
window.closeChat=function(){
  var chat=d.getElementById(w+'-chat'),btn=d.getElementById(w+'-btn');
  isOpen=false;
  chat.style.display='none';
  if(btn){btn.innerHTML=whatsappIcon;}
};
window.updatePreview=function(){
  var input=d.getElementById(w+'-input'),preview=d.getElementById(w+'-preview'),previewText=d.getElementById(w+'-previewText');
  if(input.value.trim()){
    previewText.textContent=input.value;
    preview.style.display='block';
  }else{
    preview.style.display='none';
  }
};
window.sendMessage=function(){
  var input=d.getElementById(w+'-input'),message=input.value.trim();
  if(message){
    var phone=c.phoneNumber.replace(/[^0-9]/g,'');
    window.open('https://wa.me/'+phone+'?text='+encodeURIComponent(message),'_blank');
    input.value='';
    updatePreview();
    closeChat();
  }
};
})();
</script>
<!-- End WhatsApp Widget -->

✅ What you get:

• Professional WhatsApp chat interface
• Mobile-responsive design
• Authentic WhatsApp styling and icons
• Customizable colors and positioning
• Works on all devices and browsers
• No monthly fees or subscriptions

Why Use a WhatsApp Widget for Your Website?

🚀 Boost Customer Engagement

WhatsApp is the world's most popular messaging app with over 2 billion users. Adding a WhatsApp chat widget to your website makes it incredibly easy for customers to reach you instantly.

💼 Perfect for Business

Whether you're running an e-commerce store, service business, or blog, a WhatsApp widget helps you provide instant customer support and capture more leads.

🎨 Easy Customization

Our widget builder lets you customize colors, position, welcome messages, and button styles to perfectly match your website's design and branding.

📱 Mobile Optimized

The widget automatically adapts to mobile devices, ensuring your customers can easily contact you whether they're on desktop, tablet, or smartphone.

How to Add WhatsApp Chat to Your Website

Customize your widget using our free builder above
Copy the generated embed code
Paste it into your website's HTML (before the closing </body> tag)
Save and publish - your WhatsApp widget is now live!

Compatible with all platforms:

WordPressShopifyWixSquarespaceHTML/CSSReactVue.jsAnd more!