Getting Started

Welcome to OpenWeb!

OpenWeb is 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

🚧
If you want to implement OpenWeb products on an AMP site, please contact your PSM.

Prerequisites

Item	Description
Spot ID	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/...`
Post ID	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, numbers, dashes (-), or hyphens (_) Except for the regex `[^\w\s\-\:\.\$\~]`, does not include special characters

Add the launcher code to your site

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

Follow these steps to add the launcher code to your site:

In the <head> element of your page, add the launcher code to your page.

<script 
    async 
    src="https://launcher.spot.im/spot/SPOT_ID"
    data-post-id="POST_ID">
</script>

(Optional) Define the theme of the products on the page (data-theme).
(Optional) Define a custom reporting parameter (data-custom).

You can now add and customize your OpenWeb products.

Launcher code attributes

Depending on the product or feature you want to add to your site, you can add attributes to the launcher code that enhance the experience for your users. The following sections list and describe product-related launcher code attributes.

Attribute Description

Attribute	Description
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.

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.