Quickstart Guide &mdash; Token of Trust&reg;

Token of Trust has 3 Identity Widgets: the Verified Indicator, the Reputation Summary and the Account Connector. They can be added to an existing website by cutting and pasting the HTML snippets below.

1. Setup the Page

This little snippet of Javascript will automatically find, load and run any Token of Trust widgets on the page. It must appear once on every HTML page that contains one or more of our widgets. Place it right before the closing <head> tag.


    <script>
    (function(d){var b=window,a=document;b.tot=b.tot||function(){(b.tot.q=b.tot.q||[]).push(
    arguments)};var c=a.getElementsByTagName("script")[0];a.getElementById("tot-embed")||(a=a.
    createElement("script"),a.id="tot-embed",a.async=1,a.src=d,c.parentNode.insertBefore(a,c))
    })("https://app.tokenoftrust.com/embed/embed.js");

    tot('setPublicKey', "public_API_KEY");
    </script>

Be sure to replace public_API_KEY above with your application's public API key. If you don't have an API key yet request one now.

A Note about Ajax

If you're injecting HTML into your page dynamically there's an extra step you need to take to tell Token of Trust when you've done that. We encourage you to save AJAX for later and get the basics running first. If you just cannot wait take a look at our Developer Integration Guide for details.

2. Add an 'Account Connector'

The Account Connector allows users to connect, edit and view their Token of Trust account from your community. It should be located on your user's private account management screen (e.g. "My Account" or "Edit Profile").

Paste the following code where you want the widget to appear on the page. Replace secret_KEY with the secret key you were provided.

<div data-tot-widget="accountConnector" data-app-userid="APP_USER_ID"  data-app-user-given-name="USERS_FIRST_NAME" data-tot-secret-key="secret_KEY" ></div>

In a production environment you'll need to replace 'APP_USER_ID' with the id of the user being displayed but if you just want a fast prototype you can leave this alone for now. If you have an app with a dark background you may want to provide a background color for the widgets.

Here's what it looks like. On the top is the widget as it appears before the user connects. The image on the lower left shows the user after they've been online verified and the image on the lower right shows a fully verified user.

Note: During test the top of each widget will display a yellow 'test' banner.

Reload your page to see the 'Not Yet Verified' version of the Account Connector. As you follow the process to connect a user to Token of Trust and get them verified the original view is replaced with an indication of what the user needs to do to get verified or a summary of their verifications much like the Reputation Summary, which is next up!

3. Reputation Summary

The Reputation Summary shows a summary of a user's Token of Trust reputation report. It is usually displayed on the user's public profile within your community so that others can understand what's been verified about this user.

Paste the following code where you want the widget to appear on the page:

<div data-tot-widget="reputationSummary" data-app-userid="APP_USER_ID"> </div>

Here's what it looks like. On the top is the widget before verification and on the bottom after online verification:

Reloading the page should render the Reputation Summary on users' public profiles. Note: that until you're dynamically populating the 'APP_USER_ID' all profiles will show the same state for this widget.

4. Verified Indicator

The Verified Indicator widget is generally used in lists of users or items and displays when the connected user has been verified by Token of Trust.

Paste the following code where you want the widget to appear on the page:


    <div data-tot-widget="verifiedIndicator" data-app-userid="APP_USER_ID"></div>

Here's what it looks like. If the user's account is NOT verified or connected this html element will be hidden:

At this point you should be able to see the Verified Indicator for any users' that are verified with Token of Trust. Note that until you're dynamically populating the 'APP_USER_ID' all profiles will show the same state for this widget.

6. Getting Ready for Production

You're almost there! Now lets get rid of those ugly 'Test' banners on the widgets.

The code above helped you get going quickly by allowing you to Add an 'Account Connector' without an access token. In a real production environment you'll need to follow the complete instructions from our Developer Integration Guide to Create an Access Token on the server side and use it as described in the Account Connector.