Skip to main content

WhatsApp Chat Widget

The free WhatsApp chat widget adds a WhatsApp button to your website. When a visitor clicks it, a small chat panel opens with your name, photo and a welcome message. When they press the button, WhatsApp opens with their message ready to send to your number. It is free, needs no Whautomate account and works on any website.

The WhatsApp chat widget open on a website, showing the business name, a welcome message and the Start chat button

If you want visitors to chat on your website itself, with replies from your team or chatbot in the Team Inbox, use the live chat widget instead.

Create the widget with the generator​

The easiest way is the free generator at whautomate.com/tools/free-whatsapp-widget.

  1. Enter your Phone Number in international format (country code, no + or spaces).
  2. Fill in the Agent Name, Subtitle / Division, Photo URL, Welcome Message, Default Message (pre-filled for user) and Button Text.
  3. Choose the Default State: open (chat panel visible) or closed (icon only).
  4. Check the live preview, then click Copy Code (or Download HTML).
  5. Paste the code before the closing </body> tag of your website, or in your site builder's custom code or footer area so it appears on every page.

Add the widget by hand​

Copy this code and change the values:

<form id="general-support" class="wa-widget" action="6591234567" data-chat="general-support"></form>
<script src="https://widget.whautomate.com/js/whatsapp-widget.min.js"></script>
<script>
  var head = document.getElementsByTagName('HEAD')[0];
  var link = document.createElement('link');
  link.rel = 'stylesheet';
  link.type = 'text/css';
  link.href = 'https://widget.whautomate.com/css/whatsapp-widget.min.css';
  head.appendChild(link);
  var generalSupport = new WhatsAppWidget(document.getElementById('general-support'), {
    name: 'Serene Wellness Studio',
    division: 'Typically replies within a few minutes',
    photo: 'https://example.com/logo.png',
    introduction: 'Welcome! How can we help you today?',
    defaultMessage: 'Hello, I have a question',
    buttonText: 'Start chat'
  });
  generalSupport.toggle(); // remove this line to start with the panel closed
</script>
SettingWhat it does
actionYour WhatsApp number in international format, digits only
nameThe name shown at the top of the panel
divisionThe line under the name, for example your reply time
photoLink to a square photo or logo
introductionThe welcome message in the panel
defaultMessageText pre-filled in the visitor's WhatsApp message
buttonTextThe label on the button that opens WhatsApp

To add more than one widget (for example sales and support), copy the block and give each form its own id and data-chat.

Tips​

  • Messages sent through the widget arrive on your WhatsApp number. If that number is connected to Whautomate, they appear in your Team Inbox and your chatbots can reply.
  • Need help? Email support@whautomate.com.
Last updated on