We can delay loading the widget by loading the Javascript snippet only when it’s needed.In this example, we only load the widget after the user has clicked the link.

Show Code

<script
  src="https://code.jquery.com/jquery-3.2.1.js"
  integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
  crossorigin="anonymous"></script>

<!-- replace 'localhost-only' with your key if you want to run this outside of your localhost environment -->
<script>
$(function() {
  // wait for the user to click on the interface
  $('.load-cloudsponge').click(function() {
    // show a temporary loading message while the widget loads
    $('.load-cloudsponge').addClass('hide');
    $('.cloudsponge-loading').removeClass('hide');
    $.get("https://api.cloudsponge.com/widget/localhost-only.js", function() {
      // the cloudsponge code has loaded so we can initialize it
      cloudsponge.init({
        afterInit: function() {
          // now that the widget has finished initializing, we can display the link to launch the widget
          $('.cloudsponge-loading').addClass('hide');
          $('.cloudsponge-ready').removeClass('hide');
        }
      });
    }, 'script');
  });
});
</script>

<!-- Step 1, click the link to start loading the widget -->
<div class="load-cloudsponge">
  Click this link to load the widget.<br/>
  <a href="javascript:void(0)" class="">Load CloudSponge</a>
</div>

<!-- Step 2, loading the widget and initializing the widget -->
<div class="cloudsponge-loading hide">Loading...</div>

<!-- Step 3, widget has loaded -->
<div class="cloudsponge-ready hide">
  <!-- Any link with a class="cs_import" will start the import process -->
  <a class="cloudsponge-launch">Add from Address Book</a><br />

  <!-- This textarea will be populated with the contacts returned by CloudSponge -->
  <textarea class="cloudsponge-contacts"
    placeholder="This textarea has class='cloudsponge-contacts to tell our widget that this is where we want the contact to be inserted. It doesn't have to be a textarea, it can be any type of HTML element.'"
    style="width:100%; height:200px;"></textarea>
</div>