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:
Enter the following custom code into “Code Injection > Footer”
Website
Pages
Website Tools
Code Injection
Edit the mobile number within the code - eg “+441234567890“ to a number that uses WhatsApp
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:
Enter the following custom code into “Custom CSS”
Website
Pages
Website Tools
Custom CSS
Edit the mobile number - eg “+441234567890“ to a number that uses WhatsApp
Go into Settings > Website > “Social Links” and enter the following type of link, editing the county code / phone number
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:
Enter the following custom code into “Custom CSS”
Edit the mobile number - eg “+441234567890“ to a number that uses WhatsApp
Go into Settings > Website > “Social Links” and enter the following type of link, editing the county code / phone number
https://wa.me/+441234567890
Make sure you are only adding 1 x link into the “Social Link” area
Edit Footer
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; }