Widget random timing

[Susan_Hunter_Guise]

I love this little widget! As well as offering random sales notifications, make the timing random as well, so they are not popping up on a predictable basis.

[Max]

Hi @Susan_Hunter_Guise

Do I understand right that you’d like the Notification Interval to be always changing?

[Susan_Hunter_Guise]

Yes, I’d like it to be variable too!

[Max]

You’d like to some other options be random as well, right?

Could you please describe what other features you mean under the random timing?

[Susan_Hunter_Guise]

Sure. Let’s call the item I have created a sale (button and text and image). The sales should be randomly shown at random times ranging from 5 second to a minute, whatever ranges you have. Nothing should be predictable. Is it clear?

[Max]

Hi @Susan_Hunter_Guise

Just to clear things up, you’d like to have 2 options: Random Notification interval and random display duration. Am I right?

[Susan_Hunter_Guise]

Yes!

[Max]

Thank you!

I’ve forwarded your request to the devs. I’ll report back once the solution is ready

[Susan_Hunter_Guise]

That’s super! Thanks!

[Max]

@Susan_Hunter_Guise Thank you for waiting!

We’ve added this code to the Custom JS section on the Style tab of your widget’s settings:

const MIN_DELAY = 40;
const MAX_DELAY = 180;

const MIN_DURATION = 5;
const MAX_DURATION = 15;

const WIDGET_ID = '3b741b6d-6f87-43a3-b0ed-1e3656806951';

const NOTIFICATION_SELECTOR = `.eapps-sales-notification-${WIDGET_ID}-custom-css-root [class*='slide-in__ActivatePointerEvents-sc']`;
const CLOSE_BTN_SELECTOR = '[class*="close-button__CloseButtonContainer-sc"]';

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,
    });
  });

const getRandom = (min, max) =>
  Math.floor(Math.random() * (max - min + 1) + min);

waitForElem(NOTIFICATION_SELECTOR).then((container) => {
  container.style.transition = '0.4s';

  const callback = (mutationList) =>
    mutationList.forEach(({ type, addedNodes: [addedNode] }) => {
      if (type !== 'childList' || !addedNode) return;

      container.style.transform = 'translateX(-200%)';

      const hideDuration = getRandom(MIN_DELAY, MAX_DELAY) * 1000;

      setTimeout(() => {
        container.style.transform = 'translateX(0%)';

        const displayDuration = getRandom(MIN_DURATION, MAX_DURATION) * 1000;

        const closeBtn = addedNode.querySelector(CLOSE_BTN_SELECTOR);

        const closeNotification = () => {
          closeBtn?.click();

          if (document.querySelector(CLOSE_BTN_SELECTOR) === closeBtn) {
            setTimeout(closeNotification, displayDuration);
          }
        };

        setTimeout(closeNotification, displayDuration);
      }, hideDuration);
    });
  const observer = new MutationObserver(callback);
  observer.observe(container, { childList: true });
});

To make it work correctly, the Close button should be enabled (screenshot 1) and these settings shouldn’t be changed (screenshot 2):

Try it out and let me know how it worked

[Susan_Hunter_Guise]

Hi Max,

All settings were ok. I’m running on my website but I can’t say I’ve seen the timing variation although I know it’s there. I get a bit distracted and look away!

Thank you for adding this feature to the widget! I really like it.

[Floridita_Dance]

I want this as well. I applied the JS code and set settings as suggested on screens 1 & 2, but didn’t work for me. I would like it to be unpredictable—a random interval of the notifications, for example, if you’ve got 3 types of notifications setup.

And random seconds interval. For example Jessica signed for a course - 3 minutes ago. That same notification could come around and say 1 minute ago.

My last question. Does the sales notification pick up on form completion on the website? For example, if Alex should sign up for a free taster class here https://www.floriditadance.com/voucher01 . Would the sale notification pick on that name and say “Alex just signed up for a free taster class?” Or will it always be Jessica?

Asking because when I was using ProveSource, the names were alternating as people entered their names on the form.

Thanks in advance for your response

[Max]

Hi there, @Floridita_Dance

1. To make the code work, you should replace the widget ID from the code with the ID of your widget:

Try it out and let me know if it worked

2. I’ll check with the devs if it’s possible to randomly change Notification Time and update you tomorrow

3. Currently, it’s impossible to do this, and I see that you’ve already found a request for this feature - API integration to pass info from the checkout

[Max]

Thank you for waiting, @Floridita_Dance

Here is the solution from our devs to randomly change the Notification Time:

<iframe
  src="about:blank"
  style="display: none"
  onload="
    const getRandomInt = (min, max) => {
      const minCeiled = Math.ceil(min);
      const maxFloored = Math.floor(max);
      return Math.floor(Math.random() * (maxFloored - minCeiled) + minCeiled);
    }
    
    const timeContainer = document.querySelector(`[class*='content__Time-sc']`);
    timeContainer.textContent = `${getRandomInt(1, 20)} minutes ago`;
    this.remove();
  "
></iframe>

This code was added to the Message field of each notification through the Code Editor mode:

The random notification time will vary from 1 to 20 minutes, but you can change these values in the 12th line of the code:

Check it out and let me know if you like the result