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    

Community Spotlight

Community Spotlight drives users further down engagement funnel and helps you build top-line revenue. Prompt users to act on key initiatives such as registrations, digital subscriptions or conversation call-to-action.


Requirements

  • Monetization campaign created by your OpenWeb PSMPSM - Partner Support Manager
  • Community Spotlight enabled for your account


Community Spotlight configuration

Your Community Spotlight branding is defined in your Admin Dashboard.

  1. From your Admin Dashboard, click Features > SPOTLIGHT.

  2. Expand the General section to set the general Community Spotlight features:
       • Set the Text color.
       • Set the Brand color.
    Click Save Changes after making any changes.

  3. Expand the Header section to configure the Community Spotlight header:
       • Choose the Header text font size.
       • Choose the Header text font weight.
       • Set the Header Text.
    Click Save Changes after making any changes.

  4. Expand the Card section to set the Community Spotlight card features:
       • Upload a Logo image.
       • Choose a Card Type.
       • Choose the Card text font size.
       • Choose the Card text font weight.
       • Set the Card Text.
    Click Save Changes after making any changes.

  5. Expand the Button section to set configure the Community Spotlight call-to-action button:
       • Choose the Button text font size.
       • Choose the Button text font weight.
       • Set the Button Text.
    Click Save Changes after making any changes.



Implementation

You can add Community Spotlight on the following types of pages:


Embed with a Conversation

If an article page already has a Conversation within it and Community Spotlight has been enabled, Community Spotlight appears horizontally above the Conversation. No additional coding is necessary. Community Spotlight appears in a location relative to the launcher script placement.

To explicitly define a custom location for Community Spotlight to appear, add the Community Spotlight <div> to the page. Community Spotlight will appear in the location in which you place the <div>.

The following table lists the different approaches for aligning Community Spotlight with the layout of your page.

ApproachCode | Explanation
Horizontal<div data-conversation-spotlight></div>
VerticalIf you have a sidebar that is ≤ 300px, you can configure Community Spotlight to appear vertically.

<div data-conversation-spotlight data-spotlight-sidebar></div>


Embed without a Conversation

You can embed Community Spotlight on article pages that do not contain a Conversation.

  1. Add the launcher codelauncher code - JavaScript code that loads the library and configurations for an OpenWeb product or feature.
<script 
    async
    src="https://launcher.spot.im/spot/SPOT_ID"
    data-spotim-module="spotim-launcher">
</script>

  1. Replace SPOT_ID with your Spot ID.

    Use the following steps to locate your Spot ID:
       a. Log into your Admin Dashboard.
       b. Copy your Spot ID from the URL: https://admin.spot.im/spot/{SPOT_ID}/...

  2. In the location where Community Spotlight should appear, add the Community Spotlight <div>.

    The following table lists the different approaches for aligning Community Spotlight with the layout of your page.

ApproachCode | Explanation
Horizontal<div data-conversation-spotlight></div>
VerticalIf you have a sidebar that is ≤ 300px, you can configure Community Spotlight to appear vertically.

<div data-conversation-spotlight data-spotlight-sidebar></div>

Updated 2 months ago


Community Spotlight


Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.