> ## Documentation Index
> Fetch the complete documentation index at: https://docs.mx.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Embedded Spaces for Messaging Campaigns

> Run a Messaging campaign on your own website or app in an embedded space.

An embedded space is a designated banner or sidebar area on your app or website that displays the targeted content of a Messaging campaign. It defines the placement and dimensions of the message, not the message itself.

## Prerequisites

Running a Messaging campaign in an embedded space requires an API key from MX. If you didn't obtain one during the onboarding process, contact [Support](https://support.mx.com/).

## Creating an Embedded Space

To create an embedded space, log into the Intelligence Platform and navigate to **Messaging** > **Embedded Spaces**, then select the **Create a space** button and follow the prompts.

### Creating a Messaging Campaign for an Embedded Space

To create a Messaging campaign for an embedded space:

1. Log into the Intelligence Platform and navigate to **Messaging**.
2. Select the **Create Message** button.
3. Follow the prompts. When you reach the product selection screen, choose **Embedded**.
4. Continue following the prompts until finished.

## Using the Embedded Space Code

Embedded space code is the snippet of implementation code you add to your website to connect a page’s banner area to an embedded space. The campaign message can be loaded in any location able to access the MX `user_id` field.

If a message is located in multiple places, you need to maintain the same dimensions across locations.

If a user is targeted for multiple campaigns, they're displayed according to the priority that was set when you created the campaign.

The embedded space code is in HTML and JavaScript. Here's an example:

```html theme={null}
<!-- This script loads the MDAnalytics functionality -->
  <script
    type="text/javascript"
    src="https://analytics.moneydesktop.com/analytics.v1.js">
  </script>

<!-- This element is where the banner is injected -->
  <div id="targetedMXAd" style="text-align: center;" />

<!-- This script requests the ad for the user from MX -->
<script type="text/javascript">
  (function () {
    function load() {
      MDAnalytics.loadBanner({
        analytics_api_key: "IssuedByMX",
        user_id: "userIdFromRealTimeAPI",
        element_id: "targetedMXAd",
        default_banner_image_url: "urlOfDefaultImageToLoad",
        default_banner_url: "urlOfDefaultClickDestination",
        campaign_group_guid: "embeddedSpaceGuidFromDashboard",
      });
    }

    if (document.readyState === "loading") {
      document.addEventListener("DOMContentLoaded", load);
    } else {
      load();
    }
  })();
</script>
```

### Embedded Banner Target Fields

| Field name | Requirement | Description |
| - | - | - |
| `analytics_api_key` | Required | Unique API key that authenticates the request on the MX Platform. |
| `campaign_group_guid` | Required | Unique identifier of the campaign space or group that the banner belongs to. |
| `user_id` | Required | Unique ID that identifies the user. This value is created during user creation using MX APIs. |
| `element_id` | Required | Unique ID for a placeholder HTML element that will be replaced with the ad when loaded. |
| `default_banner_image_url` | Optional | The URL of the image banner ad that's loaded when no campaign is available to load. |
| `default_banner_url` | Optional | The destination URL that a user is directed to when they select the banner ad when no campaign is available to load. |