How to add a floating call button on Squarespace with CSS

Apr 16

how to create a sticky floating call button on squarespace websites

How to add a floating call button on Squarespace

Looking to create a floating ‘call’ button or CTA link on your Squarespace website? Here’s an easy step by step guide on how you can add a floating call button on Squarespace. This can be an icon of your choice, so you can make it fit your brand really easily.

To add a floating button on your Squarespace website copy these two simply codes below…

So here’s what you need to do to add a floating ‘call ‘ button on Squarespace…

image example of how a floating call button looks on Squarespace website

Step 1

Add the below code into your injection code in the Footer section

Go to Settings > Advanced > Code injection > Scroll down to the Footer section and paste the below code. Note that the text highlighted in bold is where you need to replace it with your own call number link. If you prefer you can change this link to any page on your website or an email address see the example below

</div>

Examples for page url’s or email address links:

</div>

</div>

Step 2

Add the CSS code to style your floating call button

Add the below code to your custom css. Go to > Design > Custom CSS and paste the code. Be sure to change the image url link to your own image. This can be an icon or a logo image. To upload your image go to > Design > Custom CSS > Manage custom files then upload your image (recommended size: 200px x 200px)

Feel free to download my pre-made icon here

CSS code for floating call now button on Squarespace

//Floating Call Button

.cta {

height:100px; //Adjust this size if you prefer

width:90px; //Adjust this size if you prefer

position:fixed;

bottom:0;

right:0;

z-index:99;

margin:17px;

white-space: nowrap;