# How to add a fixed chat button for WhatsApp **URL:** \ **Category:** Elements\ **Created:** [November 18, 2025, 8:19pm UTC](https://forums.realmacsoftware.com/t/how-to-add-a-fixed-chat-button-for-whatsapp/52558 "2025-11-18T20:19:16Z")\ **Posts on this page:** 14\ **Page:** 1
**Author:** ![tapcalap](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/tapcalap/32/32232_2.png) [@tapcalap](https://forums.realmacsoftware.com/u/tapcalap)\ **Post date:** [November 18, 2025, 8:19pm UTC](https://forums.realmacsoftware.com/t/how-to-add-a-fixed-chat-button-for-whatsapp/52558/1 "2025-11-18T20:19:16Z")
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 ---
**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\ **Post date:** [November 18, 2025, 10:24pm UTC](https://forums.realmacsoftware.com/t/how-to-add-a-fixed-chat-button-for-whatsapp/52558/2 "2025-11-18T22:24:30Z")
You need to set the Component to Fixed in the Layout section, and add some padding under Type (see screenshot below) ![CleanShot 2025-11-18 at 10 .22.32@2x](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/a/0/a0d4871ee61e90255115dc16026bdb0bc647ca6e.png) We also have a “scroll to top” template that does this (see screenshot below). ![CleanShot 2025-11-18 at 10 .21.08@2x](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/f/d/fd39668d2ba2330828360d51eff87a5b8c1376bb.jpeg) Hopefully that’s enough info to get you going, let me know if you need any further help 🙂 ---
**Author:** ![tapcalap](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/tapcalap/32/32232_2.png) [@tapcalap](https://forums.realmacsoftware.com/u/tapcalap)\ **Post date:** [November 18, 2025, 10:39pm UTC](https://forums.realmacsoftware.com/t/how-to-add-a-fixed-chat-button-for-whatsapp/52558/3 "2025-11-18T22:39:07Z")
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? ---
**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\ **Post date:** [November 18, 2025, 10:53pm UTC](https://forums.realmacsoftware.com/t/how-to-add-a-fixed-chat-button-for-whatsapp/52558/4 "2025-11-18T22:53:50Z")
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 🙂 ![CleanShot 2025-11-18 at 10 .51.51@2x](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/e/e/ee93e76e77b3d9026c79e39204c643cf9c5fc5c8.png) ---
**Author:** ![tapcalap](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/tapcalap/32/32232_2.png) [@tapcalap](https://forums.realmacsoftware.com/u/tapcalap)\ **Post date:** [November 18, 2025, 11:04pm UTC](https://forums.realmacsoftware.com/t/how-to-add-a-fixed-chat-button-for-whatsapp/52558/5 "2025-11-18T23:04:06Z")
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. ![Screenshot 2025-11-19 at 02.01.26](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/5/a/5a05edeedfe0e9c786fc3efa2a0d58efaae2ee9e.png) ---
**Author:** ![sbchasin](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/sbchasin/32/26943_2.png) [@sbchasin](https://forums.realmacsoftware.com/u/sbchasin)\ **Post date:** [November 18, 2025, 11:05pm UTC](https://forums.realmacsoftware.com/t/how-to-add-a-fixed-chat-button-for-whatsapp/52558/6 "2025-11-18T23:05:53Z")
Check **ALL** the components that make up the footer to be sure the z-index is less than that of the button ---
**Author:** ![tapcalap](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/tapcalap/32/32232_2.png) [@tapcalap](https://forums.realmacsoftware.com/u/tapcalap)\ **Post date:** [November 18, 2025, 11:20pm UTC](https://forums.realmacsoftware.com/t/how-to-add-a-fixed-chat-button-for-whatsapp/52558/7 "2025-11-18T23:20:50Z")
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. ---
**Author:** ![miketee](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/miketee/32/27560_2.png) [@miketee](https://forums.realmacsoftware.com/u/miketee)\ **Post date:** [November 18, 2025, 11:23pm UTC](https://forums.realmacsoftware.com/t/how-to-add-a-fixed-chat-button-for-whatsapp/52558/8 "2025-11-18T23:23:47Z")
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. ---
**Author:** ![tapcalap](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/tapcalap/32/32232_2.png) [@tapcalap](https://forums.realmacsoftware.com/u/tapcalap)\ **Post date:** [November 18, 2025, 11:27pm UTC](https://forums.realmacsoftware.com/t/how-to-add-a-fixed-chat-button-for-whatsapp/52558/9 "2025-11-18T23:27:52Z")
Hi Mike, thanks for the tip but isolation doesn’t do anything either ☹ ---
**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\ **Post date:** [November 18, 2025, 11:28pm UTC](https://forums.realmacsoftware.com/t/how-to-add-a-fixed-chat-button-for-whatsapp/52558/10 "2025-11-18T23:28:56Z")
Share your project via [Elements Cloud](https://docs.realmacsoftware.com/elements-docs/getting-started/elements-cloud) and we’ll fix it up for you 🙂 ---
**Author:** ![tapcalap](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/tapcalap/32/32232_2.png) [@tapcalap](https://forums.realmacsoftware.com/u/tapcalap)\ **Post date:** [November 18, 2025, 11:47pm UTC](https://forums.realmacsoftware.com/t/how-to-add-a-fixed-chat-button-for-whatsapp/52558/11 "2025-11-18T23:47:44Z")
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. ---
**Author:** ![MultiThemes](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/multithemes/32/25117_2.png) [@MultiThemes](https://forums.realmacsoftware.com/u/MultiThemes)\ **Post date:** [November 19, 2025, 7:22am UTC](https://forums.realmacsoftware.com/t/how-to-add-a-fixed-chat-button-for-whatsapp/52558/12 "2025-11-19T07:22:35Z")
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 😎. ![WA_button](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/d/f/dff6ae574cf226ee38f461737876f052052d6a43.jpeg) ➡ [DOWNLOAD DEMO](elementsapp://downloadDocument/459lg4jipQkk) 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. ---
**Author:** ![tapcalap](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/tapcalap/32/32232_2.png) [@tapcalap](https://forums.realmacsoftware.com/u/tapcalap)\ **Post date:** [November 19, 2025, 8:56am UTC](https://forums.realmacsoftware.com/t/how-to-add-a-fixed-chat-button-for-whatsapp/52558/13 "2025-11-19T08:56:56Z")
Wow, thanks alot @MultiThemes this is very helpful. ---
**Author:** ![MultiThemes](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/multithemes/32/25117_2.png) [@MultiThemes](https://forums.realmacsoftware.com/u/MultiThemes)\ **Post date:** [November 19, 2025, 4:36pm UTC](https://forums.realmacsoftware.com/t/how-to-add-a-fixed-chat-button-for-whatsapp/52558/14 "2025-11-19T16:36:23Z")
I’m glad you like it 🙂 It could be improved with a tooltip or a mouseover animation on desktop. ![2025-11-19 at 17.35.11](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/5/b/5b4d2eb8098b8ff53ce155e6a7268ca40789ce19.jpeg)