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. Review the following sections to find the implementation approach that best suits your use case.
NOTE
OpenWeb also enables you to add a Conversation on the following platforms:
  • AMP
  • Android
  • iOS
  • WordPress
› Basic implementation
Best option for developers who need to quickly add a Conversation when a page loads:
   • Embed the Conversation with a single code snippet
   • Manage settings in the Admin dashboard
Use the following steps:
- From your OpenWeb Admin Dashboard, click Features > CONVERSATION.
- From the Select your site platform drop-down menu, select Universal Code.
- In the Code for Your Site section, copy the launcher codelauncher code - JavaScript code that loads the library and configurations for an OpenWeb product or feature.
The following code samples are provided for convenience. We recommend using the Code sample: launcher code (Recommended). This version of the launcher code enables you to add more information about an article. Learn more about the launcher code attributes.
<!-- This version of the launcher code enables you to add more information about the article. -->
<script
async
src="https://launcher.spot.im/spot/PRE-POPULATED-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>
<!-- This is the same code found in your Admin Dashboard and is the minimum code required for the basic implementation. -->
<script
async
src="https://launcher.spot.im/spot/PRE-POPULATED-SPOT_ID"
data-spotim-module="spotim-launcher"
data-post-id="POST_ID">
</script>
- In the
<body>
of your page, paste the launcher code in the location where the Conversation should appear. - Replace
POST_ID
with an article identifier that is specific to the article page. The idealPOST_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 (_)
• Except for the regex[^\w\s\-\:\.\$\~]
, does not include special characters
NOTE
The Conversation has a 100% width and 6px left and right margins. If you want the flexibility to define aspects (like location and width) of the Conversation, follow steps 1-7 of the infinite scroll and single-page application implementation.
The minimum supported Conversation width is 320px.
Now that you have added a Conversation, you can take one of the following steps:
- Add Popular in the Community to your page
- Add Community Spotlight to your page
- Configure your users' experiences with one of the articles in the Next Step section at the bottom of the page
› Action-initiated implementation
Best option for developers who want an implementation that provides the most flexibility:
   • Create custom user experiences
   • Integrate a Conversation with existing on-page functionality
Use the following steps:
- From your OpenWeb Admin Dashboard, copy your Spot ID from the URL.
https://admin.spot.im/spot/SPOT_ID/...
- Copy the following launcher codelauncher code - JavaScript code that loads the library and configurations for an OpenWeb product or feature. The
data-spotim-autorun
attribute in the launcher code prevents the Conversation from appearing.
<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>
- Paste launcher code into the
body
of your page before the user action or button. - Replace the
SPOT_ID
with your Spot ID. - Configure the launcher code attributes.
- After the user-initiated action, add the conversation container in the location where the Conversation should appear. Be sure to replace
POST_ID
with the same ID used in step 4.
The conversation<div>
launches the Conversation that thedata-spotim-autorun
prevented.
<div data-spotim-module="conversation" data-post-id="POST_ID"></div>
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" data-post-id="POST_ID"></div>
Now that you have added a Conversation, you can take one of the following steps:
- Add Popular in the Community to your page
- Add Community Spotlight to your page
- Configure your users' experiences with one of the articles in the Next Step section at the bottom of the page
› Infinite scroll and single-page application implementation
- From your OpenWeb Admin Dashboard, copy your Spot ID from the URL.
https://admin.spot.im/spot/{SPOT_ID}/...
- Copy the following launcher codelauncher code - JavaScript code that loads the library and configurations for an OpenWeb product or feature. The launcher code only needs to be added once to an infinite scroll page or single-page application.
<script
async
src="https://launcher.spot.im/spot/SPOT_ID"
data-spotim-module="spotim-launcher">
</script>
- Paste the launcher code into the
<body>
of your page. - Replace the
SPOT_ID
with your Spot ID. - 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 Conversations container, define the following attributes.
Attribute | Description |
---|---|
data-article-tags | Main topics of the article Multiple topics can be added by delimiting with a comma. |
data-post-id | Unique 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 (_) • Except for the regex [^\w\s\-\:\.\$\~] , does not include special charactersRe-using a data-post-id value will load the same Conversation in multiple locations. |
data-post-url | Full URL address for the page This attribute is used only if the URL reference in the of the page is erroneous. Re-using a data-post-url value will negatively impact the system logic. |
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>
NOTE
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.
Now that you have added a Conversation, you can take one of the following steps:
- Add Popular in the Community to your infinite scroll page or single-page application
- Add Community Spotlight to your infinite scroll page or single-page application
- Configure your users' experiences with one of the articles in the Next Step section at the bottom of the page
Updated 3 months ago
Next Step
Now that you have added a Conversation to your page, you can continue to configure your users’ experiences:
Add Social Reviews |
Add a comment counter |
Import third-party comments |
Enable scrolling to a Conversation |
Enable Google indexing of comments and ratings |