Automatically close popup after clicking on button that redirects to URL

Ask the Community Customization
1

When button action is set to URL in popup, so when someone clicked it in popup, it should not only redirect to the URL but also the popup should close by itself automatically and does not remain open after button click

2 Likes
3

Hi there, @Muneeb1 and welcome to the Community :waving_hand:

I see that you’re using anchor links for your buttons. I am happy to say that it’s possible to automatically close the popup after clicking the button using a custom code!

Your request is with our devs now, and I’ll update you once the solution is ready :slightly_smiling_face:

1 Like
4

Hi there, @Muneeb1 :waving_hand:

Thank you for waiting!

Here is a solution from our devs:

const WIDGET_ID = 'YOUR_WIDGET_ID';

const addPopupClosingByClick = () => {
	const widgetContainer = document.body.querySelector(
		`.eapps-popup-${WIDGET_ID}-custom-css-root`
	);

	if (!widgetContainer) {
		requestAnimationFrame(addPopupClosingByClick);
		return;
	}

	const popupObserver = new MutationObserver(() => {
		const popupMainButton = widgetContainer.querySelector(
			'[class*="Popup__PopupContainer-sc"] [class*="ButtonBase__ButtonContainer-sc"]'
		);

		if (!popupMainButton) return;

		popupMainButton.addEventListener('click', () => {
			const popupCloseButton = widgetContainer.querySelector(
				'[class*="PopupCloseControl__PopupCloseControlContainer-sc"]'
			);

			popupCloseButton?.click();
			widgetContainer.style.display = 'none';
		});
	});

	popupObserver.observe(widgetContainer, {
		childList: true,
	});
};

addPopupClosingByClick();

Please replace YOUR_WIDGET_ID in the 1st line of the code with the ID of your widget, and add the resulted code to the Custom JS field on the Settings tab of your widget’s settings.


Check it out and let me know if it helped :wink:

2 Likes