How to add WhatsApp as a widget or social icon - Squarespace 7.1

If you want to have WhatsApp added to your site, then we’ve given you the ability to add it, either as a floating icon, or as a social link in the header of footer.

---

Add Whatapp as a floating widget

Step by step guide:

1. Enter the following custom code into “Code Injection > Footer”

   • Website

     • Pages

       • Website Tools

         • Code Injection

2. Edit the mobile number within the code - eg “+441234567890“ to a number that uses WhatsApp

3. Once you press “Save”, you’ll see the widget floating in the bottom right hand corner of your site

Note:
You can change the icon by updating this link
https://cdn2.iconfinder.com/data/icons/social-messaging-ui-color-shapes-2-free/128/social-whatsapp-circle-1024.png

<!-- WhatsApp Widget -->
<a href="https://wa.me/+441234567890" 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>

Add Whatapp as a header icon

Step by step guide:

1. Enter the following custom code into “Custom CSS”

   • Website

     • Pages

       • Website Tools

         • Custom CSS

2. Edit the mobile number - eg “+441234567890“ to a number that uses WhatsApp

3. Go into Settings > Website > “Social Links” and enter the following type of link, editing the county code / phone number

   1. https://wa.me/+441234567890
      

Note:

This will transform the link icon and add a Whatapp icon in it’s place. The default colour option here is black, but you can override this link in the code to make it customised -> https://i.ibb.co/xKZkYDB/whatsapp-icon.png

/* Whatsapp */
header#header [href*="https://wa.me/+441234567890"] {
    background-image: url(https://i.ibb.co/xKZkYDB/whatsapp-icon.png);
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
}
header#header [href*="https://wa.me/+441234567890"] svg {
    display: none;
}

Add Whatapp as a footer icon

Step by step guide:

1. Enter the following custom code into “Custom CSS”

2. Edit the mobile number - eg “+441234567890“ to a number that uses WhatsApp

3. Go into Settings > Website > “Social Links” and enter the following type of link, editing the county code / phone number

   1. https://wa.me/+441234567890

4. Make sure you are only adding 1 x link into the “Social Link” area

5. Edit Footer

6. Add a “Social Links” block

Note:

This will transform the link icon and add a Whatapp icon in it’s place.

The default colour option here for the footer code is black, but you can override this link in the code to make it customised. This will remain independent from the header code, should you have both added to your site -> https://i.ibb.co/xKZkYDB/whatsapp-icon.png

footer#footer-sections [href*="https://wa.me/+441234567890"] {
    background-image: url(https://i.ibb.co/xKZkYDB/whatsapp-icon.png) !important;
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
}
footer#footer-sections [href*="https://wa.me/+441234567890"] svg {
    display: none;
}