Skip to main content
Shops on any platform can push the chat bubble away from any screen edge with a CSS variable. Use it when something on your page covers the bubble, like an add-to-cart bar that slides in when visitors scroll, a cookie message, or a button fixed to the side of the page. Use the one that matches the corner your bubble sits in, which you pick in Chatbot → Design.

​
Add it to your theme

Set the variable to the height of the thing you want to clear, plus a little breathing room. Nothing moves until you set it:
To move the bubble only while the bar is on screen, put the variable on the class your theme adds when the bar appears:
Or set it from your own code:
Set it back to 0px and the bubble returns to its normal spot. It slides between the two, so the move is smooth.

​
What else moves

The pop-up message, the “Try it out” hint, and the floating bar move with the bubble, so they stay out of the way too. The open chat window shifts sideways but never up, since it already reaches the bottom of the screen.

​
Tips

  • One value covers phones and computers. Use your own media queries if the bar is a different height on phones.