The OpenWeb Developer Hub

Welcome to the OpenWeb developer hub. You'll find comprehensive guides and documentation to help you start working with OpenWeb as quickly as possible, as well as support if you get stuck. Let's jump right in!

Get Started    Documentation

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
ConversationConversation

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:

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

  1. 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:

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

  1. Replace the SPOT_ID placeholder.
  2. 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>

  1. 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:

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

  1. Replace all the placeholders in the launcher code: SPOT_ID,ARTICLE_URL, ARTICLE_TOPIC1, POST_ID.
  2. 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-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

Conversation


Create an engaging social experience through conversation.

Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.