Sharing Page

Sharing Page

You set your targets, gave your campaign a name and figured out what kind of reward you want to give out. Now the real work starts: integrating the Sharing Widget. The Sharing Widget is the core of your Referral Campaign and contains all the share functionality to enable your customers to be your brand promoters.

You have the total freedom to just embed the widget on any random (or every) page on your website, but from experience we can tell you that that doesn’t quite work. That’s why we recommend creating a great-looking stand-alone page (= Sharing Page) where the Sharing Widget will be embedded. Preferably use an URL that’s easy and obvious, like yoursite.com/vriendenvoordeel. Since not everyone is known with the concept of referral programs, having a page with just the Sharing Widget isn’t enough.

A good Sharing Page contains at least the following elements:

• A catchy slogan: for example, ‘Refer a friend and get €20!’

• A brief description of your Referral Campaign: explain briefly why you offer this to your customers.

• The reward for the Promoter and Referral: the reward should be clearly visible, so the Promoter can instantly see what’s in it for them and their friends.

• How the campaign works: preferably as short as possible and visualised (in 3 steps) describing broadly the campaign (1. Share with your friends, 2. Friend buys through your link, 3. Reward!).

• What the promoter needs to do: again, explain as short as possible how the promoter can share (1. Fill in your name and email, 2. Share through email, WhatsApp, Facebook or copy and share your personal link, 3. Friend becomes customer? Reward!)

Do’s

• Embed the widget on a coloured background or even an image (then we recommend to use a white background)
• Make the widget the hero of the page
• Place it above the fold
• Make it fun!

Don’ts

• Using a white or light background. The widget will not be noticable enough.
• Embedding the widget below the fold.
• Overwhelming amounts of text. Don’t assume your potential promoters will read it all. In most cases they will feel discouraged and give up.

In other words: don’t hide the widget! Someone that’s willing to promote you to their friends, shouldn’t spend much effort doing this.

Sharing Widget

What is the Sharing Widget?

Now you have set a great-looking Sharing Page, it’s time to embed the widget. With a small snippet of Javascript you can have a fully functional member get member platform embedded on your own website, completely in your look and feel. With this functionality you enable your existing customers to share the love for your brand and products with their friends. They simply share their personal referral link (or code) with one of the Sharing tools provided in the Sharing Widget: email, WhatsApp (web & app) or Facebook.

The setup is extremely easy, and once complete, it operates automatically. The Sharing Widget has some minimal CSS styling, but for the most part will take on the look and feel of your website. However, you are free to customize the widget by overwriting the CSS.

What is required for implementation?

This is done via a very simple piece of code (see below).

The Embed Code

The code itself is very simple. With no customized properties, it looks like this:

<div id="mgmco-widget"></div>
<script src="https://embedded.membergetmember.co/app.js"></script>
<script>
  MGMCo.init({
    // Get this from your friendly MGMCo dev or operations person
    project: "your-identifier",

    // This part controls where on the page the application will be mounted
    selector: "#mgmco-widget",
  });
</script>

Without further customization, the end result should look like this:

Before promoter registers

After promoter registers

Click here to learn how you can customize the widget appearance to fit your page exactly.

Widget Options

You can pass the following options to MGMCo.init() to control where the Sharing Widget is mounted, prefill promoter information, remember a promoter between visits, and respond to a successful login.

Option	Required	Default	Description
project	Yes	—	Your MGMCo project identifier.
selector	No	#mgmco-widget	The CSS selector for the element in which the widget will be mounted.
userName	No	Empty	Prefills the standard promoter name field.
userEmail	No	Empty	Prefills the standard promoter email field.
storeLoginInfo	No	true	Stores the submitted login information in the browser so the promoter can be recognized on a later visit.
onLoginComplete	No	—	Runs your callback function after the promoter has successfully logged in or registered.
pagename	No	sharing	Adds the page context to widget analytics. Accepted values are sharing, thankyou, and portal.

Example

MGMCo.init({
  project: "your-identifier",
  selector: "#mgmco-widget",
  userName: "Jane Doe",
  userEmail: "jane@example.com",
  storeLoginInfo: true,
  pagename: "sharing",
  onLoginComplete: ({ loginInfo, promoter }) => {
    console.log("Promoter logged in", promoter);
    console.log("Submitted login information", loginInfo);
  },
});

Prefilling promoter information

Use userName and userEmail when you already know the promoter and want to prefill the standard name and email fields. The promoter can still review or change these values before submitting the form. Additional Signup Fields cannot currently be prefilled through MGMCo.init().

Remembering the promoter

By default, storeLoginInfo is true. After a successful login or registration, the widget stores the complete submitted login information in the browser’s local storage. On a later visit in the same browser, the widget uses that information to log the promoter in again automatically. The stored information is removed when the promoter logs out.

Set storeLoginInfo to false if you do not want the widget to store this information or automatically restore the promoter login.

Responding to a completed login

Use onLoginComplete when your page needs to respond after the promoter has successfully logged in or registered. The callback also runs when a promoter is logged in again using information restored from local storage.

The callback receives the submitted loginInfo, including configured Signup Fields, and a promoter object containing the promoter ID, name, email address, share code, share link, and whether the promoter is new. The promoter ID and share code are also available separately as promoterId and shareCode.

This allows you to associate your own analytics events, such as the promoter’s clicks and other on-page behavior, with a stable promoter ID. You can later use that ID to correlate the analytics with promoter data exported from Campaign Manager.

Page context

Use pagename to identify the type of page on which the Sharing Widget is embedded. The accepted values are sharing, thankyou, and portal. This value is included with widget analytics events and does not change the widget’s appearance or behavior.

Share Link

The Share Link is the Promoter’s personal URL. The Sharing Widget creates it after the Promoter registers, and the Promoter shares it with friends using the configured Share Tools.

For example:

https://your-company.mgmco.nl/qwerty

In this example, your-company.mgmco.nl is the campaign’s configured share-link domain and qwerty is the Promoter’s unique six-character share code. Links created by individual Share Tools may include an additional channel suffix so MGMCo can identify how the link was shared.

When a friend opens the Share Link, MGMCo uses the share code to identify the Promoter, and then redirects the friend to the campaign’s configured Landing URL. The referral reward type determines which redirect flow and parameters are used.

For cash, manual and no-reward campaigns, MGMCo initializes a sale before the redirect and adds the reserved mgmco_saleid parameter to the Landing URL. A resulting redirect may look like this:

https://www.your-company.com/?mgmco_saleid=64f1c2...

Your website retains this ID through the sales funnel and returns it through the tracking integration, allowing MGMCo to connect the eventual purchase to the correct Promoter. Voucher campaigns do not include mgmco_saleid; their redirect parameters depend on the configured voucher flow and are described under Landing URL.

Promoter Webhook

The Promoter Webhook lets your system verify a new Promoter before MGMCo completes their registration and creates their Share Link. The submitted registration information, including any configured Login Fields, can be checked against your own customer data so that only known or eligible customers can participate in the campaign.

The webhook connection and its campaign configuration are managed by MGMCo. Promoter and Referral webhooks are configured independently and can use separate URLs on your backend. When the Promoter submits the registration form, the MGMCo API sends an HTTP POST request to the Promoter Webhook URL before finalizing the registration.

Webhook request

The request body contains the submitted name and email, together with the values of any additional Login Fields configured for the Sharing Widget. Your backend can use this information to decide whether the registration may proceed.

Webhook response

To allow the registration, respond with:

{
  "proceed": true
}

To reject the registration, respond with:

{
  "proceed": false,
  "message": "A message explaining why the registration was rejected"
}

When proceed is true, MGMCo completes the registration normally. When it is false, MGMCo stops the registration and displays the supplied message in the widget.

The optional Referral Webhook uses the same request and response contract.

Customize the Widget

Campaign Manager includes a Widget Editor for adapting the Sharing Widget to your website. Starting from the default widget, you can adjust its layout, fields, styling, sharing options and text to create an experience that fits naturally with your brand and the surrounding page.

The available customization areas are summarized below. The examples at the end show three different widgets before and after the Promoter registers.

Share Link Domain

Defines the domain and optional subdomain used for promoter share links. MGMCo manages this setting for you.

Layout Options

Controls the position of the registration button and share tools, and how field labels and validation errors are displayed.

Login Fields

Add, edit, validate, and arrange the fields promoters complete when registering or logging in to the Sharing Widget.

Styling: Custom Css

Add project-specific CSS to adjust the widget’s appearance and activate or deactivate those custom styles.

Share Tools

Choose and arrange the available sharing channels, and customize their labels and share messages.

Headers

Customize the headings, button labels, share-tools title, copy-link title, and logout text shown in the widget.

Share Link Preview

Configure the title, description, and image displayed when a platform generates a preview of a shared link.

Examples

Example 1 — Before promoter registers

Example 1 — After promoter registers

Example 2 — Before promoter registers

Example 2 — After promoter registers

Example 3 — Before promoter registers

Example 3 — After promoter registers