How to show popup on AMP page after setTimeout

Question

I'm trying to make the popup appear on the AMP page after a certain amount of time has elapsed, but getting the error in the console — [amp-script] Blocked 1 attempts to modify DOM element attributes or styles. For variable-sized <amp-script> containers, a user action has to happen first.. But I need to show popup without any actions on the page from user. Any Ideas of how can I do this?

  <style amp-custom>
    .ampPopup {
      display: none;
    }

    .ampPopup.open {
      display: block;
    }
  </style>
  
  <amp-script layout='container' script='time-script' className='sample'>
    <section className='ampPopup'>
      <h1>Popup</h1>
    </section>

    <p>...</p>
    <p>...</p>
    <p>...</p>
  </amp-script>

  <script id='time-script' type='text/plain' target='amp-script'>
    const el = document.querySelector('.ampPopup');
    const elClose = document.querySelector('.ampPopupClose');

    setTimeout(() => {
      el.classList.add('open');

      elClose.addEventListener('click', function() {
        el.classList.remove('open');
      });
    }, 3000);
  </script>

I am using amp-script here, but maybe it's not the optimal way.

Answer 1

I found that solution that solve that do the trick — sandbox

That solution is using amp-user-notification