Consentric API

Using the Authenticated Widget​

Universal Consent & Preference Management... Made simple.

This type of widget runs using access tokens to identify the customer, and to render their existing state to allow edits to be made. This is known as an Authenticated Widget.

Prerequisites

This guide assumes that you already have a Template setup with Consentric and that you already have Citizens onboarded to the platform.

Configuration Requirements

The widget has four parameters, shown below:

Template ID

The Template ID identifies the content of the widget to be rendered. This is configurable within the Consentric Permissions UI. Each template consists of a series of configurable elements:

  • Privacy Policy

  • Permission Statements

  • Permission Options

  • Preferences

  • Text Blocks

 

Widget ID (optional)

A Widget ID is used to apply custom styling to your Widget. Without this ID specified, the Widget will display with the default Consentric Styling.

Container ID (optional)

A Container ID is used to specify which div container the Widget should render in. By default, this value is set to widget-container.

Token

The Token is used to authenticate the Widget against the Platform so permissions and preferences can be submitted for an individual known Citizen. If no token is specified, then no options will be displayed.

This is also true if the token has expired.

How To

1. Login to the Consentric Permissions UI.

When you log into the Consentric UI, assuming you have the correct privileges, in the top right there is a button that allows you to enter the admin UI:

2.  Navigate to the Content Templates page using the navigation bar on the left of the page.

3.  Click into the template that you would like to render in the Widget.

     Click ‘Show Code’ in the Embed Widget box and extract the Template ID from the code.

4.  You will need to programmatically generate a token each time you wish to render a Widget for a customer. This can be done with an API call to the Consentric Platform.

5.   Request an Auth0 JWT – here is an example using cURL (you should convert this into whatever language you are using to render HTML):

curl --request POST \
  --url https://consentric.eu.auth0.com/oauth/token \
  --header 'content-type: application/json' \
  --data '{"client_id":"<YOUR CLIENT ID>","client_secret":"<YOUR CLIENT SECRET>","audience":"https://api.consentric.io","grant_type":"client_credentials"}' 

This should return the following:

{
  "access_token": "<YOUR JWT>",
  "token_type": "Bearer"
} 

6.  You can now make a call to the Consentric Platform using this token to get a Widget Access Token.

curl --request GET
  --url https://api.consentric.io/v1/access-tokens/tokens \
  --header 'content-type: application/json' \
  --header 'authorization: Bearer <TOKEN FROM STEP 5>' \
  --data '{"applicationId": "<YOUR APPLICATION ID>","externalRef":"<YOUR EXTERNAL_REF>"}' 

This should return the following:

{
  "token": "<GENERATED TOKEN>",
  "applicationId": "<YOUR APPLICATION ID>",
  "citizenId": "<CITIZEN ID>",
  "externalRef", "<YOUR EXTERNAL REF">,
  "createdAt": "<ISO 8601 date>",
  "expiryDate": "<ISO 8601 date>"
} 

7.  Embedding the Widget is straight forward. Simply drop the following code into your HTML page in the location you would like the Widget to be rendered in.

You will need the Template ID that you just got in the previous step.

EXAMPLE 1 – TOKEN SPECIFIED IN JAVASCRIPT

{<div id="widget-container"></div>

<script async>
  var widget_config = {
      templateId: "<YOUR TEMPLATE ID>",
      token: "<YOUR TOKEN HERE>"
  };
  (function() {
      var d = document, s = d.createElement('script');
      s.src = 'https://widget.consentric.io/public/init.js';
      s.id = 'init';
      (d.head || d.body).appendChild(s);
  })();
</script> 

EXAMPLE 2 – TOKEN SPECIFIED IN BROWSER URL

<div id="widget-container"></div>

<script async>
  var widget_config = {
      templateId: "<YOUR TEMPLATE ID>",
  };
  (function() {
      var d = document, s = d.createElement('script');
      s.src = 'https://widget.consentric.io/public/init.js';
      s.id = 'init';
      (d.head || d.body).appendChild(s);
  })();
</script> 

8.  You now have a rendered Widget!