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.


Community Spotlight
Requirements
- Monetization campaign created by your OpenWeb PSMPSM - Partner Success Manager
- Community Spotlight enabled for your account
Community Spotlight configuration
Your Community Spotlight branding is defined in your Admin Dashboard.
- From your Admin Dashboard, click Features > SPOTLIGHT.
- 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. - 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. - 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. - 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.
Approach | Code | Explanation |
---|---|
Horizontal | <div data-conversation-spotlight></div> |
Vertical | If 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.
- 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>
-
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}/...
-
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.
Approach | Code | Explanation |
---|---|
Horizontal | <div data-conversation-spotlight></div> |
Vertical | If you have a sidebar that is ≤ 300px, you can configure Community Spotlight to appear vertically. <div data-conversation-spotlight data-spotlight-sidebar></div> |
Updated 3 months ago