Interactive AMP Implementation
Add a Conversation that appears on a Google Accelerated Mobile Pages (AMP) page.
OpenWeb's AMP implementation wraps the Conversation with an AMP iframe. When a user taps on the Conversation, a new browser tab opens and displays the standard Conversation interface.
Implementation
To best monetize your content, we strongly suggest working with your OpenWeb PSM to add Popular in the Community or Community Spotlight to your AMP pages.
Use the following steps to add a Conversation:
- From your OpenWeb Admin Dashboard, copy your Spot ID from the URL.
https://admin.spot.im/spot/{SPOT_ID}/...
-
In the
<head>
of an AMP page, add the.spot-im-amp-overflow
class definition to the<script amp-custom>
tag and load amp-iframe script. -
Add the
amp-iframe.openweb-conversation
class definition and specify the page background color. Be sure to replaceBACKGROUND_COLOR
with a background color.
<style amp-custom>
.spot-im-amp-overflow {
background: white;
font-size: 15px;
padding: 15px 0;
text-align: center;
font-family: Helvetica, Arial, sans-serif;
color: #307fe2;
}
amp-iframe.openweb-conversation {
background-color: (BACKGROUND_COLOR);
}
</style>
<script
async
src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"
custom-element="amp-iframe"
></script>
- Add the following code in the location where the Conversation module should appear.
<amp-iframe
class="openweb-conversation"
width="375"
height="650"
sandbox="allow-scripts allow-same-origin allow-popups allow-top-navigation"
layout="responsive"
frameborder="0" src="https://amp.spot.im/interactive-conversation.html?redirect=true&spot_im_highlight_immediate=true&spotId=SPOT_ID&postId=POST_ID&hostUrl=HOST_URL">
<amp-img placeholder height="650" layout="fill" src="//amp.spot.im/loader.png"></amp-img>
<div overflow class="spot-im-amp-overflow" tabindex="0" role="button" aria-label="Read more">
Load more...
</div>
</amp-iframe>
- Replace
SPOT_ID
with your Spot ID. - Replace
POST_ID
with an article identifier that is specific to the article page. The idealPOST_ID
has the following characteristics:
• Aligns with the URL slug (an-article-title) or article ID (14325)
• Is less than 50 characters, ideally 15 characters
• Uses a combination of letters, number, dashes (-), or hyphens (_)
• Does not include special characters - Replace
HOST_URL
with the value ofwindow.location.href
.
Updated 28 days ago