Conversation
Create an engaging social experience through 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

Conversation
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.

Social Reviews
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 |
Action-initiated | Allows creating custom interactions |
Virtual Pages | Enables choosing a location and adding to an infinite scrolling page or single-page application |
AMP | Enables adding a Conversation for only AMP pages |
React | Facilitates adding a Conversation to a React single-page application |
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.
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
To add Conversation, use the following steps:
- Add the launcher code to the
<body>
of a page. - (Optional) Define the
data-social-reviews
to add a star rating to the Conversation. - (Optional) Customize the Conversation with additional attributes.
- (Optional) In the location where the Conversation should appear, add the Conversation positioning
<div>
container. By default, the Conversation appears where the Launcher script is located.
<div data-spotim-module="conversation"></div>
Action-initiated
This implementation method allows you to create custom interactions:
- Creating custom user experiences
- Integrating a Conversation with existing on-page functionality
Use the following steps to add a Conversation:
- Add the launcher code to the
body
of a page. - After the user-initiated action, add the Conversation container in the location where the Conversation should appear.
You can use
__OPEN_WEB__.initOW()
to initiate the Conversation following the user action.
<div data-spotim-module="conversation"></div>
- (Optional) Add
data-social-reviews="true"
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-post-url="ARTICLE_URL"
data-article-tags="ARTICLE_TOPIC1, ARTICLE_TOPIC2"
data-post-id="POST_ID"
data-spotim-autorun="false">
</script>
<!-- Button code or user action -->
...
<!-- Conversation widget -->
<div data-spotim-module="conversation"></div>
Virtual Pages
This implementation method allows you to embed Conversation in an infinite scroll page or a single-page application.
Use the following steps to add a Conversation:
- Add the launcher code to the
body
of a page. - 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-id
to set the unique article identifier that is specific to the article page. - (Recommended) Define the
data-post-url
to set the full URL address of the page in which the launcher code is embedded. - (Recommended) Define the
data-article-tags
to inform OpenWeb of the main topics in the article. - (Optional) Add
data-social-reviews="true"
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-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
Conversation Launcher Code Attributes
The following launcher code attributes apply only Conversation implementations. You can also add one of the general launcher code attributes.
Attribute | Description |
---|---|
data-author-id string | Controls the display of an Author Badge next to the author's name |
data-messages-count number | Controls the initial number of displayed messages in Conversation |
data-post-staleness-days number | Controls the number of days after which the post becomes read-only |
data-read-only boolean | Controls if additional comments could be added to an article
This attribute must be set to true to disallow any additional comments or replies from being posted. |
data-seo-enabled boolean | Controls if OpenWeb makes an API call to the SEO API when a page is rendering and embeds the SEO markup into the HTML of your page
OpenWeb recommends a backend integration for improved indexing results. |
data-social-reviews string | Controls displaying a star rating that allows users to provide feedback on and to rate the content
![]() Possible values:
|
data-sort-by string | Controls the sorting for an article, overriding the default sort setting of the site
Possible values:
|
Updated about 1 month ago
Now that you have added a Conversation to your page, you can continue to configure your users’ experiences: