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
Implementation
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 |
React | Facilitates adding a Conversation to a React single-page application |
OpenWeb also enables you to add a Conversation on the following platforms:
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 all the placeholders in the launcher code:
SPOT_ID
,ARTICLE_URL
,ARTICLE_TOPIC1
,POST_ID
.
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.
To add Conversation, use the following steps:
- 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. - 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>
- For each instance of the Conversation container, replace the placeholders:
ARTICLE_URL
,ARTICLE_TOPIC1
,POST_ID
.
TIP
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
To add Conversation, use the following steps:
- 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 in the launcher code. - 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 thedata-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>
- Replace all the placeholders in the Conversation code:
ARTICLE_URL
,ARTICLE_TOPIC1
,POST_ID
.
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>
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
Updated 1 day ago