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

```

</details>

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

<table><thead><tr><th width="225">Parameter</th><th width="319">Description</th><th>Default</th></tr></thead><tbody><tr><td><pre><code>storyId
</code></pre></td><td>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.</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></tbody></table>

<figure><img src="/files/CKr5LKWFwJGnXBcANFBI" 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>*


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.conscent.ai/version-2.0/web-sdk.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.