WhatsApp Contact Button Widget

Generate a simple WhatsApp chat button for your website.

One tapOpens WhatsApp directly with your number.
Pre-filled messageOptional pre-written message included.
Custom stylingMatch the button to your site colours.

Build the WhatsApp button

Where to use it

Add it to the contact section, footer or header of any small business website where quick, direct contact is more useful than a contact form.

Related widgets: Opening hours, FAQ accordion, Poll widget

Embed code

Copy this iframe into your page HTML, CMS block or website builder embed area.

<iframe src="https://sitewidgetkit.com/embed/whatsapp-chat-button/" width="100%" height="280" loading="lazy"></iframe>

How it works

The WhatsApp button generates a clickable button that, when pressed, opens the visitor's WhatsApp app (on mobile) or WhatsApp Web (on desktop) with your phone number and a pre-filled message. The visitor types nothing – they just tap and they're in your chat.

This is different from a live chat widget (like Tidio or Intercom) which requires a JavaScript snippet and account setup. This button is purely a link – no account required, no monthly fee, no chat history stored anywhere.

Common uses:

  • Small businesses: tradespeople, cleaners, tutors – anyone who finds WhatsApp faster than email for quick job enquiries
  • Retail: customers asking about stock, sizing or availability
  • Services: consultation businesses, coaches, photographers who prefer a quick chat before committing to email
  • Community groups: clubs, societies and voluntary groups that already communicate via WhatsApp

Phone number format: the number should be in international format – starting with the country code, no spaces or dashes. A UK mobile number like 07700 900123 becomes 447700900123. WhatsApp will validate this – if the number is incorrect, the chat won't open.

Pre-filled message: the message field pre-populates the WhatsApp chat window. Keep it short and friendly – it should make it easy for the visitor to start a conversation without typing anything. "Hi, I'd like to find out more" is better than "Hello, I am writing to you regarding your services."

How to add it

CopyCopy the iframe code from the embed panel.
PasteAdd it to your CMS, website builder or HTML embed block.
PublishPreview the page on desktop and mobile, then publish.
Remove attribution: free widgets include a visible powered-by link. If you want a clean unbranded version, contact us about removing attribution for a small fee.