Installing the Mento Social Plugin

Step-by-Step Installation Guide

This guide provides detailed instructions on how to install the Mento Social Plugin on your website. Below you will find comprehensive explanations for each configuration variable involved in the setup process.

Provided Variables

Certain variables are provided by us when you sign up for the Mento Social Plugin:

  • mentoSecret: A unique secret key used to generate your MD5 hash.
  • mentoPanelId: Identifies a category or panel of questions relevant to your site.
  • mentoOrganizationName: The name associated with your customer account.

Variable Details

Each configuration variable plays a specific role in the functionality of the Mento Social Plugin:

  • window.mentoPanelId:

    This is the identifier for a panel which categorizes questions. A single customer can have multiple panels if they have different sites or different types of content. This value will initially be provided by us and can be configured in the customer portal at mento.social later.

  • window.mentoUserId:

    Your unique identifier for the logged-in user. This can be e.g. the logged in users subscription number and has to be unique. This ID helps the plugin to manage user sessions and interactions uniquely across sessions and make sure that e.g. one user only can answer a question one time.

  • window.mentoOrganizationName:

    Your customer name as registered with us. This is used to personalize the plugin experience to match your brand identity.

  • window.mentoSecretHash:

    An MD5 hash generated from your user ID, customer name, and a secret provided by us. This hash is used for security purposes to ensure that interactions with the plugin are authenticated and originate from your site.

  • window.mentoCustomCtaUrl (Optional):

    An optional URL to your subscribe page. If no user ID is provided and anonymous voting is disabled, the plugin will display a call to action encouraging users to subscribe to your service. This helps convert anonymous site visitors into registered users.

User Identification Logic

The Mento Social Plugin provides a personalized experience for both logged-in and anonymous users on your website. Here's how it works:

  • If a visitor is logged in: You must provide a unique identifier for the user in window.mentoUserId. This ID should be generated on the backend and be unique to each user (we recommend a UUID). Additionally, the MD5 hash must be calculated on the backend using this ID and the provided secret. The hash ensures secure communication between the plugin and your site and verifies user actions, allowing logged-in users to respond to questions.
  • If a visitor is not logged in: It's not necessary to include window.mentoUserId. Instead, the plugin will display a Call-to-Action (CTA) using the link provided in window.mentoCustomCtaUrl, prompting users to subscribe or log in to participate in the questionnaires. This is an effective way to encourage user engagement and convert visitors into registered users.

Step 1: Generate Your MD5 Hash

Generate an MD5 hash using your user ID, customer name, and your unique Mento secret. This can be done with the following script in a Node.js environment:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 import { MD5 } from "crypto-js"; // If you have logged in users export function generateMD5Hash(userId, organizationName, mentoSecret) { const combinedString = `${userId}${organizationName}${mentoSecret}`; const secretHash = MD5(combinedString).toString(); return secretHash; } // If you don't have login capabilities export function generateMD5Hash(organizationName, mentoSecret) { const combinedString = `${organizationName}${mentoSecret}`; const secretHash = MD5(combinedString).toString(); return secretHash; }

Unsure which script to use? If you have login capabilities on your site, then we should have configured your customer account to use the first script. If you don't have any login capabilities, then you should use the second script.

If you're unsure, please contact us at info@mento.social.

Step 2: Include the JavaScript in Your HTML

Add the script tags to your HTML as shown below, replacing placeholders with your data:

If you have login capabilities:

A: If the user is logged in

1 2 3 4 5 6 7 8 9 <script> window.mentoPanelId="your_panel_id"; // This ID categorizes questions into panels. Configurable later. window.mentoUserId="your_user_id"; // We recommend using a UUID for this. window.mentoOrganizationName="your_organization_name"; // Provided by us. window.mentoSecretHash="your_generated_md5_hash"; // Generate as instructed above. window.mentoCustomCtaUrl="your_custom_cta_url"; // Optional. Links to your subscribe page if user is not logged in. </script> <script src="https://www.mento.social/static/js/main.mento.js"></script>

B: If the user is NOT logged in

1 2 3 4 5 6 7 8 <script> window.mentoPanelId="your_panel_id"; // This ID categorizes questions into panels. Configurable later. window.mentoOrganizationName="your_organization_name"; // Provided by us. window.mentoSecretHash="not_logged_in"; // Add any hardcoded value here window.mentoCustomCtaUrl="your_custom_cta_url"; // Links to your subscribe page. </script> <script src="https://www.mento.social/static/js/main.mento.js"></script>

If you don't have login capabilities:

Always use this script:

1 2 3 4 5 6 7 8 <script> window.mentoPanelId="your_panel_id"; // This ID categorizes questions into panels. Configurable later. window.mentoOrganizationName="your_organization_name"; // Provided by us. window.mentoSecretHash="your_generated_md5_hash"; // Generate as instructed above. window.mentoCustomCtaUrl="your_custom_cta_url"; // Optional. Links to your subscribe page if user is not logged in. </script> <script src="https://www.mento.social/static/js/main.mento.js"></script>

If you're unsure, please contact us at info@mento.social.

Step 3: Verify the Installation

After installing, open your site and check the browser console for any errors. Ensure the plugin is functioning correctly.

Contact our support team for assistance if you encounter issues.

Next: Create a question