OpenWeb

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    

Conversation

Create an engaging social experience through conversation.

Suggest Edits

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


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:

  1. From your OpenWeb Admin Dashboard, click Features > CONVERSATION.
  2. From the Select your site platform drop-down menu, select Universal Code.
  3. 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>

  1. In the <body> of your page, paste the launcher code in the location where the Conversation should appear.
  2. Replace POST_ID with an 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 (_)
    • 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:


› 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:

  1. From your OpenWeb Admin Dashboard, copy your Spot ID from the URL.
https://admin.spot.im/spot/SPOT_ID/...

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

  1. Paste launcher code into the body of your page before the user action or button.
  2. Replace the SPOT_ID with your Spot ID.
  3. Configure the launcher code attributes.
  4. 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 the data-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:


› Infinite scroll and single-page application implementation

  1. From your OpenWeb Admin Dashboard, copy your Spot ID from the URL.
https://admin.spot.im/spot/{SPOT_ID}/...

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

  1. Paste the launcher code into the <body> of your page.
  2. Replace the SPOT_ID with your Spot ID.
  3. 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 Conversations container, define the following attributes.
AttributeDescription
data-article-tagsMain topics of the article

Multiple topics can be added by delimiting with a comma.
data-post-idUnique 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 (_)
• Does not include special characters

Re-using a data-post-id value will load the same Conversation in multiple locations.
data-post-urlFull 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 4 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.