How to Make a Fixed Call to Action Button

Hello there!

I'm trying to add a fixed CTA (Book Now) on the lower right side of my website. Through tutorials I found online, I was able to add the button but my problem is, I can't seem to figure out how I can make the size and positioning the same on desktop and mobile view. Please help.

Attached is a sample website which uses fixed CTA. I'm hoping I can replicate this in my website with my brand colors and fonts.

5 hours ago, MiaP said:

Hello there!

I'm trying to add a fixed CTA (Book Now) on the lower right side of my website. Through tutorials I found online, I was able to add the button but my problem is, I can't seem to figure out how I can make the size and positioning the same on desktop and mobile view. Please help.

Attached is a sample website which uses fixed CTA. I'm hoping I can replicate this in my website with my brand colors and fonts.

Can you share your URL so I can take a look?

Here's the inspo website:
https://violetmoonjewelry.com/

We just want the "Book Now" button that they have.

Our website is here:
https://www.hallowedground.la/

On 2/9/2023 at 4:47 AM, paul2009 said:

Try adding this to Settings > Advanced > Code Injection > FOOTER:, changing /classes to match the URL that you want to reach:

<div id="btnFloatBook">
  <a style="position: fixed; z-index: 100; bottom: 1em; right: 1em;  padding: 1em 2em; box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px;"
   href="/classes" class="sqs-block-button-element--medium sqs-button-element--primary sqs-block-button-element">Book Now</a>
</div>

Screenshot when added:

Did this help? Please give feedback by clicking an icon below  ⬇️

Do you know how to link that CTA button to a phone number or a page as well?

14 minutes ago, ashleylee said:

Do you know how to link that CTA button to a phone number or a page as well?

The solution I provided above links to the classes page because of this:

href="/classes"

You can link to any other page by changing this URL. To link to a phone number, you'll use href attribute tel: like this:

href="tel:+1234567890"

Did this help? Please give feedback by clicking an icon below ⬇️