Reviews: How to control the badge display after its closing

Pro Tips Elfsight Widgets Tips
1

When visitors close the Reviews badge on your website, it won’t pop up again for an extended period of time.

However, our devs found a custom solution to control this timeframe:

const TIMEOUT = 5000;

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('.es-close-button').then((closeBtn) => {
	closeBtn.addEventListener('click', (e) => {
		e.stopImmediatePropagation();
		
		const badge = e.target?.closest('.es-badge-container');
		if (!badge) {
			return;
		}
        badge.style.display = 'none';
		setTimeout(() => {
			badge.style.display = 'inline-flex';
		}, TIMEOUT);
	});
});

Add this code to the Custom JS field on the Settings tab of your widget’s settings.

In the 1st line of the code (TIMEOUT), set the time interval (in milliseconds) after which the badge should appear again. When refreshing the page, the badge will appear immediately.


Guys, let us know if the solution was helpful in the comments below :point_down:

1 Like