YesGraph’s Javascript invite widget will by default display your users’ contacts immediately after they’re imported.

However, in some cases you may want to display contacts you already have, without your users having to import them again. This is also possible, and here we’ll give an overview on sending contacts to YesGraph for ranking, and retrieving those contacts when you want to display them.

Send Contacts for Ranking

When you get your users’ contacts, you can send them to YesGraph for ranking from your server using our API or our Python SDK, or from the browser using our Javascript SDK.

Authentication: Client Keys

Authentication is simple with our server-side tools; simply include the Secret Key from your YesGraph dashboard with each request. Check out our authentication page for how to do that.

However, you should never put your Secret Key in your client-side Javascript–it’s a huge security risk. Instead, YesGraph supports Client Keys, which you can generate for each user from your server and then safely pass to your Javascript code. This doc describes how to create Client Keys on your server.

Once you have the Client Key, here’s how to use it with the Javascript invite widget:

That’s it! Depending on which features your invite flow has, your code should look more or less like this:

<!-- Include jQuery -->
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<!-- Include YesGraph -->
<script src="https://cdn.yesgraph.com/yesgraph-invites.min.js"></script>

<!-- Add the client key generated on your server to your HTML -->
<span id="yesgraph" class="yesgraph-invites" 
      data-client-key="[CURRENT USER'S CLIENT KEY]"
      data-email-sending=false
      data-invite-link=false
      data-share-btns=false>
</span>
<!-- Include jQuery -->
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<!-- Include YesGraph -->
<script src="//cdn.yesgraph.com/yesgraph-invites.min.js" class="yesgraph-invites"></script>

<!-- Add the client key generated on your server to your Javascript -->
<script>
YesGraphAPI.setOptions({
    auth: {
        clientKey: "[CURRENT USER'S CLIENT KEY]"
    },
    user: {
        email: "some@email.com",
        referral_code: 1234
    },
    settings: {
        contactImporting: false,
        emailSending: false,
        inviteLink: false,
        shareBtns: false
    }
});
</script>

Fetch & Show Ranked Contacts

Once you’ve sent contacts to YesGraph for ranking, it’s easy to retrieve & display them with our Javascript tools.

When it’s time to fetch the contacts, you can show a loading spinner by calling this function:

YesGraphAPI.Superwidget.modal.loading();

Then fetch the ranked contacts from YesGraph, and display them!

YesGraphAPI.getRankedContacts()
    .done(function(response) {
        // Show the ranked contacts
        var contacts = response.data;
        YesGraphAPI.Superwidget.modal.loadContacts(contacts);
    })
    .fail(function(error) {
        // Log the error message to the console
        console.log(error.error);
    });