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

I used code and the wheel is gone! Is there a way to add text that appears in the empty space left by the wheel? Also, can a timer be added so the wheel reappears at a later date?

1 Like

Hi there, @Shawn_Martin :wave:

Would you like the timer to displayed right on the page or you just wish the wheel to appear again after a certain period?

‘ Mayce a message block to let user know they can spin again in a set timeframe again with a countdown timer?

Thank you,
Shawn Martin
FanYourLocal

1 Like

@Shawn_Martin The thing is that our widget allows only 1 spin for a user. Thus, even if we create a code making the widget to appear after a certain period, users who’ve already spun it, won’t be able to do this again.

The widget for these users will be displayed this way:

Do I get it right that without the spin reset option, you don’t need the widget to reappear?