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:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
by 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.
