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',
  marketplace_url: 'https://integration.YOUR_DOMAIN.TLD',
});

⚠ 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
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',
  marketplace_url: 'https://integration.YOUR_DOMAIN.TLD',
});

Contact us

Was this page helpful?