WordPress – A mailchimp popup appears during or after a elementor video ends

Totally understand that you’re hunting for the perfect solution to have a Mailchimp popup appear either during your Elementor video or right after it ends. Sometimes it feels like you’re trying to find a needle in a haystack, doesn’t it?

Well, I don’t want to leave you hanging, so here’s a workaround I came up with. It’s a little DIY, so roll up those sleeves!

First off, you’re gonna need to use a bit of JavaScript for this. Don’t worry, it’s not as scary as it sounds!

You’re going to utilize the HTML video tag’s ‘ended’ event. What this does is it triggers as soon as the video ends. Now, if you want the popup during the video, you’ll need to use the ‘timeupdate’ event instead.

Now here’s the part where Mailchimp waltzes in. You’ll need to use the Mailchimp popup embed code and modify it a bit. You know the part that says "document.addEventListener…"? You’re gonna have to replace that with your own function that gets called when the video ‘ended’ or ‘timeupdate’ event happens.

It should look something like this:

  <video id="myVideo" width="320" height="240" controls>
    <source src="movie.mp4" type="video/mp4">
  </video>
  
  <script>
    var vid = document.getElementById("myVideo");
  
    vid.onended = function() {
      // Add your Mailchimp popup code here...
    };
  </script>

In case you want the popup to appear at a specific time, use ‘timeupdate’ event, like this:

  <video id="myVideo" width="320" height="240" controls>
    <source src="movie.mp4" type="video/mp4">
  </video>
  
  <script>
    var vid = document.getElementById("myVideo");
  
    vid.ontimeupdate = function() {
      if(vid.currentTime >= YOUR_DESIRED_TIME) {
        // Add your Mailchimp popup code here...
      }
    };
  </script>

Just remember to replace ‘YOUR_DESIRED_TIME’ with the time you want the popup to appear (in seconds).

So, there you have it! Not exactly a walk in the park, but with a bit of elbow grease, it should work like a charm!