Reviews Badges not displaying in the Elfsight editor or on the website

Ask the Community General Questions
1

EDIT - FOUND THE ISSUE: This is due to viewing the site using the Brave web browser. The issue does not occur in Chrome. What do you think could be in the badge that would cause this issue in some browsers?

Hi there

I’m trying to customise and add a reviews Card Badge or Compact Badge in a WordPress site. When I go to customise the badge in the Elfsight dashboard, no preview is displayed (or let’s say that a preview flashes briefly on screen and then disappears). Similarly, the badge does not appear on my website when I add the code via a Custom HTML block.

The reviews themselves are there, as a Carousel using the same sources is displaying correctly.

Is there an issue somewhere with the Card/Compact Badge set-up?

Demo here so you can see what I mean: Elfsight Card/Compact Badge issue | Loom

Thanks

2 Likes
3

Hi there and welcome aboard, @Dom_Wint :waving_hand:

The issue occur because of the Brave Shields which hide the widget. We’ve fixed the issue by adding this code to the Custom JS field on the Settings tab of your widget’s settings:

const WIDGET_ID = '119a4d38-38f4-409d-bc0d-2efefa5e4664';
const BADGE_CLASS = 'es-badge-container';

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(`[class*="${WIDGET_ID}"] .${BADGE_CLASS}`).then((badge) => {
  badge.classList.remove(BADGE_CLASS);

  new MutationObserver(() => {
    if (badge.classList.contains(BADGE_CLASS)) {
      badge.classList.remove(BADGE_CLASS);
    }
  }).observe(badge, {
    attributes: true
  });
});

Custom JS codes don’t work in the preview mode, so the solution provided will fix the widget display on your website only.

If you’re going to edit the widget in the Brave browser, we recommend you disable the Brave Shields.

Please let me know if this explains things or if you have any questions leftc :slightly_smiling_face:

3 Likes
4

Amazing! Thanks for such a speedy and helpful reply. It works like a charm.

3 Likes
5

No sweat!

Don’t hesitate to contact us here again in case of any questions. We’ll be happy to advise :wink:

1 Like