Adding the DataVault Connect button using a <script> tag

The easiest way to add the DataVault Connect button to your site is to include some provided JavaScript from our site (via a <script> tag) on an html page and include a div with a particular id in that page. The script will take care of building the authorization url and correctly adding the button with correct styling and attributes.

Step 1. In the <head> section of your html page, add the following <script> tag:

<script src="https://source.tartle.co/scripts/datavault-connect.js"></script>

Step 2. In that same page, anywhere you want it in the body, add this div:

<div
  id="tartle-datavault-button"
  data-client-id="your-client-id"
  data-redirect-uri="your-redirect-uri"
></div>

That's it! The script will do the following:

  • Generate the code verifier and state attributes and use them alongside the given data attributes to build the authorization url.
  • Save the code verifier and state in a secure cookie that you can then read in your backend implementation of the redirect uri for verification.*
  • Inject the authorization link html and css inside the div and style it correctly. (the button is a styled div).

Note: The code verifier should ideally be saved in an http only cookie by the server. This is why this script should only be used in environments where a doing so is not possible.

After adding the button to your site you're ready to handle the redirect.

Was this page helpful?