Once you’ve created a CloudSponge account, you’ll get your own Snippet that you can add to any page to include our Contact Picker there. The snippet is a very basic example of using our contact picker on a page. There are three things that any Contact Picker integration must do:
- include your contact picker javascript,
- provide a way for the end user to launch the contact picker and,
- do something with the user’s contacts.
1. Add your contact picker script
Pro tip: your Contact Picker is totally customizable. Explore a few of the ways you can tailor it here.
Your CloudSponge key is the name of your own custom contact picker script. Add this script to the page that you would like to use the contact picker on.
You can add the script in the head or in the body of the page.
2. Launch the Contact Picker:
Launch the contact picker and let users pick a source from our UI:
<a href="#" class="cloudsponge-launch">Pick Contacts</a>
Or display your own “deep links” to launch directly to a specific address book:
<a class="cloudsponge-launch" data-cloudsponge-source="gmail">Google Contacts</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 Contact Picker 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.