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: standard, action-initiated, infinite scroll and 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_IDplaceholder. - 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.
<div data-spotim-module="conversation" data-post-id="POST_ID"></div>
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-post-url="ARTICLE_URL"
data-article-tags="ARTICLE_TOPIC1, ARTICLE_TOPIC2"
data-post-id="POST_ID"
data-spotim-autorun="false">
</script>
- Replace all the placeholders in the launcher code:
SPOT_ID,ARTICLE_URL,ARTICLE_TOPIC1,POST_ID. - After the user-initiated action, add the Conversation container in the location where the Conversation should appear. Be sure to use the same
POST_IDthat is in the launcher code.
Since thedata-spotim-autorunattribute 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-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>
Updated 26 days 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 |