How to add a fixed chat button for WhatsApp

[tapcalap (Tolga Tapcalap)]

Hello,

I’d like to add a fixed chat button for WhatsApp to the bottom right corner of the screen (like the one on the elements website). I know how to link the button for chat, but I couldn’t figure out how to fix the button on the screen, so that even if you scroll the button stays at the same place.

Since I couldn’t figure it out I used a sticky menu and put the chat button there as a solution, but since its not the common place for a chat button, I don’t want to use it that way.

Tolga from Turkey, a novice website builder

[dan]

You need to set the Component to Fixed in the Layout section, and add some padding under Type (see screenshot below)

We also have a “scroll to top” template that does this (see screenshot below).

Hopefully that’s enough info to get you going, let me know if you need any further help

[tapcalap (Tolga Tapcalap)]

Thanks a lot Dan, scroll to top template works just fine. The only thing is that it disappears behind the footer at the end of the page. Is there a way to fix that so it stays on top of the footer as well?

[dan]

Try setting the z-index for your Button, like in the scroll to top component. Setting it to 1 might work, if not try a high number like 50

[tapcalap (Tolga Tapcalap)]

Nope, z-index is not doing it it goes behind the footer while scrolling. Footer’s z-index is et to 0, and the button is 50.

[sbchasin (Steve C.)]

Check ALL the components that make up the footer to be sure the z-index is less than that of the button

[tapcalap (Tolga Tapcalap)]

Hey Steve, they are all set to none, however the footer has a light grey background. The button appears when I remove the background, but than I loose the look I am going for.

So I set the background color to dark grey and turned down the opacity to 10%. This gives the look I want with a little gray overlay on the button (which is not bad). But the even if I can see the button its not clickable in the footer area, weird. And its not clickable even when I turn off the footer background. And the hover effects are not working either.

[miketee (Mike Tobin)]

Hi @tapcalap

Not sure if this will help, but when I had a similar problem with a drop-down menu hiding behind a hero section, it was “isolation” that fixed it!

Try playing with the “isolation” setting on the relevant components.

[tapcalap (Tolga Tapcalap)]

Hi Mike, thanks for the tip but isolation doesn’t do anything either

[dan]

Share your project via Elements Cloud and we’ll fix it up for you

[tapcalap (Tolga Tapcalap)]

Ok I figured it out. I accidentally placed the button inside a section in the page layout. Its fixed when I moved it to the top level.

Thank you all for your help.

[MultiThemes (Michelangelo)]

I made a template with a fixed button in each corner
I hope it’s helpful.

Place the button as the last element at the bottom of the page; you don’t have to insert it into other elements; it must be the last and alone, I don’t know the structure of your footer but this avoids other problems .

DOWNLOAD DEMO

By the way: if you use light boxes or other elements that have a very high z-index, set the z-index button to a lower value.

[tapcalap (Tolga Tapcalap)]

Wow, thanks alot @MultiThemes this is very helpful.

[MultiThemes (Michelangelo)]

I’m glad you like it
It could be improved with a tooltip or a mouseover animation on desktop.