Customization of Reviews badge

Ask the Community Customization
1

Hi Helga, this CCS code was helpful when the site is scroll down to bottom of the page.
Then the footer is hidden on mobile screen.

The Badge a little bit smaller is no realy the solution for me.
i need now the funktion it recognizes that it has scrolled down.

@media(max-width: 480px) {
[class*="BadgeContainer__Inner"] {
transform: scale(0.75);
}
.es-badge-container {
  transform: scale(0.75);
  transform-origin: left bottom;
}
}
2

@Sina I am afraid I don’t quite understand your idea. Could you please describe in more detail what you’d like to achieve?

A screenshot with the expected result would be appreciated :slightly_smiling_face:

4

Got it, thanks!

I’ll discuss it with the devs and will get back to you tomorrow :slightly_smiling_face:

5

sorry my english is bad to describe everything technically.

6

That’s no problem, I’ve completely got your idea :wink:

7

Hi, @Sina :wave:

If I got it right, you don’t like that the badge covers the footer when scrolling down. Our devs suggested using the code making the badge scrollable only before the footer:

(() => {
  const FOOTER_SELECTOR = 'footer2';

  const isMobile =
    /android|webos|iphone|ipad|ipod|blackberry|windows\sphone/i.test(
      navigator.userAgent
    );

  if (!isMobile) {
    return;
  }

  const waitForElem = (selector) =>
    new Promise((resolve) => {
      if (document.querySelector(selector)) {
        return resolve(document.querySelector(selector));
      }

      const observer = new MutationObserver(() => {
        if (document.querySelector(selector)) {
          observer.disconnect();
          resolve(document.querySelector(selector));
        }
      });

      observer.observe(document.body, {
        childList: true,
        subtree: true,
      });
    });

  waitForElem('.es-badge-container').then((badge) => {
    const footer = document.querySelector(FOOTER_SELECTOR);

    const updateBottomOffset = () => {
      const viewportHeight = window.innerHeight;
      const footerRect = footer?.getBoundingClientRect();
      const overlap = viewportHeight - footerRect?.top;

      badge.style.bottom = `${overlap > 0 ? overlap : 0}px`;
    };

    updateBottomOffset();

    window.addEventListener('scroll', updateBottomOffset);
  });
})();

Please add this code to the Custom JS section on the Settings tab of your widget’s settings and let me know if you like the result :slightly_smiling_face:

However, if the suggested solution doesn’t work for you, we’ll try our best to customize the widget to change its position only when reaching the footer.

9

Great! You are always welcome :slightly_smiling_face:

Regarding your suggestion, I think it’s more of a custom case. For some users, it’s perfectly fine if the badge covers part of the footer.

However, if anyone prefers a different setup, we’d be happy to offer a custom solution!

10

Hi, I’m having a similar issue where I’d like the same effect as Sina. I’m using Squarespace 7.1, and I copied and pasted the code thinking that it might work for me too, but to no avail. What would it take to customize the code to work for my site? I’ve attached an image to show what’s happening. https://www.swoonlearning.com/

Swoon Learning - Tutoring & Activities for Student-Athletes
Swoon Learning - Tutoring & Activities for Student-Athletes1170×2532 173 KB

12

Hi there, @Cory_Borman :wave:

We’ve adjusted the mobile view of your widget by adding this code to the Custom CSS field on the Style tab of your widget’s settings:

.global-styles,
body:has(.sqs-mobile-info-bar:not(.sqs-mobile-info-bar-hide))
  .es-badge-container {
  margin-bottom: 70px;
}

Please check your website and let me know if it’s fine now :slightly_smiling_face:

13

Looks wonderful! Thank you so much :blush:

14

Great! You are always welcome :wink:

By the way, we’d like to invite you to join our new challenge. This time, you should create a slogan for Elfsight to win a 6-month extension to your subscription.

Check the details and join in: October Challenge: Create Slogan for Elfsight and Win 6 Free Months! (+2 weeks guaranteed)

We’ll be super happy to see you as a participant :wink:

15

Hi, can the Yelp badge be hidden when a user accesses the mobile menu?

IMG_6747
IMG_67471170×2532 109 KB

16

Hi,
try out with.

display: none;
17

Hi there, @Cory_Borman :wave:

Do you want to hide the widget only in this specific menu section, or you don’t want to display the widget on mobile at all?

18

Only in this specific menu section

19

Thanks!

I’ve passed your request on to the devs and will get back to you tomorrow :slightly_smiling_face:

20

Hi there, @Cory_Borman :wave:

We’ve added this code to the Custom CSS field on the Style tab of your widget’s settings:

.es-badge-container {
  z-index: 9;
}

Check it out and let me know if it worked for you :slightly_smiling_face:

21

Works beautifully, thank you :pray: so much!!!

22

Great, you are most welcome :wink:

In the meantime, we’d be so grateful if you could look through the Yelp Reviews category on the Wishlist and upvote the ideas you like.

There are not so many requests in Yelp Reviews category, so you are very welcome to check All-in-One Reviews category (many ideas are common for all Reviews widgets).

Your feedback will greatly helps us set priorities right :slightly_smiling_face: