Interactive AMP Implementation

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

📘
TIP
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 replace BACKGROUND_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 ideal POST_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 of window.location.href.

Implementation

📘TIP

📘
TIP