Reactions
Empower your readers to express how they feel.
Reactions open the door to a more spontaneous, emotional engagement with your content.
OpenWeb's Reactions functionality opens a native environment to engage readers when they decide to engage. Additionally, Reactions enables you to monetize your content by exposing your readers to advertising.
Requirement
Before you enable this feature, contact your OpenWeb PSM to set up a monetization campaign for your implementation.
Implementation Options
OpenWeb provides you several approaches to add Reactions to your site. Each is listed in the following table.
Approach | Description |
---|---|
Standard | Displays Reactions when a page loads where the launcher code is located |
Custom Location | Enables choosing the location of Reactions on a page |
AMP | Enables adding Reactions to an AMP page |
Standard
When using this implementation method, Reactions appears where the launcher code is located. If Conversation is enabled, Reactions appears horizontally above it.
To add Reactions, use the following steps:
- In your OpenWeb Admin Panel, click Features > Reactions.
- Under Enable/Disable Reactions, click the toggle to Enabled.
- From the Choose Reactions Location dropdown menu, select Above Conversation.
- (Optional) Under Reactions Themes, on the Default card, click Edit to update the Default theme or a custom theme that was previously created. You can also click Create New Theme to create a custom theme.
- Click Save & Publish.
Custom Location
When using this implementation method, you can choose the location in which Reactions appears on a page.
To add Reactions, use the following steps:
- In your OpenWeb Admin Panel, click Features > Reactions.
- Under Enable/Disable Reactions, click the toggle to Enabled.
- From the Choose Reactions Location dropdown menu, select Manual Code Integration.
- (Optional) Under Reactions Themes, on the Default card, click Edit to update the Default theme or a custom theme that was previously created. You can also click Create New Theme to create a custom theme.
- Click Save & Publish.
- On your page, add the Reactions positioning
<div>
in the desired page location.
The following table lists the different approaches for aligning Reactions with the layout of your page.
Orientation | Code |
---|---|
Horizontal* | <div data-spotim-app="reactions" data-post-id="POST_ID"></div> |
Vertical | <div data-spotim-app="reactions" data-post-id="POST_ID" data-vertical-view="true"></div> |
* The horizontal orientation of Reactions requires a minimum width of 300px.
- When embedding Reactions on a page without other OpenWeb products, add the launcher code.
AMP
When using this implementation method, you can choose the location where Reactions appears on an AMP page.
To add Reactions, use the following steps:
- In the
<head>
of the AMP page, add the following font and AMP Project scripts.
<link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet"/>
<script
async=""
src="https://cdn.ampproject.org/v0.js">
</script>
<script
async=""
custom-template="amp-mustache"
src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js">
</script>
<script
async=""
custom-element="amp-iframe"
src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js">
</script>
- In the
<body>
of the AMP page, add the following code in the location where the Reactions module should appear.
<div style="padding:8px">
<!-- Reactions -->
<amp-iframe width="375" height="600" sandbox="allow-scripts allow-same-origin allow-popups allow-top-navigation" layout="responsive" frameborder="0" src="https://amp.spot.im/production.html?inactive=true&spot_im_highlight_immediate=true&spotId=SPOT_ID&postId=POST_ID&product=reactions&data-post-url=POST_URL&reactions_theme_name=">
</amp-iframe>
<!-- Ad Unit Code -->
<a data-spmark="ad-choice" href="https://dynamic-cdn.spot.im/yad/optout.html" target="_blank">
<amp-img src="https://publisher-assets.spot.im/yad/ad-choises.png" width="9px" height="9px">
</amp-img>
</a>
<amp-list width="auto" height="1" layout="fixed-height" items="items" style="text-align:center" src="https://api-2-0.spot.im/v1.0.0/owa-gw/spot/SPOT_ID/amp/reactions">
<template type="amp-mustache">
{{#isDisplay}}
<amp-ad type="{{type}}" width="{{width}}" height="{{height}}" data-slot="{{ code }}" json='{"targeting":{"ampRCSpotId":["SPOT_ID"]}}' rtc-config='{"vendors":{"IndexExchange":{"SITE_ID":site_id}},"timeoutMillis":1000}'>
<div placeholder="">
</div>
<div fallback="">
</div>
</amp-ad>
{{/isDisplay}}{{#isAniviewVideo}}
<amp-ad type="{{type}}" width="{{width}}" height="{{height}}" data-playonview="1" data-pauseonunseen="1" data-publisherid="5e0e296628a061270b21ccab" data-channelid="{{code}}" data-ref1="AV_CDIM1=SPOT_ID&AV_SCHAIN=1.0,1!spotim.market,{{seller_id}},1,,," data-passbackurl="https://play.aniview.com/57b31584f83f1518108b4568/5e71193539e7c102b4435af3/spotimpassback.js">
</amp-ad>
{{/isAniviewVideo}}{{#isSRVideo}}
<amp-ad type="{{type}}" width="{{width}}" height="{{height}}" data-blade_player_type="{{type}}" data-blade_player_id="{{code}}" data-blade_api_key="587dfc37febaab0002000001" data-blade_macros="{"sub_id":"spotId=SPOT_ID&source=recirculation_amp"}">
</amp-ad>
{{/isSRVideo}}
</template>
</amp-list>
<amp-layout layout="responsive" width="0" height="0">
</amp-layout>
</div>
- Replace the
SPOT_ID
placeholder. - Replace the
POST_ID
to set the unique article identifier that is specific to the article page. - Replace the
POST_URL
to set the full URL address of the page in which the launcher code is embedded. - Replace the
SITE_ID
with value with the value provided by your OpenWeb PSM.
Theme Customizations
Edit the default theme
You can customize the default Reactions theme to align with branding of your site.
Use the following steps to customize the default theme:
- On the default theme card, click Edit. The Reactions Theme popup window appears.
- In the Reaction Title field, enter a question for your readers to react to, such as How Do You Feel About This Article?.
- Under Icons & Labels, choose 2-4 reaction icons. Click the checkbox next to an icon to select or deselect it.
- Click the icon image to upload a custom icon. A custom icon must be meet the following requirements:
- File type: .gif, .jpg, .png
- Aspect ratio: Square (1:1)
- File size: ≤ 100kb
- Click in the field next to an icon to enter a new icon label that has ≤ 12 characters.
- Click at the end of an icon row and drag to reorder the icon in the list.
- Click Done.
Create a new theme
You can create additional Reactions themes to align with certain article topics or the branding of certain sections of your site.
Use the following steps to create a new theme:
- Click Create New Theme. The Reactions Theme popup window appears.
- In the Theme Name field, enter a unique name for the new theme.
The theme name is used to identify the theme in the Admin Console and to select the specific theme for the Manual Code Integration method. Therefore, the theme name should not include spaces or special characters.
- From the Implementation Method dropdown menu, select an implementation method. Each method is explained in the following table.
Implementation Method | Description |
---|---|
Default (Related Keyword) | Automatically deploys the Reactions theme on all articles with topics that match those specified in the Keywords textbox The topic of an article is determined from one of the following: • LD-JSON keywords • OpenGraph article:tag • Standard keywords meta tags on the page |
Manual Code Integration (Theme) | Enables custom deployment of the Reactions theme by adding the data-theme="REACTIONS_THEME_NAME" attribute to the Reactions <div> Use this method for a Custom Location implementation. |
- If Default (Related Keyword) has been selected, enter at least one keyword in the Keywords textbox.
- In the Reaction Title field, enter a question for your readers to react to, such as How Do You Feel About This Article?.
- Under Icons & Labels, choose 2-4 reaction icons. Click the checkbox next to an icon to select or deselect it.
- Click the icon image to upload a custom icon. A custom icon must be meet the following requirements:
- File type: .gif, .jpg, .png
- Aspect ratio: Square (1:1)
- File size: ≤ 100kb
- Click in the field next to an icon to enter a new icon label that has ≤ 12 characters.
- Click at the end of an icon row and drag to reorder the icon in the list.
- Click Done.
Updated 14 days ago