Examples

Delayed Loading

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.

Click this link to load the widget.
Load CloudSponge
Loading…

<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>