Floating Action Button (FAB)

Call Us

How to Add a Floating Action Button in Squarespace: Easy Guide

Want to add a Floating Action Button (FAB) to your Squarespace site? It’s a great way to improve conversions by keeping a "Contact Us" or "Call Now" button visible as your visitors scroll. You can see this type of button in action on quite a few websites! (Including this page… just scroll a little)

The best part? You don’t need to be a coding expert to make it happen. Just follow these simple steps to create and customize your very own floating button.

Difficulty Level:

• Total Beginner: 6/10 (You'll be copying and pasting code, but don’t worry—just follow along carefully!)

• Intermediate: 3/10 (A straightforward process with some minor customization.)

• Expert: 1/10 (Quick and simple for you!)

Step 1: Add the HTML Code

You have two options for adding the Floating Action Button to your Squarespace website:

1. For a specific page, or

2. Site-wide (across all pages).

Option 1: Add to a Specific Page

If you want the Floating Action Button to appear on a specific page only, follow these steps:

1. Go to your Squarespace dashboard and navigate to the page where you want the button.

2. Add a Code Block to the page.

3. Paste the HTML code into the Code Block.

Option 2: Add Site-Wide (Across All Pages)

If you want the Floating Action Button to appear on every page of your site, follow these steps:

1. Go to Settings > Advanced > Code Injection in your Squarespace dashboard.

2. In the Footer section, paste the HTML code.

By placing the code in the Footer section under Code Injection, the Floating Action Button will appear on all pages of your site, providing consistent access for actions like calling, emailing, or contacting you.

Here’s the HTML code:

<div id="floating-button">
  <a href="tel:+1234567890" id="fab-button" title="Call Us">Call Us</a>
</div>

Copy Code

You can modify the link to suit your needs:

• Phone Call: href="tel:+1234567890"

• Email: href="mailto:email@example.com"

• Contact Page: href="/contact"

Step 2: Add the CSS Code

This step involves adding CSS to style the button and ensure it floats on the screen.

How to Install:

1. In the Squarespace dashboard, go to Design > Custom CSS.

2. Paste the following CSS code.

/* Floating Button Container */
#floating-button {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1000;
}

/* Styling the Floating Button */
#fab-button {
  display: inline-block;
  background-color: #ff4500; /* Button color */
  color: white;
  padding: 15px 20px;
  border-radius: 50px;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  text-decoration: none;
  transition: background-color 0.3s ease;
}

#fab-button:hover {
  background-color: #ff5722; /* Hover color */
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
}

Copy Code

Step 3: Add JavaScript (Optional)

You can add a JavaScript snippet to make the button appear only when the user scrolls down.

How to Install:

1. In the Squarespace dashboard, go to Settings > Advanced > Code Injection.

2. Paste the following JavaScript code into the Footer section.

<script>
// Optional: Show/Hide Button on Scroll
window.onscroll = function () {
  var button = document.getElementById("floating-button");
  if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
    button.style.display = "block";
  } else {
    button.style.display = "none";
  }
};

// Initially hide the button
document.getElementById("floating-button").style.display = "none";
</script>

Copy Code

This will hide the button until the user scrolls down 100px. If you don’t want this behavior, skip this step.

Step 4: Customizing the Floating Action Button

Option 1: Using an Icon (Font Awesome)

Font Awesome is a popular icon library that lets you easily add scalable icons to your website. By using Font Awesome, you can replace the text on your Floating Action Button (FAB) with icons like a phone, envelope, or any other visual cue. This not only enhances the design but also makes the button more intuitive for users.

Icons are lightweight, easy to style, and scale perfectly without losing quality. Plus, you can change the color, size, and even animate them with CSS, making your FAB look more professional and interactive.

Adding Font Awesome to your site is simple and will open up many customization options for your Floating Action Button!

If you want to use an icon instead of text, follow these steps.

Go to Settings > Advanced > Code Injection and add the following to the Header section:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

Copy Code

Replace the HTML in Step 1 with this code:

<!-- Floating Action Button with Font Awesome Icon -->
<div id="floating-button">
  <a href="tel:+1234567890" id="fab-button" title="Call Us">
    <i class="fas fa-phone"></i>
  </a>
</div>

Copy Code

Note: To use a Font Awesome icon for the Floating Action Button, replace the fa-phone class in the code with any other icon class from the Font Awesome icon library. Simply find the icon you want, copy its class name (e.g., fa-envelope for an email icon), and update the <i class="fas fa-phone"></i> tag accordingly.

Option 2: Using an Image

If you prefer to use an image as the button, follow these steps.

Replace the HTML in Step 1 with this code:

<!-- Floating Action Button with Image -->
<div id="floating-button">
  <a href="tel:+1234567890" id="fab-button" title="Call Us">
    <img src="your-image-url-here" alt="Call Us" style="width: 50px; height: 50px; border-radius: 50%;">
  </a>
</div>

Copy Code

Note: To use an image for the Floating Action Button, replace your-image-url-here in the code with the URL of the image you'd like to display. You can upload the image to your Squarespace site or host it externally, then use that link in the code.

Need Help?

If you need help installing or customizing the Floating Action Button, contact us and we’ll be happy to assist you.