Getting Started

Welcome to OpenWeb: your unified, end-to-end suite for building a community.

The first step to implementing any OpenWeb product is the launcher code. The launcher code is a JavaScript library that enables and configures OpenWeb products and features on your pages:

  • Configuring when products and features load
  • Navigating users to a specific thread from a notification or a shared link
  • Embedding multiple instances of products on an infinite scroll page with multiple articles
  • Defining topics for products, such as Popular in the Community, Reactions, and Topic Tracker

📘

The Launcher code should not be lazy-loaded or otherwise deferred to ensure the correct behavior of OpenWeb products:

  • Navigating users directly to the conversation from a notification
  • Accurate analytics
  • Monetization opportunities

OpenWeb optimizes the loading of its different components to negate any impact on page load performance while maintaining a streamlined user experience.


Use the following sections to learn more about the launcher code:



Implementations

Standard

When you use the standard (Quick Start) approach to implement the launcher code, enabled OpenWeb products accompany the Conversation widget where the launcher has been placed on a page.

To add the launcher code to your site, use the following steps:

  1. Add the launcher code to your page. While various attributes can be added to the launcher code, the attributes in the following code sample will enable you to launch most of OpenWeb's products and features easily.

<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 the SPOT_ID placeholder with your Spot ID. Your Spot ID is your unique OpenWeb identifier. When you log into your OpenWeb Admin Portal, you can copy your Spot ID from the URL: https://admin.spot.im/spot/SPOT_ID/...
  2. Define the article identifier (data-post-id).
  3. (Recommended) Define the URL of the page (data-post-url).
  4. (Optional) Define the topics of the article (data-article-tags).

All of your enabled OpenWeb products will appear where you placed the launcher code.

You can customize the on page location of some or all of your enabled OW products using a positioning

:
Conversation | Community Spotlight | Popular in the Community | Reactions | Topic Tracker | Standalone Ad


Action-initiated

  1. To prevent an enabled OpenWeb product from displaying automatically, add data-spotim-autorun: "false" attribute to the 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>
  1. Replace the SPOT_ID placeholder with your Spot ID. Your Spot ID is your unique OpenWeb identifier. When you log into your OpenWeb Admin Portal, you can copy your Spot ID from the URL: https://admin.spot.im/spot/SPOT_ID/...
  2. Define the article identifier (data-post-id).
  3. (Recommended) Define the URL of the page (data-post-url).
  4. (Optional) Define the topics of the article (data-article-tags).
  5. To launch a product, a <div> element must be explicitly set for each product. The product loads where the <div> element has been placed. The following is an example for Conversation.
<div data-spotim-module="conversation"></div>

To learn how to defer load of a specific product, refer to the corresponding implementation documentation:
Conversation | Community Spotlight | Notification Bell | Reactions | Topic Tracker | Standalone Ad


Virtual Pages

If your site uses a single page application, infinite scroll or otherwise serves content dynamically without the DOM refreshing, a different implementation of OpenWeb is required.

  1. Add a minimal version of the launcher code to your page.
<script 
    async 
    src="https://launcher.spot.im/spot/SPOT_ID"
    data-spotim-module="spotim-launcher">
</script>
  1. Replace the SPOT_ID placeholder with your Spot ID. Your Spot ID is your unique OpenWeb identifier. When you log into your OpenWeb Admin Portal, you can copy your Spot ID from the URL: https://admin.spot.im/spot/SPOT_ID/...

  2. To launch a product, a <div> element must be explicitly set for each product, without re-embedding the Launcher code on subsequent virtual page loads. The product loads where the <div> element has been placed. The following is an example for Conversation.

<div data-spotim-module="conversation"
     data-post-id="POST_ID"
     data-post-url="ARTICLE_URL"
     data-article-tags="ARTICLE_TOPIC1, ARTICLE_TOPIC2">
</div>
  1. Define the article identifier (data-post-id).
  2. (Recommended) Define the URL of the page (data-post-url).
  3. (Optional) Define the topics of the article (data-article-tags).

To learn how to specify the location for an OpenWeb product, refer to the corresponding implementation documentation:
Conversation | Community Spotlight | Notification Bell | Reactions | Topic Tracker | Standalone Ad



Customization Attributes

Use these attributes to customize your OW experience. These would apply to all embedded OpenWeb products.

Attribute Description
data-article-tags string Informs OpenWeb of the main topics of the article

Multiple topics can be added by delimiting with a comma. The values of this attribute should usually align with the KEYWORDS metadata schema.
data-post-id string 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 characters
data-post-url string Full URL address of the page in which the launcher code is embedded

The post URL helps OpenWeb know the source URL of a post ID. This is especially useful when post IDs are reused across multiple pages, single page applications, and infinite scroll implementations. Each post ID should have only one post URL.

NOTE: This attribute must match the actual URL of the original page where the launcher code is embedded, even if that page has a different canonical URL. For example, a news aggregator that uses canonical URLs to mark the original source of an article, must still use the reprint’s actual URL for this attribute.
data-spotim-autorun boolean Determines if an OpenWeb product loads automatically during page load

Possible values:
  • true: (Default) Permits all enabled OpenWeb products launch on page load

    Products load on the page where the launcher code has been placed in the following order:

  • false: Prevents launching any enabled OpenWeb products on page load

    To launch a product, a <div> element must be explicitly set for each product. The product loads where the <div> element has been placed. This value is typically used for custom location implementations or implementing site-wide notifications.
data-theme string On a specific page, sets the theme of the product

Possible values:
  • light: (Default) Light OpenWeb theme. Use this theme for pages that have a light background. If using the default theme, this attribute does not need to be included in the launcher code.
  • dark: Dark OpenWeb theme. Use this theme for pages with a dark background

    To set the background for all products site-wide, use the Admin Panel
data-custom-CUSTOMPARAM string Custom reporting parameter for a specific pageview or page type

This is useful to provide additional granularity to data exports and BI reports. When using this attribute, replace CUSTOMPARAM with the name of the custom parameter

The attributes are taken from the first launcher script element found on the page. Subsequent Launcher script elements are ignored.