How to Make a Fixed Call to Action Button in Squarespace

[@SONUYADAV-ci5el]

Loving all the squarespace videos by you Carl. Thank you very much.

[@clarkwickstone4666]

Really helpful. Thank you!

[@d.nicolaevsky]

your tutorials are amazing, a real discovery, thanks a lot!

[@Carl_Johnson]

Thanks Daniel!

[@tapocketa]

This is brilliant. Love the injection of humour too. Worked a treat. Thank you. Subscribed 🙂

[@Carl_Johnson]

Thanks :)

[@KarlSandor88]

Carl you legend, please keep making videos like this!

[@Carl_Johnson]

Thanks Karl!

[@MikeDeath]

Thank you Carl! Going to implement this on one of the site being built.

[@Carl_Johnson]

Cool!

[@Mazon717]

GREAT TUTORIAL BUT FOR ANYBODY WHO'S BUTTON OVERLAYED THE ENTIRE SCREEN AFTER DOING THIS, INSERT width: 40%; height: 10%; (OR CHANGE TO WHATEVER DIMENSIONS YOU PREFER) UNDERNEATH THE "right" PROPERTY. FIXED IT FOR ME.

[@ojt4mee]

🙏

[@LINKRGH1]

Thanks Mazon! I really appreciate the help

[@lyndawhite1463]

which version of squarespace do you have? I don't have the settings icon in the bottom right corner like yours is showing. Where else can i find that option to select email/phone? Thanks in advance!

[@SourenAryan]

Hi Carl, worked great! just when i scroll it disappears on other sections of the home page. I have even tried building it into the footer but it does not scroll on any other sections of the page. Any idea on how to fix this?

[@hannahlozanoagnone9811]

Following - I'm having the same issue!

[@jond661]

My button now overlays the entire page for some reson

[@rafathemedany4216]

Dear Sir, How did you solve this problem kindly?

[@johnrichardson7380]

Can this button go across all pages on the website or just the page that you set it up on?

[@amirdaryani]

Thanks again for the useful tips. about the mobile version, I was wondering is it possible to have a different home page on mobile than the PC version?

[@AliciaTisdale-q2j]

Ok, so I tried this but it made the buttom take up the whole page. what did I do wrong?

[@chenesebeanmua]

That’s cool. Can this be done for emails?

[@Carl_Johnson]

Sure! In you button settings select Email instead of Phone, and voila!! 😊

[@rmd7425]

Great video! BUT for some reason, the button gets hidden behind some sections even with the z-index set to 9999. Any idea why this is happening?

[@DanielGiraldofuturaico]

I solved: add the button inside the footer and put this extra code in CSS: #footer-sections { z-index: 9999; }

[@Leonhart407]

​​@@DanielGiraldofuturaico This worked perfectly for me! Thank you. Is there a way to make it so the button hides behind the mobile menu when it's open?

[@DanielGiraldofuturaico]

@@Leonhart407 you need to create a @media query defining the position or the display

[@Orion33759]

@@DanielGiraldofuturaico My button appears small and normal but behind the scenes it’s eating up half my page and huge in size. On mobile I can only click things on the top half of my screen. The only thing I can click on the bottom half is the button itself. Any ideas?

[@baloconcept864]

My button enlarge itself and filling up the screen instead, What I the cause pls?

[@Natalia-if8yx]

hi, did you figure this out?

[@Natalia-if8yx]

I added width: 20%; height: 10%; in the end and it worked

[@baloconcept864]

@@Natalia-if8yx yes I did

[@floreverschueren9944]

you can also make the button fit the text in the button settings. It'll either fit the text or fit the frame in which you put it. Mine did the same cause it was trying to fill up the sectioan I put it in, which was a full width section.

[@Orion33759]

@@floreverschueren9944I set it to Fit, it APPEARS better, but in actuality it’s still sitting on top of everything. I still can’t click or access anything under its invisible huge boarders

[@jermundur]

Hi! I`m an doing excatly as you are showing, but the button is just in the middle of the page following down and up when I`m scrolling? It won`t stuck in the corner. Please help. Thanks. Mvh Jermund

[@Carl_Johnson]

Can you share the code exactly as you've put it into Squarespace please?

[@floreverschueren9944]

@@Carl_Johnson I have the same issue. The code I used is #block-yui_3_17_2_1_1689258998833_3019{ position: fixed; z-index: 9999; bottom: 1%; right: 1%; }

[@Melody-tu4fn]

@@floreverschueren9944 @jermundur I had the same issue. I changed the horizontal and vertical alignment of the button and it worked as expected. Change to align to bottom and align to right in the edit on fluid engine.

[@Melody-tu4fn]

It worked! BUT it seems to sits on top of everything so none of the other buttons can be clicked now. Any idea how to get around this? I tried the footer suggestions below, same issue sadly. Thanks!

[@Orion33759]

SAME ISSUE! Desperately trying to fix this before a site launch

[@rafathemedany4216]

Dear Sir, How did you solve this problem kindly?

[@karand653]

Can you do a video on integrating an aesthetic live chat option through squarespace?

[@Carl_Johnson]

Thanks for the suggestion, Karen. I'll definitely put it on my list of potential tutorials. In the mean time Elfsight do a bunch of chat plugins if you wanted to give them a try bit.ly/3t4tRfd

[@karand653]

@@Carl_Johnson I have tried their free versions, it just doesn't fit the aesthetic at all.. would be great to do a video on different options maybe. such as adding whatsapp live chat, fb messenger, or any other way css..

[@impactjiujitsuabq279]

Hey there, is there anyway to apply this across all pages without doing it on each page?

[@Carl_Johnson]

Unfortunately not using this method. It can be done with code though, but you would have to build a button with HTML and CSS.

[@impactjiujitsuabq279]

Figured out if you build it into the footer it works across all pages!

[@contticg]

@@impactjiujitsuabq279 Hello, would you be so kind and share the code please?

[@rolandvandenhout]

Hilarious! Thanks Carl...

[@Carl_Johnson]

Thanks Roland!

[@Carl_Johnson]

Poor Daniel 🤪

[@dakotarice2535]

For some reason, my button takes up the foll space of the screen now.

[@rafathemedany4216]

Dear Sir, How did you solve this problem kindly?