# AMP Integration

This code snippet is designed to work within an AMP HTML document. The code integrates various AMP-specific components and functionality, particularly focusing on content access and subscription management.

#### SANDBOX ENVIRONMENT: TESTING/STAGING ENVIRONMENT&#x20;

| API\_URL                                 | IFRAME\_URL                              |
| ---------------------------------------- | ---------------------------------------- |
| <https://sandbox-api.conscent.in/api/v2> | <https://v2-amp-sdk-sandbox.netlify.app> |

```javascript
<!DOCTYPE html>
<html amp lang="en">
  <head>
    <!-- If not Included -->
    <script
      async
      custom-element="amp-analytics"
      src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"
    ></script>

    <script id="amp-access" type="application/json">
      {
        "authorization": "{API_URL}/content/amp?rid=READER_ID&_=RANDOM&useRid=false&externalUserId={{userID}}&clientContentId=QUERY_PARAM(clientContentId)&clientId=QUERY_PARAM(clientId)&categories=QUERY_PARAM(categories)&tags=QUERY_PARAM(tags)&sections=QUERY_PARAM(sections)&authorName=QUERY_PARAM(authorName)&url=SOURCE_URL&title=QUERY_PARAM(title)",
        "pingback": "https://pub.com/amp-ping?rid=READER_ID&url=SOURCE_URL",
        "authorizationFallbackResponse": {
          "granted": true
        },
        "noPingback": true
      }
    </script>
  </head>

  <body>
  //added logout btn
     <div amp-access="logoutRedirectUrl" amp-access-hide>
          <div class="logout-container">
            <template amp-access-template type="amp-mustache">
              <button class="logout-button" id="logoutButtonConscent" on="tap:AMP.navigateTo(url='{{logoutRedirectUrl}}'),trackClick">Logout</button>
              </template>
          </div>
      </div>
      <div amp-access="NOT granted" amp-access-hide>
        <template amp-access-template type="amp-mustache">
          <amp-iframe
            id="conscentIframe"
            style="position: absolute; top: 0px; width: 100vw; height: 100vh"
            allowfullscreen
            width="100vh"
            height="50vh"
            src="{IFRAME_URL}/static/index.html?rid={{rid}}&clientId={{clientId}}&contentId={{contentId}}&journey={{journey}}&URL={{loginRedirectUrl}}&userId={{userId}}"
            layout="responsive"
            resizable
            id="myAmpIframe"
            sandbox="allow-scripts allow-same-origin allow-popups allow-forms allow-top-navigation allow-modals allow-popups-to-escape-sandbox allow-top-navigation-by-user-activation"
          >
            <div
              style="
                position: absolute;
                top: 50%;
                left: 43%;
                display: flex;
                justify-content: center;
                align-items: center;
              "
              placeholder
            >
              <amp-img
                src="https://storage.googleapis.com/bkt-conscent-public-stage/808.gif"
                placeholder
                layout="fixed"
                width="140px"
                height="20px"
              ></amp-img>
            </div>
            <div overflow="">Read more!</div>
          </amp-iframe>
        </template>
      </div>

      <div amp-access="granted" amp-access-hide>
        <p>
          Early use Scientists are still debating when people started wearing
          clothes.
        </p>
        <template amp-access-template type="amp-mustache">
          <amp-iframe
            id="conscentIframe"
            style="position: absolute; top: 0px; width: 100vw; height: 100vh"
            allowfullscreen
            width="100vh"
            height="50vh"
             src="{IFRAME_URL}/static/index.html?rid={{rid}}&clientId={{clientId}}&contentId={{contentId}}&journey={{journey}}&URL={{loginRedirectUrl}}&userId={{userId}}"
            layout="responsive"
            resizable
            id="myAmpIframe"
            sandbox="allow-scripts allow-same-origin allow-popups allow-forms allow-top-navigation allow-modals allow-popups-to-escape-sandbox allow-top-navigation-by-user-activation"
          >
            <div
              style="
                position: absolute;
                top: 50%;
                left: 43%;
                display: flex;
                justify-content: center;
                align-items: center;
              "
              placeholder
            >
              <amp-img
                src="https://storage.googleapis.com/bkt-conscent-public-stage/808.gif"
                placeholder
                layout="fixed"
                width="140px"
                height="20px"
              ></amp-img>
            </div>
            <div overflow="">Read more!</div>
          </amp-iframe>
        </template>
        <!-- Rest of the content here -->
        <div style="margin-top: 15px">
          <template amp-access-template type="amp-mustache">
            <div style="color: orange; font-size: 24px">
              -------Content Purchased------------
            </div>
            <p>Dynamic content: {{{cscContent}}}</p>
            Early use Scientists are still debating when people started wearing
            clothes. Estimates by various experts have ranged from 40,000 to 3
            million years ago. Some more recent studies involving the evolution
            of body lice have implied a more recent development with some
            indicating a development of around 170,000 years ago and others
            indicating as little as 40,000. No single estimate is widely
            accepted.
          </template>
        </div>
      </div>
  </body>
</html>
```


---

# 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/amp-integration.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.
