If you already have an invite flow and want to add only YesGraph’s contact importer, the Superwidget can do that too:

From your YesGraph Integration dashboard, scroll down to the “Advanced Web Tools & Customization” section. Click “Add features to the invite flow”, deselect all optional features, and click “Update”.

Now when you load the Superwidget, you should see only the contact importing buttons. When your users click these buttons, they’ll be able to import and view their contacts. You can access the resulting data at three points:

  • When authentication succeeds or fails
  • When the contacts are imported (after successful authentication)
  • When the user clicks to invite specific contacts

All of this can be done with only 2 minutes of coding, using jQuery event listeners.

Using jQuery

The YesGraph Superwidget depends on jQuery. To access the user’s contacts from your code, you should include jQuery explicitly, as shown in the example below. This will ensure that jQuery loads before your event handlers run.

<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://cdn.yesgraph.com/yesgraph-invites.min.js"></script>
<span id="yesgraph" class="yesgraph-invites" data-app="YOUR_APP_ID"
      data-email-sending=false data-invite-link=false data-share-btns=false>

$(document).on("completed.yesgraph.oauth", function(evt, service, error){
    var message;
    if (error) {
        alert(service + " authorization failed");
    } else {
        alert(service + " authorization succeeded");

$(document).on("imported.yesgraph.contacts", function(evt, source, contacts){
    // Do something with the imported contacts
    var message = "Imported " + meta.total_count + " contacts for " + src.email;

$(document).on("set.yesgraph.recipients", function(evt, recipients){
    // Do something with to the chosen recipients
    var message = "Added " + recipients.length + " friends."

That’s it! Your contact importer is fully functional now.