Reactions

Empower your readers to express how they feel.

Reactions opens the door to a more spontaneous, emotional engagement with your content.

15461546

Reactions default theme

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

You can add Reactions to a page using either the Standard or Custom Location method.


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:

  1. In your OpenWeb Admin Panel, click Features > Reactions.
  2. Under Enable/Disable Reactions, click the toggle to Enabled.
  3. From the Choose Reactions Location dropdown menu, select Above Conversation.
  4. (Optional) Under Reactions Themes, 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.
  5. 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:

  1. In your OpenWeb Admin Panel, click Features > Reactions.
  2. Under Enable/Disable Reactions, click the toggle to Enabled.
  3. From the Choose Reactions Location dropdown menu, select Manual Code Integration.
  4. (Optional) Under Reactions Themes, 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.
  5. Click Save & Publish.
  6. 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.
OrientationCode
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.


  1. When embedding Reactions on a page without other OpenWeb products, add the launcher code.


Theme Customizations

Edit the default theme

You can customize the default Reactions theme to align with branding of your site.

11141114

Icons & Labels section of a Reactions theme


Use the following steps to customize the default theme:

  1. On the default them card, click Edit. The Reactions Theme popup window appears.
  2. In the Reaction Title field, enter a question for your readers to react to, such as How Do You Feel About This Article?.
  3. Under Icons & Labels, choose 2-4 reaction icons. Click the checkbox next to an icon to select or deselect it.
  4. 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
  5. Click in the field next to an icon to enter a new icon label that has ≤ 12 characters.
  6. Click at the end of an icon row and drag to reorder the icon in the list.
  7. 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.

11141114

Icons & Labels section of a Reactions theme


Use the following steps to create a new theme:

  1. Click Create New Theme. The Reactions Theme popup window appears.
  2. 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.


  1. From the Implementation Method dropdown menu, select an implementation method. Each method is explained in the following table.
Implementation MethodDescription
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.

  1. If Default (Related Keyword) has been selected, enter at least one keyword in the Keywords textbox.
  2. In the Reaction Title field, enter a question for your readers to react to, such as How Do You Feel About This Article?.
  3. Under Icons & Labels, choose 2-4 reaction icons. Click the checkbox next to an icon to select or deselect it.
  4. 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
  5. Click in the field next to an icon to enter a new icon label that has ≤ 12 characters.
  6. Click at the end of an icon row and drag to reorder the icon in the list.
  7. Click Done.