Conscent.ai Developer Documentation
  • Version 2.0
    • Using Conscent.ai
    • Web SDK
    • Login
    • Logout
    • User Details Drawer
    • Google One Tap
    • Mobile SDK
      • iOS(Swift)
        • In-App Purchases with Conscent
      • Android SDK
      • React Native SDK
      • Google In-App Purchases with Conscent
      • Apple In-App Purchases with Conscent
    • Facebook SSO Integration Guide
    • Landing Page API v 2.0
    • AMP Integration
    • Integrating APIs(v2)
      • Purchase Details
      • User Registered Or Not
      • User Registrations
      • Subscription Plans Details
      • Get User Details
      • Add Subscription If User Registered
      • Update UserDetails
      • Update SubscriptionDetails
      • Get All Transaction Details
    • IAM System API Documentation
  • Version 1.0
    • Getting Started
    • On Board
    • Using Conscent.ai
    • Authentication
    • Web SDK
    • Login
    • Logout
    • Amp Documentation
    • Mobile SDK
      • Android
      • Flutter
      • iOS(Swift)
      • React Native SDK
    • Auto Login
    • Creating External Purchases
    • Landing Page API
  • Login Screen Customization
  • Integrating Client Payment Gateway
  • Integrating with APIs
    • User Details and Subscriptions Information
    • Purchased Subscriptions
    • User and Purchase Details
    • Client Purchases
    • Client Micropayments
    • Client Passes
    • Cancel Active Subscriptions
    • Delete User
  • Events API Docs
    • Different Types of Events
    • SSO Login Flow
  • Discount Coupon
    • Dynamic Coupon API Generation:
  • New Webhooks
    • Meter Banner Webhook
    • Paywall Webhook
    • SignUp Webhook
    • Refund Webhook
    • Purchase Webhook
    • Subscription Landing Page Webhook
    • Popup Webhook
    • User Update Webhook
    • Payment Gateway Webhook
    • Review Page Webhook
    • Transaction Webhook
    • Login Webhook
    • Cancel Subscription Webhook
  • Old Webhooks
    • Sign Up Webhook
    • Login Webhook
    • Subscription Payment Webhook
    • Subscription Cancelled Webhook
    • Pass Payment Webhook
    • Subscription Bundle Payment Webhook
    • Review Subscription Webhook
    • Micro Payment Webhook
    • How to validate Webhooks?
  • Registering The Content
    • Create Content
    • Edit Content
    • View Content
  • Country Code List
  • Supported Currencies and Payment Gateways
    • Stripe Supported Country with Currency
    • Razorpay Supported Country with Currency
    • Paypal Supported Country with Currency
  • Errors
  • Loyalty System
    • Web SDK
    • iOS SDK
    • Android SDK
    • Flutter SDK
    • API from server
Powered by GitBook
On this page
  1. Version 2.0

Web SDK

PreviousUsing Conscent.aiNextLogin

Last updated 3 months ago

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 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', {
 storyId: contentId,
 clientId: clientId,
 title: contentTitle,
 categories: ["category1", "category2,"category3"],
 tags: ["free", "premium", "metered"],
 sections: ["section1", "section2","section3"],
 authorName: "name",
 publicationDate: ISOstring,
 successCallback: yourSuccessCallbackFunction,
 wrappingElementId: 'paywalls-container',
})

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

Parameter
Description
Default

The 'storyId' which should be identical to the Story 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

REQUIRED

The 'title' should be the Content Title by which the particular content is registered within the Client CMS.

REQUIRED

'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

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

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.

The 'clientId' is retrieved from the of the ConsCent Client Dashboard.

storyId
clientId
title
wrappingElementId
subscriptionUrl
Client Integrations Page
Conscent.ai Dashboard
Paywall