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>


Next Step

Now that you have added a Conversation to your page, you can continue to configure your users’ experiences:

Did this page help you?