Conversation

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 your AMP page, add the .spot-im-amp-overflow class definition to the <script amp-custom> tag.

<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;
    }
</style>

Add the following code in the location where the Conversation module should appear.

<amp-iframe 
    width="375" 
    height="815" 
    resizable 
    sandbox="allow-scripts allow-same-origin allow-popups allow-top-navigation" 
    layout="responsive" 
    frameborder="0" src="https://amp.spot.im/production.html?spot_im_highlight_immediate=true&redirect=true&spotId=SPOT_ID&postId=POST_ID">
    <amp-img placeholder height="815" 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