Getting Started

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

Implementation

When you implement the launcher code, enabled OpenWeb products appear where the default position script has been placed on page.

📘
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

Generating accurate analytics

Providing monetization opportunities

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

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

Add the launcher code to the<head>section of your page:

<script async src="https://launcher.spot.im/spot/SPOT_ID"></script>

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

Add the default positioning <div> element where your enabled OpenWeb products should appear on the page.

<div 
    data-spotim-module="default"
    data-spot-id="SPOT_ID"
    data-post-id="POST_ID"
    data-post-url="ARTICLE_URL"
    data-article-tags="ARTICLE_TOPIC1, ARTICLE_TOPIC2">
</div>

Define the article identifier (data-post-id).
(Recommended) Define the URL of the page (data-post-url).
(Optional) Define the topics of the article (data-article-tags).
(Optional) To delay enabled products from displaying automatically, add data-spotim-autorun: "false" to the relevant HTML element. To display the product, either dynamically remove this attribute or change its value to "true".
📘
Once the product has been displayed, resetting data-spotim-autorun to "false" will have no effect.

Customize the product location

To customize the on-page placement of specific OW products, you can add a positioning <div> element for each product you want to position differently from the default.

The following table lists the available positioning <div> elements for each OW product.

Product	Positioning
Conversation	Regular: `<div data-spotim-module="conversation"></div>`
Community Spotlight	Regular: `<div data-spotim-module="spotlight"></div>` Sidebar: `<div data-spotim-module="spotlight" data-spotlight-sidebar></div>`
Popular in the Community	Horizontal: `<div data-spotim-module="pitc"></div>` Vertical: `<div data-spotim-module="pitc" data-vertical-view="true"></div>`
Reactions	Horizontal: `<div data-spotim-module="reactions"></div>` Vertical: `<div data-spotim-app="reactions" data-vertical-view="true"></div>`
Topic Tracker	Regular: `<div data-spotim-module="topic-tracker"></div>` Sidebar: `<div data-spotim-module="topic-tracker" data-vertical-view="true"></div>`
Standalone Ad	Standard: `<div data-openweb-ad data-row="1" data-column="1"></div>` Dynamic: When using this implementation method, you can choose one or more named `<div>` elements to use for monetization.

Customization Attributes

Use these attributes to customize your OW experience. These 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, numbers, 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 to launch on page load Products load on the page where the launcher code has been placed in the following order: 1. Reactions 2. Popular in the Community (Vertical \| Horizontal) 3. Community Spotlight or Topic Tracker 4. Conversation 5. Popular in the Community (Double-Decker) `false`: Prevents launching any enabled OpenWeb products on page load To startup the enabled products, dynamically remove this attribute or change the attribute value to `"true"`
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.