Product update · Widget
Move the chat button clear of your own buttons
Nudge the chat button in from the corner of the page, with separate settings for desktop and mobile, so it never covers your cookie banner or cart.
· 3 min read
- Shipped
- Area
- Widget
- Available on
- Every plan
Most websites already have something in the bottom corner: a cookie banner, a "back to top" arrow, a cart button, another tool's icon. If the chat button sits on top of it, one of them becomes hard to tap. Until now you could pick a corner but not move the button within it. Now you can push it in from the edge by as many pixels as you need.
What's new
- Horizontal and vertical offsets. Move the chat button away from the side and up from the bottom of the page, in pixels.
- Separate values for mobile. Phones usually need a different gap than desktops, so you can set mobile offsets on their own. Leave a mobile box blank and it uses the desktop value.
- The chat window moves with it. On desktop, the open chat window lines up with the button's new spot instead of snapping back to the corner.
- You can see it in the preview. The Studio preview shows dashed guide lines with the pixel values, so you can check the gap before you publish.
How to use it
- Open your chatbot in Studio and go to the Design tab.
- Choose Chat button, then Branding.
- Under Button Offset (px), set Horizontal · Desktop and Vertical · Desktop.
- If phones need a different gap, set Horizontal · Mobile and Vertical · Mobile.
- Check the guide lines in the preview, then publish.
Good to know
- Offsets go inward from the corner you chose. With Bottom Right, the horizontal offset moves the button left, away from the right edge. With Bottom Left, it moves right. The vertical offset always moves it up.
- Centered buttons ignore the horizontal offset. If the button is set to Bottom Center, it stays centered and only the vertical offset applies.
- Each offset goes from 0 to 200 pixels, added on top of the standard gap from the edge.
- "Mobile" means narrow screens. The mobile values apply when the page is 640 pixels wide or less, and switch over if the visitor resizes or rotates.
- On phones, the open chat still fills the screen. Offsets move the button. Once a visitor opens the chat on a phone, it opens full screen as before.
- Existing chatbots don't move. Offsets start at zero, so nothing changes until you set them.
- Inline embeds don't have a button. If you place the chat inside your page with the inline embed, these settings don't apply.
For developers
The offsets are stored on the chatbot's styling (chatIcon.offsetX, offsetY, offsetXMobile, offsetYMobile, all non-negative integers) and are read by the embed script, so no change to your embed snippet is needed. The script re-applies them on window resize, using 640px as the mobile breakpoint.