Reactions

Reactions opens 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 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.

1114 — Icons & Labels section of a Reactions theme

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.