Do not load a JavaScript tag until you click on a button

Question

I have a third party javascript code that should not load when the page is loaded.

So when you click on the "Request more info", only at that time it should load.

I tried with show/hide but seems the script still loads when I refresh the page.

My HTML is here

 <button onclick="PodiumWebChat.open()">
  Open chat

And Javascript is:

<div id="divscript" style="display: none;"><script defer src="https://connect.abc.com/widget.js#API_TOKEN=c0726ce52f4a" id="podium-widget" data-api-token="c0726ce52f4a"></script></div>

Have you tried adding the script tag to document.body as part of the onClick of #button? — cheft, Aug 02 '21 at 20:27
Does this answer your question? [Load javascript file after button click](https://stackoverflow.com/questions/13993748/load-javascript-file-after-button-click) — Nico Haase, Aug 02 '21 at 20:33
Or this? https://stackoverflow.com/questions/19149934/how-to-load-an-external-javascript-file-during-an-onclick-event — Nico Haase, Aug 02 '21 at 20:34
@NicoHaase tried but get getscript() function allows to get a JS file, which I do not have control of — user580950, Aug 02 '21 at 20:40
append the script to the page, hopefully it does not use document.write — epascarello, Aug 02 '21 at 20:42
@epascarello I am not sure I understand your comments, can you elaborate? — user580950, Aug 02 '21 at 20:44
What do you mean by "tried"? Please add all attempts to your question by editing it, along with a clear description of which parts are not working as expected — Nico Haase, Aug 02 '21 at 20:44
https://stackoverflow.com/questions/13121948/dynamically-add-script-tag-with-src-that-may-include-document-write/27468484 append it... it mght not work depending on what the script has in it. — epascarello, Aug 02 '21 at 20:47

score 0 · Answer 1 · answered Aug 02 '21 at 21:08

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>

<input type="button" id="RequestADemo" onClick="$('#default').click()" value="Request A Demo" />
<div id="test"></div>
<script type="text/javascript">

$(document).ready(function(){
  // this code will run when the document has loaded
  // and all elements are in place

  $("#RequestADemo").click(function(){
    // this code will be run when the user clicks on
    // the button we created above

    $('#default').click(); // this calls the click event on #default

    //alert('Finished'); // now it is finished
        var tag = '<script defer src="https://connect.abc.com/widget.js#API_TOKEN=c0726ce52f4a" id="podium-widget" data-api-token="c0726ce52f4a"><\/script>';
       $('#test').append(tag); //testing

  }); // close the click handler on #RequestADemo

}); // close the document.ready code block.

</script>

Do not load a JavaScript tag until you click on a button

1 Answers1