Spinning Wheel: How to display widget on button click

Pro Tips Elfsight Widgets Tips
1

Want the Spinning Wheel to appear on the button click instead of showing it on page load? We’ve got a solution!

Just add this script to the Custom JS field on the Settings tab of your widget’s settings and you’ll be fine:

const style = document.createElement('style');
style.innerHTML = `[class*="eapps-spinning-wheel"] [role="dialog"] {
  display: none !important;
}`;
document.body.append(style);

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*="eapps-spinning-wheel"] [class*="FloatingButtonContainer-sc"]'
).then((reopenBtn) => {
  reopenBtn.addEventListener('click', () => style.remove(), { once: true });
});

Guys, did the solution work for you? Let us know in the comments :wink:

1 Like