Adding a Whatsapp Button to your Website

In 2018 WhatsApp released WhatsApp Business, a standalone app that you could use for your business without receiving work messages on your personal WhatsApp account. As a result, you’ll likely have seen many businesses, usually in the bottom-right of their website, hold a small WhatsApp icon which, when clicked, allows you to message directly from the device you’re using to their WhatsApp.

It t doesn’t take much effort to set this up for your Squarespace website. You can copy the code below and either paste it into a Code block within your Footer (this ensures it appears on all pages), or the “nicer” option, if you’re on Squarespace’s Business Plan or higher, you can paste the code into the the Footer code injection (Pages -> Website Tools (at the bottom) —> Code Injection). Once you’ve saved the code, you should see the WhatsApp icon appear. When your customers click on it, it will launch a new tab where they can directly contact you on WhatsApp.

Tips:

• This icon also works for personal WhatsApp numbers, if you don’t have a WhatsApp Business account/number

• This code places the icon in the bottom right. This can clash with Squarespace’s shopping cart icon or cookie notice. Increase the value next to “bottom” to “lift” the icon up the page.

• If you want to move it to the bottom-left corner, change the word “right” to “left”.

• Make sure you replace YOUR NUMBER HERE with your phone number, including the international dialling code. For example, if your number is 07123 456 789, the number you’ll need to add to the code is 447123456789. Therefore, the code should be like this:

  <a href="https://wa.me/447123456789" target="_blank" class="whatsapp-icon">

---

<!-- Whatsapp widget -->

<a href="https://wa.me/YOUR NUMBER HERE" target="_blank" class="whatsapp-icon"><img src="https://cdn2.iconfinder.com/data/icons/social-messaging-ui-color-shapes-2-free/128/social-whatsapp-circle-1024.png" /></a>

<style>

a.whatsapp-icon {

position: fixed;
right: 16px;
bottom: 16px;
z-index: 999;
}

a.whatsapp-icon img {

max-width: 50px;
}

body.header--menu-open .whatsapp-icon {

display: none !important;
visibility: hidden;
opacity: 0;
}

</style>

---

There we have it, you should your WhatsApp icon appearing on your website, providing your customers with a new way to get in touch with your business.

---