Trying to include a mailerlite popup in a client's next.js project has been quite challenging for me. I am struggling to convert the JavaScript snippets into jsx in order to make the popups work smoothly. Everything seems to function properly on initial load, but upon reload, I am encountering an error message:
window is not defined
The issue arises during DOM manipulation, and it appears that I require the window object based on the code provided in the snippet.
To integrate this Javascript snippet onto every page of your website just before the closing tag, you only need to add it once, even if you have multiple webforms:
<!-- MailerLite Universal -->
<script>
(function(m,a,i,l,e,r){ m['MailerLiteObject']=e;function f(){
var c={ a:arguments,q:[]};var r=this.push(c);return "number"!=typeof r?r:f.bind(c.q);}
f.q=f.q||[];m[e]=m[e]||f.bind(f.q);m[e].q=m[e].q||f.q;r=a.createElement(i);
var _=a.getElementsByTagName(i)[0];r.async=1;r.src=l+'?v'+(~~(new Date().getTime()/1000000));
_.parentNode.insertBefore(r,_);})(window, document, 'script', 'https://static.mailerlite.com/js/universal.js', 'ml');
var ml_account = ml('accounts', '912433', 'd5p1f7l9g0', 'load');
</script>
<!-- End MailerLite Universal -->
I have added this code to my Layout wrapper. While it functions correctly on first load, the aforementioned error pops up as soon as the user navigates to a new page.
PS I came across an old question related to this topic here, but it does not fully align with my current situation. I am looking to find a way to adapt the above snippet for use with nextjs. Any assistance would be greatly appreciated.