Create a Fixed Custom CTA Button in Squarespace with CSS
Are you looking to add a custom call-to-action (CTA) button in Squarespace that opens a Calendly calendar in a pop-up window? In this guide, we’ll walk you through the step-by-step process to create a fixed button using custom CSS, positioned at the bottom-right corner of your site. With our simple tutorial, we’ll guide you through the process, making it easy to implement this feature without needing advanced programming skills.
Why Add a Custom CTA Button?
A strategically placed CTA button can enhance user engagement and streamline client interactions. By integrating a Calendly pop-up, you make it easier for potential clients to schedule meetings, saving time and improving the user experience.
Step-by-Step Guide to Adding a Fixed Custom CTA Button
Step 1: Access the Code Injection Area
Log in to your Squarespace account.
Navigate to Pages> Website Tools > Code Injection.
Scroll down to the Footer section.
Step 2: Insert the Custom Code
Copy and paste the following HTML, CSS, and JavaScript code into the Footer Code Injection area:
<div>
<button class="calendly-button">Book a call with me</button>
<div class="calendly-modal" id="calendlyModal">
<div class="calendly-modal-content">
<button class="close-modal" id="closeModal">×</button>
<iframe src="https://calendly.com/your-calendly-url" frameborder="0"></iframe> <!-- Replace this URL -->
</div>
</div>
</div>
<style>
/* Button styling - always fixed in the bottom right corner */
.calendly-button {
position: fixed;
bottom: 20px;
right: 20px;
background-color: rgb(0, 123, 255);
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
font-size: 16px;
cursor: pointer;
z-index: 1000;
}
.calendly-button:hover {
background-color: rgb(0, 105, 217);
}
/* Modal styling */
.calendly-modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 999;
}
.calendly-modal-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80%;
height: 80%;
background: white;
border-radius: 10px;
overflow: hidden;
}
.calendly-modal iframe {
width: 100%;
height: 100%;
border: none;
}
.close-modal {
position: absolute;
top: 10px;
right: 10px;
background-color: white;
color: black;
border: none;
font-size: 20px;
font-weight: bold;
cursor: pointer;
z-index: 1001;
}
.close-modal:hover {
background-color: #ddd;
}
</style>
<script>
// Element selectors
const calendlyButton = document.querySelector('.calendly-button');
const calendlyModal = document.getElementById('calendlyModal');
const closeModal = document.getElementById('closeModal');
// Open modal on button click
calendlyButton.addEventListener('click', () => {
calendlyModal.style.display = 'block';
});
// Close modal on close button click
closeModal.addEventListener('click', () => {
calendlyModal.style.display = 'none';
});
// Close modal on outside click
window.addEventListener('click', (event) => {
if (event.target === calendlyModal) {
calendlyModal.style.display = 'none';
}
});
</script>
Step 3: Modify the Calendly Link
Replace https://calendly.com/your-calendly-url in the <iframe> tag with your own Calendly URL.
Benefits of a Custom CTA Button
Enhanced User Experience: A visually appealing button improves user interaction.
Time Efficiency: Simplifies scheduling, reducing back-and-forth communication.
Professional Appearance: A polished CTA can make a strong first impression.
FAQs
Can I add a button with CSS?
Yes, you can add a button with custom CSS in Squarespace by using the Code Injection feature.
What can go inside a button?
A button can trigger various actions such as opening a modal, navigating to a different page, or submitting a form.
For more personalized support or advanced customizations, feel free to Contact Us .
