Steps to Install your Integration

1. Load mmob javascript snippet

On your web application, add this javascript snippet in the header of the page that will include the mmob deployment.

<!DOCTYPE html>
<html lang="en">
  <head>
    ...
    <script src="https://assets.mmob.com/js/mmob-snippet.min.js"></script>
  </head>
  ...
</html>

2.Place the container that will host the integration

HTML

First, add a target DOM element to your page. This is the containing element that the integration will be injected into. It will be loaded using an iFrame that will have width: 100% and height: 100%.

In the example below, we've created an empty div with the id #mmobIntegration, this will be our target div.

<main class="your-page">
  <div id="integration"></div>
</main>

CSS & Layout

You will have to control the integration size by styling your containing div.

Let's say for example you want to have your integration at full page width and height. You could style your container like so:

width: 100%;
height: 100vh;

and if you need to accommodate a header:

width: 100%;
height: calc(100vh - 70px); // For a header that is 70px in height.

3. Load the integration into the container

After the container, call the mmob snippet to load the integration.

Here's an example on how it looks like:

mmob.init({
  customerInfo: {
    email: customer email,
    first_name: 'Stephen',
    surname: 'Hayes',
    gender: 'male',
    title: 'Mr',
    building_number: '81',
    address_1: 'Miller Street',
    town_city: 'Hull',
    postcode: 'HG45BU',
    dob: '1968-05-30T21:12:22.275Z',
  },

  // integration configuration
  cp_id: 'cp_XXXXXXXXXXXXXXXXXXXXX',
  cp_deployment_id: 'cpd_XXXXXXXXXXXXXXXXXXXXX',
  location: '#integration',
  environment: 'stag', //only enter this information if your Implementation Specialist indicates to do so.
  marketplace_url: 'https://integration.YOUR_DOMAIN.TLD',
});
⚠️ Please ensure there is no trailing slash configured for your `marketplace_url` of choice. Your integration will not function if a trailing slash is configured in your URL.

⚠️ Note that the above is an example snippet. To configure the data snippet, you will need to remove the example data.

  • cp_id and cp_deployment_id will be provided to you

  • locale will be the user's preferred language

  • location is the id of the DOM object that will contain your integration

For anonymous users (users for whom you do not have a suitable GUID such as an email), **do not pass in a non-unique placeholder email.** Instead, ensure that the email field is left blank each time an anonymous user starts a journey.

Anonymous users

If you decide to not share any information about your users, you can still use the mmob integration. Make sure that the customer information is empty. mmob will then create a unique anonymous user for each user that starts a journey.

mmob.init({
  customerInfo: {},

  // integration configuration
  cp_id: "cp_XXXXXXXXXXXXXXXXXXXXX",
  cp_deployment_id: "cpd_XXXXXXXXXXXXXXXXXXXXX",
  location: "#integration",
  environment: 'stag', //only enter this information if your Implementation Specialist indicates to do so.
  marketplace_url: "https://integration.YOUR_DOMAIN.TLD",
});

Language selection

Integrations serve content using the locale en_GB by default. In order to change language you may pass an optional locale property:

mmob.init({
  customerInfo: userData,

  cp_id: "cp_XXXXXXXXXXXXXXXXXXXXX",
  cp_deployment_id: "cpd_XXXXXXXXXXXXXXXXXXXXX",
  locale: "en_GB",
  location: "#integration",
  environment: 'stag', //only enter this information if your Implementation Specialist indicates to do so.
  locale: "ms_MY", // request content in Malay language
  marketplace_url: "https://integration.YOUR_DOMAIN.TLD",
});

Note that not all products are translated to all languages. Be sure to contact our Customer Support to request translations in the language(s) you intend to use before using the locale parameter.

Contact us

Contact us at contact@mmob

Was this page helpful?

On this page