How to integrate in a react app page a mailer lite form?

Question

i need to ingrate a form that i've created on mailerlite inside my app but i have no idea how to integrate it.

i see on mailer lite that i have different scripts, what i have to use. i have no idea.

On mailer lite site i see this: in the JS snippets section

You only need to add this snippet once, even if you plan to have multiple forms.

<!-- MailerLite Universal -->
<script>
    (function(w,d,e,u,f,l,n){w[f]=w[f]||function(){(w[f].q=w[f].q||[])
    .push(arguments);},l=d.createElement(e),l.async=1,l.src=u,
    n=d.getElementsByTagName(e)[0],n.parentNode.insertBefore(l,n);})
    (window,document,'script','https://assets.mailerlite.com/js/universal.js','ml');
    ml('account', '6506066');
</script>
<!-- End MailerLite Universal -->

i have my form only in one page of the app: Copy and paste the code provided below, wherever you want the form to appear.

<div class="ml-embedded" data-form="sIV8pP"></div>

in HTML section i see these scripts:

<script>
    function ml_webform_success_8634499() {
      var $ = ml_jQuery || jQuery;
      $('.ml-subscribe-form-8634499 .row-success').show();
      $('.ml-subscribe-form-8634499 .row-form').hide();
    }
      </script>
  
  
      <script src="https://groot.mailerlite.com/js/w/webforms.min.js?v1f25ee4b05f240a833e02c19975534a4" type="text/javascript"></script>
        <script>
            fetch("https://assets.mailerlite.com/jsonp/635145/forms/102381742060572187/takel")
        </script>

the page where there is this form looks like this:

function Newsletter() {

    return (
        <>
            <div className={AppStyle.body}>
                <div className={AppStyle.page}>
                    <div id="mlb2-8634499" className={Style["ml-form-embedContainer ml-subscribe-form ml-subscribe-form-8634499"]}>
                        ...
                </div>
            </div>
        </>
    )
}

export default Newsletter;

can someone give me some advice how to do this?

i've tried to find a solution on internet but i didn't found nothing useful or that it worked for me

Answer 1

I ran into the same issue and thankfully, it's pretty simple.

You'll need to leverage Helmet to embed the snippet (https://www.npmjs.com/package/react-helmet) but once you do that, the key is wrapping the mailerlite snippet in {}'s with a `` inside, like this:

<Helmet>
   <script>
    {`
      (function(w,d,e,u,f,l,n){w[f]=w[f]||function(){(w[f].q=w[f].q||[])
                                    .push(arguments);},l=d.createElement(e),l.async=1,l.src=u,  n=d.getElementsByTagName(e)[0],n.parentNode.insertBefore(l,n);})                                 (window,document,'script','https://assets.mailerlite.com/js/universal.js','ml');
       ml('account', '6506066');
     `}
   </script>
</Helmet>