I'm trying to add an html code snippet to my nextjs project. The code snippet contains external script which has a createButton function.

<div id="examplebtn"></div>
  <script type="text/javascript">
    //<![CDATA[
    document.addEventListener('DOMContentLoaded', function () {
      createButton('Name', 'Phone');
    });
    //]]>
  </script>
  <script src="https://example.com.na/js/example.js"></script>

The createButton function renders a button identified by the id (examplebtn in this case) and in a native html document it works fine. However, in nextjs I am unable to add an event listener to the DOMContentLoaded event as is shown in the script, for it to run the function once the DOM has been loaded. I have tried using Next/Script, useEffect hooks, native html tags all to no avail. How can I add the DOMContentLoaded event listener to the jsx component before the document is completely loaded so the function can run at the appropriate time? Thank you in advance for your kind assistance.

{EDIT} I'm adding the final code of createButton for more clarity. It's been edited as I can't release the code due to contractual obligations, however it should prove helpful.

window
  .ButtonComponent({
    params,
    onPay: function (v, vn, a, r, e) {
      c = customFunct(moreParams);
      PopupComponent({
        params,
        onCancel: function () {
          console.log('called onCancel');
          // stuff here
        },
        onSubmit: function (r) {
          // stuff here
        },
      }).render('body');
    },
  })
  .render('#examplebtn');