How to add a floating call button on Squarespace with CSS

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…

---

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 class="cta">

<a href="tel: 555 555"><div class="cta" </a>

</div>

---

Examples for page url’s or email address links:

<div class="cta">

<a href="/contact"><div class="cta" </a>

</div>

or

<div class="cta">

<a href="mailto: [email protected]"><div class="cta" </a>

</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;

transform-origin: bottom right;

background-image: url('https://yourimagelinkhere');

margin: 20px;

background-repeat: no-repeat;

background-size: contain;

}

---

So thats my guide on how to add a floating call button on Squarespace. For more cool Squarespace tips check out my blog, or sign up to my newsletter.

Did I help you? Consider buying me a coffee as thanks!