# Whatsapp button margin bottom

**URL:** <https://community.elfsight.com/t/whatsapp-button-margin-bottom/15778>\
**Category:** General Questions\
**Created:** [May 23, 2023, 10:04am UTC](https://community.elfsight.com/t/whatsapp-button-margin-bottom/15778 "2023-05-23T10:04:58Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![MARKETING4](https://avatars.discourse-cdn.com/v4/letter/m/5f8ce5/32.png) [@MARKETING4](https://community.elfsight.com/u/MARKETING4)\
**Post date:** [May 23, 2023, 10:04am UTC](https://community.elfsight.com/t/whatsapp-button-margin-bottom/15778/1 "2023-05-23T10:04:58Z")

</div>

Hi,

How can i move up the whatsapp floating button with CSS? I want to use the chat here [h2b Hipotecas | La teva hipoteca rodona](https://www.h2bhipotecas.com/ca) but it will crash with my other bot…

![Captura de pantalla 2023-05-23 a las 12.02.46](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/2X/e/e649c712f7cb01a154aa53d0449ef5002f959c78.png)

thanks!

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [May 23, 2023, 11:03am UTC](https://community.elfsight.com/t/whatsapp-button-margin-bottom/15778/3 "2023-05-23T11:03:00Z")

</div>

@MARKETING4 Hey there and welcome to Community ❤

Sure thing, we’ll be happy to assist! Would you like to move it above your bot or maybe to the left?

---

<div class="post-metadata">

**Author:** ![MARKETING4](https://avatars.discourse-cdn.com/v4/letter/m/5f8ce5/32.png) [@MARKETING4](https://community.elfsight.com/u/MARKETING4)\
**Post date:** [May 23, 2023, 11:38am UTC](https://community.elfsight.com/t/whatsapp-button-margin-bottom/15778/4 "2023-05-23T11:38:52Z")

</div>

Above will be better, also for mobile view its better, thanks!

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [May 23, 2023, 1:25pm UTC](https://community.elfsight.com/t/whatsapp-button-margin-bottom/15778/5 "2023-05-23T13:25:17Z")

</div>

We’ve moved your WhatsApp Chat widget by adding this code to the Custom CSS field:

```auto
.global-styles,
[class^="Window__WindowComponent"],
[class^="FloatingButton__FloatingButtonContainer"] {
  bottom: 80px;
}

```

Please check your website and let me know if you like what you see 🙂

---

<div class="post-metadata">

**Author:** ![MARKETING4](https://avatars.discourse-cdn.com/v4/letter/m/5f8ce5/32.png) [@MARKETING4](https://community.elfsight.com/u/MARKETING4)\
**Post date:** [May 23, 2023, 2:48pm UTC](https://community.elfsight.com/t/whatsapp-button-margin-bottom/15778/6 "2023-05-23T14:48:26Z")

</div>

> [@Max](#):
>
> ```auto
> .global-styles,
> [class^="Window__WindowComponent"],
> [class^="FloatingButton__FloatingButtonContainer"] {
> bottom: 80px;
> }
> 
> ```

That worked perfectly, thanks!

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [May 23, 2023, 2:49pm UTC](https://community.elfsight.com/t/whatsapp-button-margin-bottom/15778/7 "2023-05-23T14:49:26Z")

</div>

You are always welcome 😉

---

<div class="post-metadata">

**Author:** ![Damiano\_Fersini](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/damiano_fersini/32/4949_2.png) [@Damiano\_Fersini](https://community.elfsight.com/u/Damiano_Fersini)\
**Post date:** [January 9, 2024, 10:26am UTC](https://community.elfsight.com/t/whatsapp-button-margin-bottom/15778/8 "2024-01-09T10:26:40Z")

</div>

> [@Max](#):
>
> ```auto
> .global-styles,
> [class^="Window__WindowComponent"],
> [class^="FloatingButton__FloatingButtonContainer"] {
> bottom: 80px;
> }
> 
> ```

I tried using this but it didn’t work for me. I still have a margin at the bottom of my footer. Any cue ?

[https://blenny-blue-6prx.squarespace.com/](https://blenny-blue-6prx.squarespace.com/)  
pw : password1234

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [January 9, 2024, 10:52am UTC](https://community.elfsight.com/t/whatsapp-button-margin-bottom/15778/9 "2024-01-09T10:52:44Z")

</div>

Happy to see new faces around here! Welcome @Damiano_Fersini 👋

This code moves the WhatsApp Chat bubble to the top. I’ve checked the code and it works correctly:

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/0/c/0cbec010598c02de021f16a2ffa61d4572c5ff04.png)

Do I understand correctly that you’d like to place the widget a bit lower?

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/4/8/482925ce3f957884b509f7e51e30f49cce718af8.jpeg)

---

<div class="post-metadata">

**Author:** ![Damiano\_Fersini](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/damiano_fersini/32/4949_2.png) [@Damiano\_Fersini](https://community.elfsight.com/u/Damiano_Fersini)\
**Post date:** [January 9, 2024, 11:11am UTC](https://community.elfsight.com/t/whatsapp-button-margin-bottom/15778/10 "2024-01-09T11:11:09Z")

</div>

Hello,

thanks for the greeting Max !

No sorry. I am happy with the automatic placement of the whatsapp bubble. But not with the white margin that appeared at the bottom of my website. When I remove the code from the injected footer code, the white bottom disappears. If i put it back, it appears. So i am guessing squarespace is putting it at the bottom somehow. How do I remove that white space ? Thanks !

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [January 9, 2024, 11:18am UTC](https://community.elfsight.com/t/whatsapp-button-margin-bottom/15778/11 "2024-01-09T11:18:41Z")

</div>

Oh, I got you!

You see this white space due to our information panel. You’re the only person who can see it, and you can only see it when you’re logged in to your Elfsight account. It’s displayed for you as the account owner. In my previous screenshot, this white spacing is displayed because of the special browser extension.

When you log out of the account, you won’t see this either white space or the panel, and your website visitors never ever see it at all.

You can check the widget on your website in incognito mode to make sure that no one else can see it:

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/c/6/c6812e192007aff28825464578c570943215582c.jpeg)

This being said, here is a special article about it - [Why I see a panel above my widget](https://help.elfsight.com/article/740-why-do-see-a-panel-above-my-wigdet)

Please let me know if you have any other questions 🙂

---

<div class="post-metadata">

**Author:** ![Damiano\_Fersini](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/damiano_fersini/32/4949_2.png) [@Damiano\_Fersini](https://community.elfsight.com/u/Damiano_Fersini)\
**Post date:** [January 9, 2024, 11:20am UTC](https://community.elfsight.com/t/whatsapp-button-margin-bottom/15778/12 "2024-01-09T11:20:13Z")

</div>

> [@Max](#):
>
> a

Ok i get it now. it is my first widget. Thanks for explaining !

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [January 9, 2024, 11:21am UTC](https://community.elfsight.com/t/whatsapp-button-margin-bottom/15778/13 "2024-01-09T11:21:04Z")

</div>

You are always welcome 😉
