NAV Navbar
html
  • Introduction
  • Install guides
  • API documentation
  • FAQ
  • Introduction

    Welcome to React & Share documentation. Here you'll find:

    Install guides

    React & Share can be installed on any content management system. On WordPress you can install the React & Share plugin and on other CMS's you can use an embed code.

    You can also use Google Tag Manager to install React & Share.

    For all installations you'll need an API key. To get that:

    1. Head over to getreactionbuttons.com
    2. Login or create an account
    3. Click "Account" on the top bar
    4. Click on "API key"

    WordPress install

    Read the full guide here

    Embed code install

    You can place the embed code to your page templates on any content management system. Here's how it works.

    Free plan

    Place this snippet exactly where you want the plugin to be shown.

    <div class="rns"></div>
    <script type="text/javascript">
      (function() {
        window.rnsData = {
          apiKey: 'abcdefgh12345678'
        };
        var s = document.createElement('script');
        s.src = 'https://cdn.reactandshare.com/plugin/rns.js';
    
        document.body.appendChild(s);
      }());
    </script>
    

    Make sure to replace abcdefgh12345678 with your API key.

    You should use this embed code if you are using our Free plan.

    Plugin settings (window.rnsData)

    Property Required Type Description DefaultĀ 
    apiKey yes String API Key that was created upon the registration.
    canonicalUrl no String Canonical url of the page or post. By default the plugin uses the value of <link ref="canonical"> element. The default value can be overdriven by this property. If no link element or property is not provided, the url of the page is used instead.

    Lite plan

    Place this snippet with real values exactly where you want the plugin to be shown.

    <div class="rns"></div>
    <script type="text/javascript">
      (function() {
        window.rnsData = {
          apiKey: 'reactandshare123',
          title: 'Get feedback and understand your audience.',
          canonicalUrl: 'https://reactandshare.com/example',
          author: 'Dekko Oy',
          date: '2016-10-28T08:00:34.282Z',
          tags: ['feedback', 'buttons'],
          categories: ['marketing'],
          commentNumber: 15
        };
    
        var s = document.createElement('script');
        s.src = 'https://cdn.reactandshare.com/plugin/rns.js';
    
        document.body.appendChild(s);
      }());
    </script>
    

    Make sure to replace the example values with real values. Values are often easily exported from the CMS or they could be fetch from the page with JavaScript.

    You should use this embed code if you are using our Lite plan. Lite plan includes our Analytics Dashboard and more data is needed to ensure efficient use of the dashboard.

    Plugin settings

    Property Required Type Description DefaultĀ 
    apiKey yes API Key that was created upon the registration.
    canonicalUrl no String Canonical url of the page or post. By default the plugin uses the value of <link ref="canonical"> element. The default
    title no String Title of the page or post. Defaults to the value of Open Graph tag og:title if it exists. If neither Open Graph tag or title property exist, the title of the page is used instead.
    author no String Name of the author of the page or post. Defaults to value of Open Graph tag article:author if it exists.
    date no String or Number ISO-8601 date string or Unix timestamp Type in milliseconds. Defaults to the value of Open Graph tag article:published_time if it exists.
    tags no [String] Tag associated with the page or the post.
    categories no [String]
    commentNumber no Number Number of comments, if there is a possibility to leave comments on the page.

    Business plan

    Place this snippet with real values exactly where you want the plugin to be shown.

    <div class="rns"></div>
    <script type="text/javascript">
      (function() {
        window.rnsData = {
          apiKey: 'reactandshare123',
          title: 'Get feedback and understand your audience.',
          canonicalUrl: 'https://reactandshare.com/example',
          author: 'Dekko Oy',
          date: '2016-10-28T08:00:34.282Z',
          tags: ['feedback', 'buttons'],
          categories: ['marketing'],
          commentNumber: 15,
          initCallback: function(element, canonicalUrl) {
            // do something with the element
          },
          reactionCallback: function(eventType, reactionLabel, url) {
            // do something with the data
          },
          shareCallback: function(mediaName, url) {
            // do something with the data
          }
        };
    
        var s = document.createElement('script');
        s.src = 'https://cdn.reactandshare.com/plugin/rns.js';
    
        document.body.appendChild(s);
      }());
    </script>
    

    Make sure to replace the example values with real values. Values are often easily exported from the CMS or they could be fetch from the page with JavaScript.

    Business plan includes Analytics Dashboard and callback functions to enable integration to 3rd party services. Callback functions are defined as a part of plugin settings. More detailed instructions on how to use the callback functions can be found here

    Plugin settings

    Property Required Type Description DefaultĀ 
    apiKey yes API Key that was created upon the registration.
    canonicalUrl no String Canonical url of the page or post. By default the plugin uses the value of <link ref="canonical"> element. The default
    title no String Title of the page or post. Defaults to the value of Open Graph tag og:title if it exists. If neither Open Graph tag or title property exist, the title of the page is used instead.
    author no String Name of the author of the page or post. Defaults to value of Open Graph tag article:author if it exists.
    date no String or Number ISO-8601 date string or Unix timestamp Type in milliseconds. Defaults to the value of Open Graph tag article:published_time if it exists.
    tags no [String] Tag associated with the page or the post.
    categories no [String]
    commentNumber no Number Number of comments, if there is a possibility to leave comments on the page.
    initCallback no Function Function to be called after plugin initiation
    reactionCallback no Function Function to be called after a reaction button is clicked
    shareCallback no Function Function to be called after a share button is clicked

    Google Tag Manager install

    Google Tag Manager installation works the same as using the embed code, with one caveat: you'll have to manually specify where the buttons will be shown.

    1. Select the element where you want the buttons to be shown

    The buttons will be embedded to the bottom of the element you specify. Check the id or the class of the div element and place it inside the querySelector. Type .class if you're using a class, or #id if using an id.

    2. Log in to your Google Tag Manager account and click "Add new tag"

    Install reaction buttons with Google Tag Manager - step 1

    3. Click the "Choose a tag type to begin setup..." icon

    Install reaction buttons with Google Tag Manager - step 2

    4. From the "Choose tag type" menu, select "Custom HTML"

    Install reaction buttons with Google Tag Manager - step 3

    <script type="text/javascript">
      (function() {
        var rns = document.createElement('div');
        rns.setAttribute('class','rns');
        var container = document.querySelector('id-or-class');
        container.appendChild(rns);
    
        window.rnsData = {
          apiKey: 'abcdefgh12345678'
        };
        var s = document.createElement('script');
        s.src = 'https://cdn.reactandshare.com/plugin/rns.js';
        document.body.appendChild(s);
      }());
    </script>
    

    Make sure to replace abcdefgh12345678 with your API key and id-or-class with your element selector.

    5. In the Tag Configuration HTML field, paste the script on the right

    Make sure to replace abcdefgh12345678 with your API key and id-or-class with your element selector.

    Install reaction buttons with Google Tag Manager - step 4

    Give the tag a name.

    6. Click "Choose a trigger to make this tag fire..." to set your trigger

    Install reaction buttons with Google Tag Manager - step 5

    7. Select All Pages

    Install reaction buttons with Google Tag Manager - step 6

    You can also use your own custom triggers. Sometimes it's a good idea to limit the trigger to only some areas of the site. This guide works for most installations, but here's Google's full guide to triggers.

    Click Save.

    8. Click "Preview" or "Submit"

    If you're feeling confident, you can click "Submit" and the reaction buttons should now be visible on your site. You can also click "Preview" and the changes will be visible only to you. Remember to click "Submit" when you want to publish the changes.

    Install reaction buttons with Google Tag Manager - step 7

    And that's it, done!

    API documentation

    Callback functions

    Callback functions are enabled in the Business plan. They can be used to call 3rd party services for deeper integration into your marketing and analytics stack.

    initCallback

    Example

    function initCallback(element, url) {
    
    }
    

    This function can be used to access the existing plugin element, e.g. add elements to the plugin.

    Function parameters

    Parameter Type Description
    element DOM element DOM element capsulating the plugin
    url String Canonical url of the parent of the plugin or url of the page.

    reactionCallback

    Example

    function reactionCallback(eventType, reactionLabel, url) {
      // If someone clicks the reaction "I don't understand" -> open a chat window for quick help
      if ( eventType==="reaction" && reactionLabel === "I don't understand") {
        thirdPartyChat.open()
      }
    }
    

    Please notice that thirdPartyChat.open() is just an example and not a working piece of code.

    This function can be used e.g. to trigger 3rd party analytics or marketing automation services.

    Function parameters

    Parameter Type Description
    eventType String reaction or unreaction
    reactionLabel String Label of the reaction button clicked.
    url String Canonical url of the parent of the plugin or url of the page.

    shareCallback

    Example

    function shareCallback(media, url) {
    
    }
    

    This function can be used e.g. to trigger 3rd party analytics or marketing automation services.

    Function parameters

    Parameter Type Description
    eventType String reaction or unreaction
    reactionLabel String Label of the reaction button clicked.
    url String Canonical url of the parent of the plugin or url of the page.

    FAQ