Auto Close option

Wishlist Popup
1

Ability for Popup to appear and disapear within a configured time

One should be able to set a time in seconds when the popup should appear after the site is visted and also set a time to disapear.

1 Like
4

Hi there @user14809 :wave:

We cannot but agree that it would be a nice addition, and we’ll try to consider this option in the future.

As for now, I’ve forwarded your request to the devs. They’ll be happy to come up with a custom solution and I’ll make sure to update you here once its ready :slightly_smiling_face:

5

Thank you for waiting, @user14809!

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 = '709a0066-d5b7-43ab-b791-cc2c0e0e8ba3'

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.

MAX_INTERVAL_TIME is the time in milliseconds that the script will check if the popup has appeared. Once this time runs out, the check stops automatically, and the script won’t run. This is necessary because you’ve set the Time on Page trigger to 15 seconds


Test it out and let me know if you like the result :slightly_smiling_face: