Integrating with the mmob React SDK

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

1. Install the mmob React SDK

To begin, add the mmob React SDK to your project.

npm install git+ssh://[email protected]:mmob-tech/mmob-react-sdk

To install a specific version you can pass the version tag:

npm install git+ssh://[email protected]:mmob-tech/mmob-react-sdk#1.0.15

Import the mmob React SDK

On the page that contains your integration, import the mob React SDK

import MMOB, { MMOBConfig } from 'mmob-react-sdk';

2. Create an MMOBConfig object

Create an MMOBConfig variable with the required properties. See React SDK reference

  const mmobConfig: MMOBConfig = {
    deployerId: "xxxxxxxxxx",
    integrationId: "xxxxxxxxxx",
    ownerId: "xxxxxxxxxx",
    viewId: "view_1",
    uid: props.email,
    initialLoadingAsset: {
      type: "spinner",
    },
  }

3. Creating the traget container

Adding the target container

Add an MMOB component in your project where the integration should appear.

Example:

  return <>
    <h1>Demo App</h1>
    <MMOB
      config={mmobConfig}
      domain="https://client-mc.enterprise.mmob.com"
    />
  </>

Styling the container

Note that the MMOB component returns a <div> that will mount the embedded application. You must define the container's size. You may pass any HTML prop/attribute you need to it to pass on to the underlying div. For example, you may pass a className or style:

  <MMOB
    config={mmobConfig}
    domain="https://client-mc.enterprise.mmob.com"
    className="embedded-app"
    style={{
      border: "2px solid red",
      width: "100%",
      height: "250px",
    }}
  />

For best practices on styling your integration container, including making it responsive and handling flexbox layouts, refer to Styling Embedded Application Containers.

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 component 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.

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
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 React SDK Reference.