Launcher code

The library at the core of each OpenWeb product.

Each OpenWeb product and feature depends upon the launcher code. The launcher code is a JavaScript library that enables and configures OpenWeb products and features on your pages.


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

  1. Add the launcher code to your page.
<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>

🚧

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.


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

To learn how to best configure the launcher code, refer to the implementation documentation for the OpenWeb product, such as Conversation, Popular in the Community, Community Spotlight, and Reactions.



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.

General

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 Automatically loads OpenWeb products that have been enabled on an account and for which no <div> has been explicitly set

In the location that the launcher code has been placed on the page, products are loaded 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)
To limit the automatic loading of enabled products (for example when implementing site-wide notifications), this attribute must be set to false.

The default value is 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.

Conversation

Attribute Description
data-author-id string Controls the display of an Author Badge next to the author's name
data-messages-count number Controls the initial number of displayed messages in Conversation
data-post-staleness-days number Controls the number of days after which the post becomes read-only
data-read-only boolean Controls if additional comments could be added to an article

This attribute must be set to true to disallow any additional comments or replies from being posted.
data-sort-by string Controls the sorting for an article, overriding the default sort setting of the site

Possible values:
  • best
  • newest
  • oldest

Live Blog

Attribute Description
data-live-event-code boolean Live Blog event code generated in your Admin Dashboard
data-live-blog boolean Enables Live Blog on the conversation

Default: false

Popular in the Community

Attribute Description
data-recommendable-post string Allows excluding a specific Conversation from being recommended for recirculation

Default: true

Third-party comment importing

Attribute Description
data-disqus-identifier string disqus_identifier parameter in your Disqus integration code

This identifier typically has a pattern of postID https://admin.publisher.domain/?p=postID.
data-disqus-url string disqus_url or this.page.url parameter in your Disqus integration code
data-facebook-url string Canonical URL of the Conversation page
data-livefyre-url string articleId that uniquely identifies a Collection in your Livefyre account


Did this page help you?