Conversation

Conversation enables you to create a fluent conversation experience that fuels quality interactions with community and content and allows users to create valuable and engaging content:

Convert casual visitors into loyal, registered readers
Significantly increase the user time-on-site
Provide lightweight, fully customizable features
Increase pageviews and SEO rankings
Enable automatic content moderation
Encourage user engagement with your content and other users

Social Reviews

When implementing Conversation, you can also enable Social Reviews.

Social Reviews enables you to create a fluent conversation experience with a star rating aspect that fuels quality interactions with the community and content and allows users to provide their own feedback and ratings of the content.

Implementation Options

OpenWeb provides you several approaches to add a Conversation to your site. Each is listed in the following table.

Approach	Description
Standard	Enables adding a Conversation when a page loads
Custom Location	Enables choosing a location and adding to an infinite scrolling page or single-page application
Action-Initiated	Allows creating custom interactions
AMP	Enables adding a Conversation for only AMP pages
React	Facilitates adding a Conversation to a React single-page application

OpenWeb also enables you to add a Conversation on the following platforms:

Android
iOS

Standard

When using this implementation method, Conversation appears where the launcher code is located. This method enables you to quickly add a Conversation when a page loads:

Embedding the Conversation with a single code snippet
Managing settings in the Admin Panel

📘
The Conversation has a 100% width. On a desktop, the left and right margins are 6px. On mobile web, left and right margins are 12px.
The minimum supported Conversation width is 320px.

To add Conversation, use the following steps:

Add the launcher code to the <body> of a page. The code should be placed in the location where the Conversation should appear.

<script 
    async 
    src="https://launcher.spot.im/spot/SPOT_ID"
    data-spotim-module="spotim-launcher"
    data-post-url="ARTICLE_URL"
    data-article-tags="ARTICLE_TOPIC1, ARTICLE_TOPIC2"    
    data-post-id="POST_ID">
</script>

Replace the SPOT_ID placeholder.
Define the data-post-url to set the full URL address of the page in which the launcher code is embedded.
Define the data-article-tags to inform OpenWeb of the main topics in the article.
Define the data-post-id to set the unique article identifier that is specific to the article page.
(Optional) Define the data-social-reviews to add a star rating to the Conversation.
(Optional) Customize the Conversation with additional attributes.

Custom Location

This implementation method gives you the most flexibility:

Enabling you to choose the location -- independent of the launcher code -- in which Conversation appears on a single page
Allowing you to embed Conversation in an infinite scroll page and single-page application.

Add the launcher

Use the following steps to add the launcher:

Add the launcher code to the <body> of a page.

<script 
    async 
    src="https://launcher.spot.im/spot/SPOT_ID"
    data-spotim-module="spotim-launcher">
</script>

Replace the SPOT_ID placeholder.

Add the Conversation

Use the following steps to add a Conversation:

In the location where the Conversation should appear, add the Conversation <div> container.

If you have several articles on your infinite scroll page or single-page application, add a Conversation <div> container to each article. Each instance of the following <div> code causes a new Conversation to appear.

<div data-spotim-module="conversation" data-post-url="ARTICLE_URL" data-article-tags="ARTICLE_TOPIC1, ARTICLE_TOPIC2" data-post-id="POST_ID"></div>

Define the data-post-url to set the full URL address of the page in which the launcher code is embedded.
Define the data-article-tags to inform OpenWeb of the main topics in the article.
Define the data-post-id to set the unique article identifier that is specific to the article page.
(Optional) Define the data-social-reviews to add a star rating to the Conversation.
(Optional) Customize the Conversation with additional attributes.

📘
If you need to wrap a Conversation within a feed or a continuous element, use the [data-spotim-default-areas] selector in order to wrap the Conversation.

Example full code

<!-- OpenWeb launcher code -->
<script 
    async 
    src="https://launcher.spot.im/spot/SPOT_ID"
    data-spotim-module="spotim-launcher">
</script>

...

<!-- Conversation -->
<div data-spotim-module="conversation" data-post-url="ARTICLE_URL" data-article-tags="ARTICLE_TOPIC1, ARTICLE_TOPIC2" data-post-id="POST_ID"></div>

Action-initiated

This implementation method allows you to create custom interactions:

Creating custom user experiences
Integrating a Conversation with existing on-page functionality

Add the launcher

Use the following steps to add the launcher:

Add the launcher code to the <body> of a page to load the library for Conversation. The code should be placed before a user action or button.

<script 
    async 
    src="https://launcher.spot.im/spot/SPOT_ID"
    data-spotim-module="spotim-launcher"
    data-spotim-autorun="false">
</script>

Replace the SPOT_ID placeholder.

Add the Conversation

Use the following steps to add a Conversation:

After the user-initiated action, add the Conversation container in the location where the Conversation should appear. Be sure to use the same POST_ID that is in the launcher code.

Since the data-spotim-autorun attribute in the launcher code prevented Conversation from appearing, a Conversation <div> must be added to the page to launch the Conversation.

<div data-spotim-module="conversation" 
    data-post-url="ARTICLE_URL"
    data-article-tags="ARTICLE_TOPIC1, ARTICLE_TOPIC2"    
    data-post-id="POST_ID">
</div>

Define the data-post-url to set the full URL address of the page in which the launcher code is embedded.
Define the data-article-tags to inform OpenWeb of the main topics in the article.
Define the data-post-id to set the unique article identifier that is specific to the article page.
(Optional) Define the data-social-reviews to add a star rating to the Conversation.
(Optional) Customize the Conversation with additional attributes.

Example full code

<!-- OpenWeb launcher code -->
<script 
    async 
    src="https://launcher.spot.im/spot/SPOT_ID"
    data-spotim-module="spotim-launcher"
    data-spotim-autorun="false">
</script>

<!-- Button code or user action -->
...

<!-- Conversation widget -->
<div data-spotim-module="conversation"
    data-post-id="POST_ID"
    data-post-url="ARTICLE_URL"
    data-article-tags="ARTICLE_TOPIC1, ARTICLE_TOPIC2">
</div>

AMP

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 the SPOT_ID placeholder.
Define the data-post-id to set the unique article identifier that is specific to the article page.

React

This implementation method allows you to add a Conversation to a React single-page application. The OpenWeb React SDK npm repository explains how to use the npm package:

Installing the npm package
Adding a Conversation to a single-page application