# Add new frequency

**URL:** <https://community.elfsight.com/t/add-new-frequency/90024>\
**Category:** General Questions\
**Tags:** popup\
**Created:** [December 17, 2024, 6:52pm UTC](https://community.elfsight.com/t/add-new-frequency/90024 "2024-12-17T18:52:49Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![backhome84](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/backhome84/32/49202_2.png) [@backhome84](https://community.elfsight.com/u/backhome84)\
**Post date:** [December 17, 2024, 6:52pm UTC](https://community.elfsight.com/t/add-new-frequency/90024/1 "2024-12-17T18:52:49Z")

</div>

add additional frequency to “Show every specific time until registration is complete”

---

<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 17, 2024, 7:22pm UTC](https://community.elfsight.com/t/add-new-frequency/90024/3 "2024-12-17T19:22:27Z")

</div>

Hi @backhome84 👋

The thing is that after the form is submitted, users usually close the popup. So, “Show every time until I close it” frequency should work for this case

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/7/f/7f33d0449f908bf081aaeb6e7707165ffe12176f.png)

  

Let me know if this explains things or if you have any questions left 🙂

---

<div class="post-metadata">

**Author:** ![backhome84](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/backhome84/32/49202_2.png) [@backhome84](https://community.elfsight.com/u/backhome84)\
**Post date:** [December 17, 2024, 7:29pm UTC](https://community.elfsight.com/t/add-new-frequency/90024/4 "2024-12-17T19:29:06Z")

</div>

I tried that option but this setting doesn’t not enforce the user to register before he closes the form.

---

<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 18, 2024, 10:23am UTC](https://community.elfsight.com/t/add-new-frequency/90024/5 "2024-12-18T10:23:23Z")

</div>

Ah, got it! For this, you just need to disable the Close button on the Layout tab and keep using “Show every time until I close it” frequency:

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/9/0/9072763021e0afbab0ff9ce2d6cea48164842ecb.png) ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/c/c/ccdcf441e50b1fe8c3c99bd006fe790ee5676e77.png)

  

This way, users will have to submit the form first, and only after that, they’ll be able to close it by clicking on OK button.

With the “Show every time until I close it” frequency, the popup won’t appear for users who submitted it.

Check it out and let me know if it worked for you 🙂

---

<div class="post-metadata">

**Author:** ![backhome84](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/backhome84/32/49202_2.png) [@backhome84](https://community.elfsight.com/u/backhome84)\
**Post date:** [December 18, 2024, 5:06pm UTC](https://community.elfsight.com/t/add-new-frequency/90024/6 "2024-12-18T17:06:49Z")

</div>

I followed your settings and I turned on the backdrop.  
I still want to get this popup to show on after every frequency time which I set it up for 20 sec for now.

---

<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 18, 2024, 5:23pm UTC](https://community.elfsight.com/t/add-new-frequency/90024/7 "2024-12-18T17:23:58Z")

</div>

@backhome84, I’ve checked your website, and it looks like everything is working as you described now. The widget appears 20 seconds after the page loads, and when you reload the page, the popup appears again after 20 seconds.

Just to clarify - does everything work as you expected now? Or did you want the popup to appear 20 seconds after it’s submitted or closed, without needing to reload the page?

---

<div class="post-metadata">

**Author:** ![backhome84](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/backhome84/32/49202_2.png) [@backhome84](https://community.elfsight.com/u/backhome84)\
**Post date:** [December 18, 2024, 5:31pm UTC](https://community.elfsight.com/t/add-new-frequency/90024/8 "2024-12-18T17:31:13Z")

</div>

I want the popup to show up every 20 seconds until registration is complete without reloading the page.  
Do you understand what I mean now?

---

<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 18, 2024, 5:35pm UTC](https://community.elfsight.com/t/add-new-frequency/90024/9 "2024-12-18T17:35:55Z")

</div>

Got you, thanks!

I am not sure if it’s feasible, but I’ll discuss it with the devs and update you tomorrow 🙂

---

<div class="post-metadata">

**Author:** ![backhome84](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/backhome84/32/49202_2.png) [@backhome84](https://community.elfsight.com/u/backhome84)\
**Post date:** [December 18, 2024, 6:25pm UTC](https://community.elfsight.com/t/add-new-frequency/90024/10 "2024-12-18T18:25:21Z")

</div>

I think it’s not that hard.  
Create a routine to execute a task every specific time until the task is complete

---

<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 19, 2024, 12:22pm UTC](https://community.elfsight.com/t/add-new-frequency/90024/11 "2024-12-19T12:22:52Z")

</div>

Hi again, @backhome84 👋

I’ve talked to the devs, and they’ve confirmed that it’s possible to implement this feature.

To make it work, you need to enable the Close option ( Close button or Close popup on overlay click in the Backdrop settings) and this code to the Custom JS section on the Settings tab:

```auto
widget.form.on('submit', () => {
  window.localStorage.setItem(KEY, 'true');
});

const WIDGET_ID = '095f6e1b-ca8c-49c9-9e93-bfbc4a77f7fe';
const DELAY = 20; // In seconds
let installTimeout = null;

const KEY = 'elfsight-form-submitted';

function stopInterval() {
  if (!installTimeout) {
    return;
  }

  clearInterval(installTimeout);
  installTimeout = null;
}

function startInterval(target, observer) {
  installTimeout = setInterval(() => {
    const isFormSubmitted = window.localStorage.getItem(KEY) === 'true';

    if (isFormSubmitted) {
      stopInterval();
      observer.disconnect();

      return;
    }

    const button = target.querySelector(
      '[class*="ButtonBase__ButtonContainer-sc"]'
    );
    button?.click();
  }, DELAY * 1000);
}

function handleMutations(mutations, observer) {
  const targetNode = mutations.find(
    ({ target }) =>
      target.id === '__EAAPS_PORTAL' && target.className.includes(WIDGET_ID)
  )?.target;

  if (!targetNode) return;

  const isPaneOpen = targetNode.querySelector(
    '[class*="Pane__PaneContent-sc"]'
  );

  if (isPaneOpen) {
    stopInterval();

    return;
  }
  if (!installTimeout) {
    startInterval(targetNode, observer);
  }
}

const mutationObserver = new MutationObserver(handleMutations);
mutationObserver.observe(document.body, { childList: true, subtree: true });

```

  

Try it out and let me know how it worked 🙂

---

<div class="post-metadata">

**Author:** ![backhome84](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/backhome84/32/49202_2.png) [@backhome84](https://community.elfsight.com/u/backhome84)\
**Post date:** [December 19, 2024, 3:11pm UTC](https://community.elfsight.com/t/add-new-frequency/90024/12 "2024-12-19T15:11:19Z")

</div>

Hello,

it works now the way I expected except once the user complete the registration and go to another page, the form shows up again.

---

<div class="post-metadata">

**Author:** ![backhome84](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/backhome84/32/49202_2.png) [@backhome84](https://community.elfsight.com/u/backhome84)\
**Post date:** [December 19, 2024, 3:41pm UTC](https://community.elfsight.com/t/add-new-frequency/90024/13 "2024-12-19T15:41:01Z")

</div>

can you modify the code so the form does not show up again to the same user on other pages after the registration is complete?

---

<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 19, 2024, 3:46pm UTC](https://community.elfsight.com/t/add-new-frequency/90024/14 "2024-12-19T15:46:57Z")

</div>

I am so sorry about that!

We’ll double-check it with the devs, and I’ll update you tomorrow!

---

<div class="post-metadata">

**Author:** ![backhome84](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/backhome84/32/49202_2.png) [@backhome84](https://community.elfsight.com/u/backhome84)\
**Post date:** [December 20, 2024, 4:05am UTC](https://community.elfsight.com/t/add-new-frequency/90024/15 "2024-12-20T04:05:32Z")

</div>

Hello, I do not know what happened but the popup stopped showing up after clicking on the backdrop again and it does not show up again

---

<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 20, 2024, 1:28pm UTC](https://community.elfsight.com/t/add-new-frequency/90024/16 "2024-12-20T13:28:47Z")

</div>

Hi @backhome84 👋

To fix the issue when the popup appears on another pages after its submission, we’ve replaced the previous code in the Custom JS with this one:

```auto
const KEY = 'elfsight-form-submitted';

widget.form.on('submit', () => {
  window.localStorage.setItem(KEY, 'true');
});

```

  

Additionally, you should add this script next to your widget’s installation code on your website:

```auto
<script>
  (function() {
    const WIDGET_ID = '095f6e1b-ca8c-49c9-9e93-bfbc4a77f7fe';
    const WIDGET_CLASS = `.eapps-popup-${WIDGET_ID}-custom-css-root`;
    const DELAY = 20; // In seconds
    let installTimeout = null;

    const KEY = 'elfsight-form-submitted';

    function stopInterval() {
      if (!installTimeout) {
        return;
      }

      clearInterval(installTimeout);
      installTimeout = null;
    }

    function startInterval(observer) {
      installTimeout = setInterval(() => {
        const isFormSubmitted = window.localStorage.getItem(KEY) === 'true';

        if (isFormSubmitted) {
          stopInterval();
          observer?.disconnect();

          return;
        }

        const target = document.querySelector(WIDGET_CLASS);

        const isPaneOpen = target?.querySelector(
          '[class*="Popup__PopupContainer-sc"]'
        );
        if (isPaneOpen) {
          return;
        }

        const button = target.querySelector(
          '[class*="ButtonBase__ButtonContainer-sc"]'
        );
        button?.click();
      }, DELAY * 1000);
    }

    function handleMutations(mutations, observer) {
      const targetNode = mutations.find(
        ({ target }) =>
          target.id === '__EAAPS_PORTAL' && target.className.includes(WIDGET_ID)
      )?.target;

      if (!targetNode) {
        return;
      }

      const isPaneOpen = targetNode?.querySelector(
        '[class*="Popup__PopupContainer-sc"]'
      );

      if (isPaneOpen) {
        stopInterval();

        return;
      }
      if (!installTimeout) {
        startInterval(observer);
      }
    }

    const mutationObserver = new MutationObserver(handleMutations);
    mutationObserver.observe(document.body, { childList: true, subtree: true });

    function waitForElement(selector, root = document) {
      return new Promise((res) => {
        let i = 0;

        function check() {
          const component = root.querySelector(selector);

          if (component) {
            res(component);
          } else if (i !== 50) {
            setTimeout(check, 100);
            i++;
          }
        }

        check();
      });
    }

    waitForElement(WIDGET_CLASS)
      .then(() => {
        const target = document.querySelector(WIDGET_CLASS);
        handleMutations([{ target }], mutationObserver);
      });
  })();
</script>

```

  

Try it out and let me know if it worked 🙂

---

<div class="post-metadata">

**Author:** ![backhome84](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/backhome84/32/49202_2.png) [@backhome84](https://community.elfsight.com/u/backhome84)\
**Post date:** [December 20, 2024, 3:22pm UTC](https://community.elfsight.com/t/add-new-frequency/90024/17 "2024-12-20T15:22:07Z")

</div>

the form stops from showing up after clicking on the backdrop for the first time. There is still something wrong with the performance

---

<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 20, 2024, 3:33pm UTC](https://community.elfsight.com/t/add-new-frequency/90024/18 "2024-12-20T15:33:54Z")

</div>

Please accept my apologies about that!

Our devs will look into this further, and I’ll update you once I have their response.

---

<div class="post-metadata">

**Author:** ![backhome84](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/backhome84/32/49202_2.png) [@backhome84](https://community.elfsight.com/u/backhome84)\
**Post date:** [December 20, 2024, 10:12pm UTC](https://community.elfsight.com/t/add-new-frequency/90024/19 "2024-12-20T22:12:21Z")

</div>

Hello, the form is performing as expected on my mobile but it does not perform the same on the laptop. Is there a reason for that?

---

<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 23, 2024, 12:53pm UTC](https://community.elfsight.com/t/add-new-frequency/90024/20 "2024-12-23T12:53:23Z")

</div>

Hi @backhome84 👋

Many thanks for this info, I’ve passed it on to the devs!

We continue investigating this issue, and I’ll update you once I receive a response from the devs.

---

<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 23, 2024, 3:15pm UTC](https://community.elfsight.com/t/add-new-frequency/90024/21 "2024-12-23T15:15:04Z")

</div>

Thank you for your patience and understanding!

To make the code work correctly, we’ve disabled all the triggers in the settings:

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/4/e/4e85737fac292aa3b17fa9335476a3370cf69be5.png)

Now, everything seems to be working fine. If the issue still persists on your end, please double-check your website in incognito mode and let me know how it’s working there.

[Next page](https://community.elfsight.com/t/add-new-frequency/90024.md?page=2)