Spinning Wheel: How to hide widget once it was closed

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 :slightly_smiling_face:

2 Likes

I was using the JS-code as you posted and filled in MY WIDGET ID - but the Weel is loading once it was closed. What went wrong?
:thinking:

1 Like

Hi there, @Monika_Mosch :wave:

Thanks for bringing this to our attention!

We’ve adjusted the code in the post and your widget. Check it out and let me know how it works :slightly_smiling_face:

1 Like

At the moment it looks like that the wheel is working as intended - but I will give it again a try later on. and let you know.

Thank you for taking care of!

2 Likes