# 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.

<details>

<summary><mark style="color:orange;">Including this code in the header section allows the Conscent.ai Script to be initialized.</mark></summary>

{% code title="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>
```

{% endcode %}

</details>

{% hint style="info" %}
Ensure you replace the 'clientId' with your actual Client ID retrieved from the [Conscent.ai Dashboard](https://stage-client.tsbdev.co/client/dashboard/Documentation) and the {SDK\_URL} with the [SDK URL](https://docs.conscent.ai/version-1.0/broken-reference) of an environment you want to use.
{% endhint %}

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.

<details>

<summary><mark style="color:orange;">Initialization of the Paywall</mark></summary>

```javascript
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:**

```javascript
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);
},
```

</details>

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

<table><thead><tr><th width="225">Parameter</th><th width="319">Description</th><th>Default</th></tr></thead><tbody><tr><td><pre><code>contentId
</code></pre></td><td>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.</td><td>REQUIRED</td></tr><tr><td><pre><code>clientId
</code></pre></td><td>The 'clientId' is retrieved from the <a href="https://client.conscent.in/client/dashboard/Documentation">Client Integrations Page</a> of the ConsCent Client Dashboard.</td><td>REQUIRED</td></tr><tr><td><pre><code>title
</code></pre></td><td>The 'title' should be the Content Title by which the particular content is registered within the Client CMS.</td><td>REQUIRED</td></tr><tr><td><pre><code>wrappingElementId
</code></pre></td><td>'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.</td><td>REQUIRED</td></tr><tr><td><pre><code>subscriptionUrl
</code></pre></td><td>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.</td><td>OPTIONAL</td></tr><tr><td><pre><code>signInUrl
</code></pre></td><td>'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.</td><td>OPTIONAL</td></tr><tr><td><pre><code>fullScreenMode
</code></pre></td><td>'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.</td><td>REQUIRED</td></tr></tbody></table>

<figure><img src="https://380225236-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcoDfVWiJBvgTq8DbifIH%2Fuploads%2FLJ9nF8iK5V8Gpy6ZADm3%2FScreenshot%202023-06-05%20at%2012.06.07%20AM.png?alt=media&#x26;token=b741f192-e5a7-4475-9aa5-0341926d5fd6" alt="" width="563"><figcaption><p>Paywall</p></figcaption></figure>

<details>

<summary><mark style="color:orange;">SuccessCallback Function</mark></summary>

```
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();
}
```

</details>

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      |

*<mark style="color:orange;">Please ensure that you call this function on all your content pages so that we can track all the events and provide accurate analytics.</mark>*