By default, the Spinning Wheel widget appears every time the page is loaded, even if it was previously closed. However, there’s an option to prevent it from reappearing once it’s been closed.
Just add the code below to the Custom JS field on the Settings tab of your widget’s settings:
const widgetId = 'YOUR WIDGET ID';
const waitForElement = (selector, root = document) =>
new Promise((res) => {
let i = 0;
const check = () => {
const component = root.querySelector(selector);
if (component) {
res(component);
} else if (i !== 50) {
setTimeout(check, 100);
i++;
}
};
check();
});
waitForElement(`.elfsight-app-${widgetId} > div`).then(() => {
const hidePopup = () => {
const closeButton = document.querySelector(
'[class*="PopupCloseControl__PopupCloseControlContainer-sc"]'
);
const popupOverlay = document.querySelector(
'[class*="Popup__PopupContainer-sc"]'
);
closeButton.addEventListener('click', () => {
localStorage.setItem('SW_hidden', true);
});
popupOverlay.addEventListener('click', (event) => {
if (!event.target.closest('[class*="Popup__PopupContent-sc"]')) {
localStorage.setItem('SW_hidden', true);
}
});
};
const reopenBtn = document.querySelector(
`.eapps-spinning-wheel-${widgetId}-custom-css-root [class*="FloatingButton__FloatingButtonContainer-sc"] button`
);
const mainPopup = document.querySelector('[aria-modal="true"]');
if (localStorage.getItem('SW_hidden')) {
mainPopup.style.display = 'none';
}
reopenBtn?.addEventListener('click', () => {
localStorage.removeItem('SW_hidden');
mainPopup.style.display = 'block';
setTimeout(function () {
hidePopup();
}, 200);
});
hidePopup();
});
Note: Do not forget to replace YOUR WIDGET ID in the 1st line of the code with the ID of your own widget.
Let us know if this solution was helpful