Blog Email Newsletter Popup

Description

• show an email newsletter popup when accessing blog, users need to enter email to see blog content
• buy me a coffee

Note

• You need to use custom plugin to achieve this
• You can message me if you need to install it on your site

#1. Install Code

#1.1. First you need to install custom popup plugin

Plugin will give you some code to add to Code Injection Header & Footer.

You can also message me, I can install free version for you.

#1.2. Add a Page in Not Linked

With Name/URL

• Name: Email Popup Content
• URL: /email-popup-content

#1.3. Add custom text, newsletter block to Email Popup Content page

#1.4. Click Gear icon on Blog Page

Click Advanced > Post Blog Item Code Injection

Paste this code

<style>
.wm-popup-overlay:before {
    opacity: 1 !important;
}
</style>
<script>
  window.wmPopupSettings = {
    hooks: {
      afterInit: [
        function() {
          const instance = this;
          if (instance.closeButton) {
            instance.closeButton.style.display = 'none';
          }
          if (localStorage.getItem('emailPopupSubmitted') === 'true') return;

          setTimeout(() => {
            instance.openPopup('/email-popup-content');
            const observerInterval = setInterval(() => {
              const thankYouEl = document.querySelector(
                '.wm-popup-content .form-submission-text:not(.hidden)'
              );
              if (thankYouEl) {
                clearInterval(observerInterval);
                localStorage.setItem('emailPopupSubmitted', 'true');
                setTimeout(() => {
                  instance.closeButton.style.display = '';
                  instance.closePopup();
                  instance.closeButton.style.display = 'none';
                }, 1500);
              }
            }, 300);

          }, 500);
        }
      ]
    }
  };
</script>