In our Basic Installation, we demonstrate putting a simple “Add from Address Book” hyperlink on your page that will open your Contact Picker, displaying a menu of available contact sources.

If you’d like to skip the menu (and eliminate one click for your users) you can use Deep Links instead:

<!DOCTYPE html>
<html>
<head>
<!--
Include the script anywhere on your page, usually in the head
(don't forget to replace `localhost-only` with your own CloudSponge Widget Key)
-->
<script src="https://api.cloudsponge.com/widget/localhost-only.js"></script>
</head>
<body>
Add from...<br />
<a class="cloudsponge-launch" data-cloudsponge-source="gmail">Sign in with Google</a><br />
<a class="cloudsponge-launch" data-cloudsponge-source="yahoo">Yahoo</a><br />
<a class="cloudsponge-launch" data-cloudsponge-source="windowslive">Outlook.com</a><br />
<a class="cloudsponge-launch" data-cloudsponge-source="aol">AOL</a><br />
</body>
</html>
<textarea class="cloudsponge-contacts"></textarea>
</body>
</html>
view raw deep.html hosted with ❤ by GitHub

The hyperlinks in the code sample above are basic text; since you are adding this code, you can add CSS styling and images to suit your site.

You can find several file formats for the icons we’re using plus a couple more styles on IconFinder.