Integrating with the mmob Web SDK

This guide walks you through the process of embedding an mmob integration into your web application. By following these steps, you'll load the mmob SDK, define a target container, and inject your integration seamlessly.

1. Load the mmob JavaScript SDK

To begin, you need to load the mmob SDK in your application. This allows your embedded integration to function properly.

Adding the script

Include the mmob JavaScript snippet inside the <head> section of your webpage to ensure it loads before your integration runs:

Example

<!DOCTYPE html>  
<html lang="en">  
  <head>  
    ...  
    <script src="https://YOUR.APPLICATION.DOMAIN/snippet.min.js"></script>  
  </head>  
  ...  
</html>

Multi-tenant vs. Single-tenant

The source URL of the script depends on your plan type:

Multi-tenant: https://enterprise-client.dev.mmob.com/snippet.min.js
Single-tenant: https://YOUR.APPLICATION.DOMAIN/snippet.min.js - This is your domain; replace it with your own.

Make sure to use the correct URL to ensure the SDK loads properly.

2. Add a container for the integration

Your integration needs a designated area on your webpage where it will be injected.

Adding the target container

Place an empty <div> element in your HTML where the integration should appear.

Example:

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

Styling the container

Since the embedded integration loads inside an iframe, you must define the container's size.

Example: Full-screen integration

width: 100%;
height: 100vh;

Example: Fixed-size integration

width: 600px;
height: 800px;

Full-screen is useful when the integration is the main focus of the page.
Fixed-size works best when embedding the integration within an existing layout.

3. Load the integration

Once your container is in place, use the mmob snippet to inject your integration dynamically.

Initialising the integration

Call mmob.init() to load the integration inside the target container.

Example:

mmob.init({
  deployer_id: "dr_ABC12345",
  integration_id: "cpd_XYZ67890",
  location: "#mmob-integration",
  view_id: "view_default",
  uid: "user-123456",
});

Key parameters

deployer_id – Identifies the deployer of the embedded application.
integration_id – Specifies the integration instance being loaded.
location – The selector for the target container where the integration will be injected.
view_id – The initial view the user will see when the integration loads.
uid – A unique user identifier to persist sessions. See Managing user sessions

4. Testing and troubleshooting

Checking the integration

Once you have added the mmob snippet and configured the parameters, refresh your webpage. The integration should appear inside the target container.

If it does not load:

Check the browser console for errors.
Verify the location parameter matches the correct container id / class name or element reference.
Ensure the SDK is loaded before calling mmob.init().

Debugging common issues

Issue	Possible Cause	Solution
The integration does not appear	The `location` ID is incorrect	Ensure the `location` parameter matches the container's ID
"mmob is not defined" error	The SDK is not loaded before calling `mmob.init()`	Move the script inside the `<head>` section
The integration resets on refresh	The `uid` is missing or not persistent	Use a unique and consistent `uid` for each user

For further information or troubleshooting, refer to the Web SDK