Options to set different position on mobile and desktop (floating badge)

On our website I want to use the floating badge, on desktop I can put it in the bottom left and it’d work perfect, on mobile it would cover a sticky bottom menu to call + book online so i wouldn’t want the button to show on mobile, but there’s no option to do so.

Hi there, @user26007 and welcome to the Community :waving_hand:

Thank you so much for the feedback!

I agree that it would be great to have these options as settings in the widget. We’ll try to consider this opportunity in the future, especially if more users upvote it :slightly_smiling_face:

As for now, you can place the badge on mobile higher using this code in the Custom CSS field on the Style tab of your widget’s settings:

@media (max-width: 500px) {
.es-badge-container { 
  margin-bottom: 150px;
}
}

If this code doesn’t work for you, please send me a link to the page, where your widget is installed.


And just in case, here is the code to hide the badge on mobile:

@media (max-width: 500px) {
.es-badge-container { 
display: none;
}
}

I’m a Wix and Square expert, and I love floating badges.

My biggest issue is the mobile version: most businesses now use live chat or book now buttons as floating buttons on the right, and when we install the ElfSight floating Google review, it appears in the middle on mobile. I can’t opt to place it on the left side on mobile, so I request that the team provide mobile customization to place it on the left or right, and a different layout so it doesn’t overlap with the existing chat or book now button. Maybe just a circle on the left with “G”. Check the screenshot for overlapping issues on both Wix and Square clients:

I just found out about sticker reviews, it has the same options which I’m looking for. I think it would work for now, but anyway, if the above info helps the team with anything

Thanks

Hi there, @busignerdarshan :waving_hand:

Thank you so much for the feedback!

I agree that it would be great to control the badge position on mobile right in the settings. We already have a similar request on the Wishlist and I’ve added your comment there too.

As for now, you can change the mobile alignment using this code in the Custom CSS field on the Style tab of your widget’s settings :wink:

@media (max-width: 481px) {
.slide-in-position-container {
justify-content: start;
margin-left: 20px;
}
}

Thank you