# Widget random timing

**URL:** <https://community.elfsight.com/t/widget-random-timing/86629>\
**Category:** Sales Notification\
**Tags:** Gathering-Feedback\
**Created:** [December 2, 2024, 9:11pm UTC](https://community.elfsight.com/t/widget-random-timing/86629 "2024-12-02T21:11:55Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![Susan\_Hunter\_Guise](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/susan_hunter_guise/32/45395_2.png) [@Susan\_Hunter\_Guise](https://community.elfsight.com/u/Susan_Hunter_Guise)\
**Post date:** [December 2, 2024, 9:11pm UTC](https://community.elfsight.com/t/widget-random-timing/86629/1 "2024-12-02T21:11:55Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [December 3, 2024, 4:45pm UTC](https://community.elfsight.com/t/widget-random-timing/86629/2 "2024-12-03T16:45:11Z")

</div>

Hi @Susan_Hunter_Guise 👋

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

---

<div class="post-metadata">

**Author:** ![Susan\_Hunter\_Guise](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/susan_hunter_guise/32/45395_2.png) [@Susan\_Hunter\_Guise](https://community.elfsight.com/u/Susan_Hunter_Guise)\
**Post date:** [December 3, 2024, 5:07pm UTC](https://community.elfsight.com/t/widget-random-timing/86629/3 "2024-12-03T17:07:15Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [December 3, 2024, 6:20pm UTC](https://community.elfsight.com/t/widget-random-timing/86629/4 "2024-12-03T18:20:50Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![Susan\_Hunter\_Guise](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/susan_hunter_guise/32/45395_2.png) [@Susan\_Hunter\_Guise](https://community.elfsight.com/u/Susan_Hunter_Guise)\
**Post date:** [December 3, 2024, 6:57pm UTC](https://community.elfsight.com/t/widget-random-timing/86629/5 "2024-12-03T18:57:00Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [December 4, 2024, 11:58am UTC](https://community.elfsight.com/t/widget-random-timing/86629/6 "2024-12-04T11:58:39Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![Susan\_Hunter\_Guise](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/susan_hunter_guise/32/45395_2.png) [@Susan\_Hunter\_Guise](https://community.elfsight.com/u/Susan_Hunter_Guise)\
**Post date:** [December 4, 2024, 2:32pm UTC](https://community.elfsight.com/t/widget-random-timing/86629/7 "2024-12-04T14:32:10Z")

</div>

Yes!

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [December 4, 2024, 6:04pm UTC](https://community.elfsight.com/t/widget-random-timing/86629/8 "2024-12-04T18:04:14Z")

</div>

Thank you!

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

---

<div class="post-metadata">

**Author:** ![Susan\_Hunter\_Guise](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/susan_hunter_guise/32/45395_2.png) [@Susan\_Hunter\_Guise](https://community.elfsight.com/u/Susan_Hunter_Guise)\
**Post date:** [December 4, 2024, 6:11pm UTC](https://community.elfsight.com/t/widget-random-timing/86629/9 "2024-12-04T18:11:44Z")

</div>

That’s super! Thanks!

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [December 9, 2024, 11:42am UTC](https://community.elfsight.com/t/widget-random-timing/86629/10 "2024-12-09T11:42:41Z")

</div>

@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:

```auto
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):

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/5/2/521d559f8f802644c1df945577777328655037e3.png) ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/c/0/c040c886981702debb7073ba5e1773000aef7888.png)

  

Try it out and let me know how it worked 🙂

---

<div class="post-metadata">

**Author:** ![Susan\_Hunter\_Guise](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/susan_hunter_guise/32/45395_2.png) [@Susan\_Hunter\_Guise](https://community.elfsight.com/u/Susan_Hunter_Guise)\
**Post date:** [December 9, 2024, 4:23pm UTC](https://community.elfsight.com/t/widget-random-timing/86629/12 "2024-12-09T16:23:04Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Floridita\_Dance](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/floridita_dance/32/51385_2.png) [@Floridita\_Dance](https://community.elfsight.com/u/Floridita_Dance)\
**Post date:** [January 18, 2025, 5:02pm UTC](https://community.elfsight.com/t/widget-random-timing/86629/13 "2025-01-18T17:02:42Z")

</div>

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](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

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [January 20, 2025, 3:25pm UTC](https://community.elfsight.com/t/widget-random-timing/86629/14 "2025-01-20T15:25:16Z")

</div>

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](https://help.elfsight.com/article/1219-where-to-get-your-widget-id-in-new-dashboard):

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/6/3/637a3262e704f0099871bb856de0d5b7f6868d1c.png)

  

Try it out and let me know if it worked 🙂

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

2. 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](https://community.elfsight.com/t/api-integration-to-pass-info-from-the-checkout/43455)

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [January 22, 2025, 1:42pm UTC](https://community.elfsight.com/t/widget-random-timing/86629/15 "2025-01-22T13:42:16Z")

</div>

Thank you for waiting, @Floridita_Dance 👋

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

```auto
<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:

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/6/0/60ed222878d4c263a7beeeb65ac35a4d3d3f3658.png) ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/3/c/3c546722409a0fa42adfca66b2d208e193064f0e.png)

  

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

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/d/5/d5a9a4731262832a4050dc4d498507d226267712.png)

  

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