Auto Close Feature in Popup

Ask the Community Customization
1

Upon pop up displaying, it would be nice to have the pop up automatically close after xx time (seconds).

1 Like
3

Hi there @Joseph_Mueller :wave:

I guess it’s possible to implement this feature. Could you just specify the name of your Popup widget where you’d like to add the autoclosing?

4

The timing could vary, right? You may want it to display for 5 seconds one time depending on the context or maybe 10 seconds, but not to be mistaken for increments of 5, maybe increments of 1 up to 30 seconds?

I hope this helps.

1 Like
5

Sorry, I misread that (need more coffee). I was thinking this would be a feature for the entire popup widget as a configuration update. This specific case would be for the

image.png
image.png948×160 8.08 KB

1 Like
6

Thank you!

Just to make things clear, you’d like the popup to be displayed for 1-30 seconds and then it should be automatically closed. And after that, this action should be repeated about 5 times, right?

If it is, what should be the interval between these repetitions?

7

No, sorry, I am looking to have the popup load as normal upon the page loading. Once it’s run between 1-30 seconds, it should be configurable by the user for increments of 1 second. Once closed, it’s closed, but will pop back up each time the visitor visits the page/site.

1 Like
8

Got you!

Our devs will be happy to come up with a custom code for you! With this code, you’ll be able to set the exact duration for the popup display.

I’ve passed your request to the devs and will get back to you once I receive a response from them :slightly_smiling_face:

In the meantime, if you’d like to have this option right in the widget configurator, please vote on this idea on the Wishlist!

9

Thank you for waiting, @Joseph_Mueller!

Here is the solution from our devs (should be added to the Custom JS field on the Settings tab:

const TIME_TO_CLOSE = 6000;
const MAX_INTERVAL_TIME = 60000;
const WIDGET_ID = '08c2ca26-c43b-4f60-ac2c-3c932eb9014b'

const LISTEN_TYPES = {
  one: {
    select: (selector, root) => root.querySelector(selector),
    validate: node => !!node,
  },
  all: {
    select: (selector, root) => root.querySelectorAll(selector),
    validate: node => node?.length > 0,
  },
};

function listenStep(args) {
  const { step, limit, delay, select, validate, selector, root, resolve, reject } = args;
  const node = select(selector, root);

  if (validate(node)) {
    resolve(node);
  } else if (step < limit) {
    setTimeout(() => listenStep({ ...args, step: step + 1 }), delay);
  } else {
    reject();
  }
}

function asyncListenFor(selector, type = 'one', customArgs = {}) {
  const args = {
    root: document,
    selector,
    delay: 100,
    limit: 50,
    step: 0,
    ...LISTEN_TYPES[type],
    ...customArgs,
  };

  return new Promise((resolve, reject) => listenStep({ ...args, resolve, reject }));
}

asyncListenFor(`.eapps-popup-${WIDGET_ID}-custom-css-root`)
  .then(widgetContainer => {
    const intervalId = setInterval(() => {
      const closeButton = widgetContainer.querySelector('[class*="PopupCloseControl__PopupCloseControlContainer-sc"][aria-label="Close"]');
      
      if (closeButton) {
        clearInterval(intervalId);
        setTimeout(() => closeButton.click(), TIME_TO_CLOSE);
      }
    }, 1000);

    setTimeout(() => {
      clearInterval(intervalId);
    }, MAX_INTERVAL_TIME);

  })
  .catch(() => {
    console.error("Widget container not found.");
  });

TIME_TO_CLOSE is the duration of the popup display in milliseconds.

Give it a try and let me know how it worked :slightly_smiling_face: