+254725682556 +254725052660 info@ziprof.co.ke
Client Area

Website & Web Design

How to Add a WhatsApp Chat Button to Your Website

Many of your customers already use WhatsApp every day, and a lot of them would rather message you there than fill in a contact form or make a phone call. A WhatsApp chat button on your website lets a visitor tap once and land straight in a chat with your business number, prefilled with a message if you want. Here is how to set one up, whether your site runs on WordPress or plain HTML.

Step 1: Build your WhatsApp click-to-chat link

Before touching your website, create the link that opens a chat with your number. WhatsApp's click-to-chat links follow this pattern: https://wa.me/254XXXXXXXXX

  1. Take your WhatsApp business number and remove the leading zero, for example 0712345678 becomes 712345678.
  2. Add Kenya's country code in front of it: 254712345678.
  3. Put that after https://wa.me/ to get your base link, for example https://wa.me/254712345678.
  4. Optionally add a prefilled message by appending ?text= followed by your message with spaces replaced by %20, for example https://wa.me/254712345678?text=Hi%2C%20I%20have%20a%20question.
Test this link by opening it on your own phone before adding it to your website. If it doesn't open a chat with the right number, check the country code and remove any spaces or the plus sign from the number.

Step 2: Add the button to your website

If your website runs on WordPress

  1. Log in to your WordPress admin dashboard.
  2. Go to Plugins, then Add New Plugin.
  3. Search for a WhatsApp chat button plugin, install one, and click Activate.
  4. Open the plugin's settings page (usually found under Settings or as its own menu item) and enter your WhatsApp number in international format, without the plus sign, for example 254712345678.
  5. Set your default welcome message and choose where the button appears, then click Save Changes.

If you would rather not install a plugin, you can add the button manually by pasting a small HTML snippet into your theme. Go to Appearance, then Theme File Editor, open footer.php, and paste your button code just before the closing </body> tag. Because theme updates can overwrite this file, a plugin is the safer long-term option.

If your website is plain HTML or another platform

  1. Open your site's files using your hosting account's File Manager or an FTP client.
  2. Open the main template file that appears on every page (often footer.php, header.php, or a shared layout file, depending on how your site was built).
  3. Paste an HTML link or button pointing to your wa.me link just before the closing </body> tag, then save the file.

Step 3: Test the button on desktop and mobile

  1. Open your website on a desktop browser and click the button. It should open WhatsApp Web or prompt you to open the desktop app.
  2. Open your website on your phone and tap the button. It should open the WhatsApp app directly with a chat to your number.
  3. Confirm the number is correct and, if you set one, that the prefilled message appears.
Keep the button in a fixed position that does not block important content on small screens, and make sure only one person or a shared account is checking that WhatsApp number so customer messages don't go unanswered.

If you would also like a traditional contact form as a backup option for visitors who prefer not to use WhatsApp, see How to Add a Contact Form to Your Website.