Amp Documentation
Accelerated Mobile Pages (AMP) is an open source project created to improve the performance of web pages for mobile devices.
SANDBOX ENVIRONMENT: TESTING/STAGING ENVIRONMENT
A few points need to be noted:
If the content is opened and a meter banner is visible, the metering iframe gets initialized.
If the paywall needs to be shown, the paywall iframe gets initialized.
Otherwise, the content is opened through amp-access="granted".
<!DOCTYPE html>
<html amp lang="en">
<head>
<meta charset="utf-8" />
<title>Hello, AMPs</title>
<link rel="canonical" href="https://amp.dev/documentation/guides-and-tutorials/start/create/basic_markup/" />
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1" />
<style amp-boilerplate>
body {
-webkit-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
-moz-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
-ms-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
animation: -amp-start 8s steps(1, end) 0s 1 normal both;
}
@-webkit-keyframes -amp-start {
from {
visibility: hidden;
}
to {
visibility: visible;
}
}
@-moz-keyframes -amp-start {
from {
visibility: hidden;
}
to {
visibility: visible;
}
}
@-ms-keyframes -amp-start {
from {
visibility: hidden;
}
to {
visibility: visible;
}
}
@-o-keyframes -amp-start {
from {
visibility: hidden;
}
to {
visibility: visible;
}
}
@keyframes -amp-start {
from {
visibility: hidden;
}
to {
visibility: visible;
}
}
</style>
<noscript>
<style amp-boilerplate>
body {
-webkit-animation: none;
-moz-animation: none;
-ms-animation: none;
animation: none;
}
</style>
</noscript>
<style amp-custom>
h1 {
margin: 0px;
}
.iframe-container-inarticle {
width: 550px;
max-width: 100vw;
height: 520px;
position: absolute;
top: 200px;
text-align: left;
}
</style>
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>
<script async custom-element="amp-access" src="https://cdn.ampproject.org/v0/amp-access-0.1.js"></script>
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>
<script id="amp-access" type="application/json">
{
"authorization": "https://api.conscent.art/api/v1/content/amp?rid=READER_ID&_=RANDOM&clientContentId=QUERY_PARAM(clientContentId)&clientId=QUERY_PARAM(clientId)&categories=QUERY_PARAM(categories)&tags=QUERY_PARAM(tags)§ions=QUERY_PARAM(sections)&authorName=QUERY_PARAM(authorName)&url=SOURCE_URL",
"pingback": "https://pub.com/amp-ping?rid=READER_ID&url=SOURCE_URL",
"authorizationFallbackResponse": {
"granted": true
},
"noPingback": true
}
</script>
</head>
<body>
<div>
<h1 id="hello">Hello AMP page!</h1>
<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.</p>
<!-- if inarticle then wrap inside this <div class="iframe-container-inarticle"></div> -->
<div amp-access="(NOT granted OR meteringActionId) AND isInArticle" amp-access-hide class="inarticle-style">
<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="http://localhost:3008/index.html?rid={{rid}}&clientId={{clientId}}&contentId={{contentId}}&journey={{journey}}&URL={{url}}"
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="(NOT granted OR meteringActionId) AND (NOT isInArticle)" amp-access-hide
style="position: fixed; top: 0px">
<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="http://localhost:3008/index.html?rid={{rid}}&clientId={{clientId}}&contentId={{contentId}}&journey={{journey}}&URL={{url}}"
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>
<!-- Rest of the content here -->
<div style="margin-top: 15px">
<template amp-access-template type="amp-mustache">
<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.Early use Scientists are still debating
when people started wearing clothes.No single estimate is widely accepted.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.
</template>
</div>
</div>
</div>
</body>
</html>Configuration on dashboard
Enter the Standard Pages homepage URL in the Login Settings under the Visualise Section on the Conscent Dashboard.
After entering the URL, call the Auto-Login Code on the same website/page.
Note: Attaching the link to navigate to the script - https://docs.conscent.ai/auto-login
Last updated