Basic Installation

Once you’ve created a CloudSponge account, you’ll get your own Address Book Widget Snippet that you can add to any page to include our widget there. The snippet is a very basic example of using our widget on a page. There are three things that any address book widget integration must do:

  1. include your address book widget javascript,
  2. provide a way for the end user to launch the widget and,
  3. do something with the user’s contacts.

1. Add your address book widget script

Your CloudSponge key is the name of your own custom widget script. Add this script to the page that you would like to use the address book widget on.

<script src="https://api.cloudsponge.com/widget/YOUR_WIDGET_KEY.js"></script>

You can add the script in the head or in the body of the page.

2. Launch the Widget:

Launch the widget and let users pick a source from our UI:

<a class="cloudsponge-launch">Add From Address Book</a>

Or display your own “deep links” to launch directly to a specific address book:

<a class="cloudsponge-launch" data-cloudsponge-source="gmail">Gmail</a>

Read more about our linking options here.

3. Get the Contacts

After users pick their contacts, they will be populated inside an HTML element.

<input type="textarea" class="cloudsponge-contacts"/>

This is the pattern you’ll follow to get started with CloudSponge. You need to sign in to get your own Address Book Widget Script:

Internet Explorer Caveat

Please be aware of IE’s Protected Mode settings. Your test page and api.cloudsponge.com both need to be in zones with the same Protected Mode setting. Usually, api.cloudsponge.com is in the Internet Zone, and your localhost is in the Local internet Zone.

Our recommendation is to enable Protected Mode for both the Internet Zone and the zone that your test page is in. This ensures that your local environment behaves the same as in production.

This is not an issue in production since both sites are in the same IE zone and will be treated with the same Protected Mode.