Web SDK

Integrating Conscent.ai on your Website is a simple and direct process. You start by copying the code below within the script tags - and adding it to the header section of your Route Index file.

Including this code in the header section allows the Conscent.ai Script to be initialized.

ConsCent Paywall Initalization Script:

<script>
  const clientId = '5f92a62013332e0f667794dc';
  (function (w, d, s, o, f, cid) {
    if (!w[o]) {
      w[o] = function () {
        w[o].q.push(arguments);
      };
      w[o].q = [];
    }
    (js = d.createElement(s)), (fjs = d.getElementsByTagName(s)[0]);
    js.id = o;
    js.src = f;
    js.async = 1;
    js.title = cid;
    fjs.parentNode.insertBefore(js, fjs);
  })(window, document, 'script', '_csc', {SDK_URL}, clientId);
</script>

Ensure you replace the 'clientId' with your actual Client ID retrieved from the Conscent.ai Dashboard and the {SDK_URL} with the SDK URL of an environment you want to use.

In order to ensure that the Conscent.ai Paywall appears on the targeted pages and the deep insights and analytics are collected optimally you need to implement the following function on all the content/article pages.

Initialization of the Paywall

const csc = window._csc;
csc('show');
csc('init', {
  debug: true, // can be set to false to remove sdk non-error log output
  contentId: contentId,
  subscriptionUrl: {clientSubscriptionUrl},
  signInUrl: {clientSignInUrl},
  clientId: clientId,
  title: contentTitle,
  categories: ["category1", "category2,"category3"],
  tags: ["free", "premium", "metered"],
  sections: ["section1", "section2","section3"],
  authorName: "name",
  publicationDate: ISOstring,
  successCallback: yourSuccessCallbackFunction,
  wrappingElementId: 'csc-paywall',
  fullScreenMode: 'false' // if set to true, the entire screen will be covered,
  onPGcrossClick:(data:any)=>{console.log(data)}
})

Using Client Login System:

const csc = window._csc; csc('show');
csc('init', {
debug: true, // can be set to false to remove sdk non-error log output contentId: contentId,
subscriptionUrl: {clientSubscriptionUrl},
signInUrl: {clientSignInUrl},
clientId: clientId,
title: contentTitle,
categories: ["category1", "category2,"category3"],
tags: ["free", "premium", "metered"],
sections: ["section1", "section2","section3"],
authorName: "name",
successCallback: yourSuccessCallbackFunction,
wrappingElementId: 'csc-paywall',
fullScreenMode: 'false' // if set to true, the entire screen will be covered, 
cUID: 'clientUserId',
successCallbackForPaywallClick: yoursuccessCallbackForPaywallClick,
});
const yoursuccessCallbackForPaywallClick = (clickType: any) => { console.log(clickType);
},

We import the initialization script using the unique '_csc' identifier and run the 'init' function by passing a number of parameters

Parameter	Description	Default
contentId	The 'contentId' which should be identical to the Content Id by which the particular content is registered - in the Client CMS. This allows us to identify each piece of unique content for a client.	REQUIRED
clientId	The 'clientId' is retrieved from the Client Integrations Page of the ConsCent Client Dashboard.	REQUIRED
title	The 'title' should be the Content Title by which the particular content is registered within the Client CMS.	REQUIRED
wrappingElementId	'wrappingElementId' is the id of an element (e.g. a div with absolute positioning on your website) within which you want the paywall to be embedded. Your element should have a minimum width of 320 pixels and a minimum height of 550 pixels for the conscent.ai paywall to fit properly.	REQUIRED
subscriptionUrl	The 'subscriptionUrl' is the link to the Subscription page of the client's website - in cases when a user would like to subscribe to the client's website for accessing the content offered.	OPTIONAL
signInUrl	'signInUrl' is the link to the login page for already subscribed users on the client's platform - in cases when a user has already registered and paid for the client's subscription and would like to access content using their login credentials. Doing this will add a "Sign in here" text to be displayed below the "Subscribe" button.	OPTIONAL
fullScreenMode	'fullScreenMode' can be set to 'true' or 'false' (strings) -- if true, the first screen of the paywall will cover the entire webpage. This is useful if you don't want the content page to be visible at all once the user proceeds with the payment.	REQUIRED

Paywall

SuccessCallback Function

async function yourSuccessCallbackFunction(validationObject: any) {
  // Function to show the premium content to the User since they have paid for it via ConsCent
  // Here you should verify the  validationObject with our backend
  // And then you must provide access to the user for the complete content

  // example verification code:
  console.log('Initiating verification with conscent backend');
  const xhttp = new XMLHttpRequest(); // using vanilla javascript to make a post request
  const url = `${API_URL}/content/consumption/${validationObject.consumptionId}`;
  xhttp.open('POST', url, true);
  // e is the response event
  xhttp.onload = (e) => {
    const backendConfirmationData = JSON.parse(e.target.response);

    // verifying that the validation received matches the backend data
    if (
      validationObject.consumptionId === backendConfirmationData.consumptionId &&
      validationObject.payload.clientId === backendConfirmationData.payload.clientId &&
      validationObject.payload.contentId === backendConfirmationData.payload.contentId
    ) {
      // Validation successful
      console.log('successful validation');
      // accessContent would be your function that will do all the actions that need to be done to unlock the entire content
      accessContent(true);
    }
  };
  xhttp.send();
}

You need to implement a 'successCallback' function which will receive a response containing a validationObject shown below - indicating whether the user has purchased the content, or if the user has access to the content already since they have purchased it before, or whether the transaction has failed and the user has not purchased the content.

{ "message": "Content Purchased Successfully", 
"payload": { 
 "clientId": "5fbb40b07dd98b0e89d90a25",
 "contentId": "Client Content Id 5",
 "createdAt": "2020-12-29T05:51:31.116Z" 
 }, 
 "consumptionId": "a0c433af-a413-49e1-9f40-ce1fbd63f568",
 "signature": "74h9xm2479m7x792nxx247998975393x08y9hubrufyfy3348oqpqqpyg78fhfurifr3" 
 }

validationObject Field	Meaning
Content Purchased Successfully	The user has purchased content via Conscent.ai.
accessTimeLeft	The user has purchased the content previously and still has free access to consume the content
consumptionId	To verify each unique transaction by a user on the client's content with Conscent.ai

Please ensure that you call this function on all your content pages so that we can track all the events and provide accurate analytics.