Reactions: Integration, Layout Requirements & Customization

🚧

Reactions integrations have been tested on a variety of sites and are robust to lots of environments. However, every site is unique. We recommend trying things on a development/staging site and getting in touch with us before going live or if you run into any issues so that we can fix them on our end. You can reach us by email at support@mash.com.

💬 Introduction
✅ Step 1: Enabling Reactions
🎛️ Step 2: Control which sections have reactions
📱 Step 3: Mobile Layout Requirements
🖥️ Step 4: Desktop Layout Requirements
🚫 [Optional] Disabling Reactions on Specific Pages
↕️ [Optional] Desktop Vertical Nav Bar Customization

💬 Introduction

Adding reactions is a relatively straightforward process if you have a little bit of front-end development knowledge – or get a contractor for a few hours. If you’re interested in partnering with us, or want support, please contact us, ideally with a link to your staging/development site so that we can effectively help. Note: We’ve highlighted specific code related to topics in purple.

✅ Step 1: Enabling Reactions

To enable reactions, the options property as part of the primary mash snippet needs to be set to enabled:true

Any pages where you would like to have Mash enabled but not reactions, just omit the options field or set enabled: false This requires customization how Mash is added to each page in your code injection manager.

<script>
  window.MashSettings = {
    earnerID: "<YOUR_EARNER_ID>",
	options: { reactions: { enabled: true, target: "attribute" } },
  };
  var onMashScriptLoaded = function () {
    window.Mash.init();
  };
</script>
<script defer src="https://cdn.mash.com/mash/mash.js" onload="onMashScriptLoaded();"></script>

🖌️ Elements that get reactions. Reactions can be added to the following elements This list will be expanded and customizable.

headers
paragraphs
lists
images
iframes like embedded tweets.

🎛️ Step 2: Control which sections have reactions

Option 1: All elements that support reactions on your pages will have them enabled – you can remove target:"attribute" from the main mash snippet from above. Design wise you might have reactions appear in places that aren’t desired.

Option 2: Customize where on the page reactions can be added to with a small adjustment to your HTML.

This is enabled & controlled by the target:"attribute" property included in the code-snippet above. By including it, it tells Mash to only add reactions to specific sections that you’ve tagged in your HTML.

To enable specific section to have reactions, add data-mash-reactions="enabled" to the elements/divs. You can also tag multiple sections with this attribute. This is helpful if you want just certain part of the article to have reactions be enabled and others not (as an alternative to one large wrapper div).

// No reactions possible with this div.
<div id="article">
...
</div>

// Reactions enabled for this div
<div id="article" data-mash-reactions="enabled" >
...
</div>

📱 Step 3: Mobile Layout Requirements

Mobile: Mash uses a small expandable floating widget. This isn’t customizable and has been proven to be the best performant of all of our experiments. Please ensure no other elements interact with it.

🖥️ Step 4: Desktop Layout Requirements

Spacing is required as part of your layout to ensure reactions fit in a pleasing way.

🚫 [Optional] Disabling Reactions on Specific Pages

You can disable reactions on specific pages by setting the options attribute to false. For most sites, we recommend disabling reactions on your home page.

Even if reactions are disabled, there are benefits to including Mash on your other pages for features like rewards, donations, and providing access for users to their accounts. Some features that are launching soon (e.g., badges) benefit and require Mash being included on the homepage.

window.MashSettings = {
   earnerID: "<YOUR_EARNER_ID>",
   options: { reactions: { enabled: false } },
 };
</script>
<script defer src="<https://cdn.mash.com/mash/mash.js>" onload="onMashScriptLoaded();"></script>

↕️ [Optional] Desktop Vertical Nav Bar Customization

If you prefer a vertical nav bar integration of the Mash Hub, or other customizations – please reach out to the team with your primary website, and a staging site so that we can best provide an overview of options available – and update your site to support it.

Getting it ready for setup & testing.

Add a div that we can inject Mash into in the nav-bar
The div needs this attribute: data-mash-hub-target="true" . This will let us inject the Mash Hub into this container. I attached what it will like when loaded once the div exists
Update the primary Mash snippet to use the inline hub for vertical nav bars instead.

<script>
  window.MashSettings = {
    earnerID: "<REPLACE_WITH_EARNER_ID>",
    options: { hub: { position: "inline" }, reactions: { target: "attribute", enabled: true } },
  };
  var onMashScriptLoaded = function () {
    window.Mash.init();
  };
</script>
<script defer src="<https://cdn.mash.com/mash/mash.js>" onload="onMashScriptLoaded();"></script>