---
schema_version: "1"
id: 078497a7a132159d5e154bf03507e3aa205ce4d4aa689a73238fa87089e4cc15
title: Load a Custom UI for Your Activity
collection: developer
version: current
locale: en-us
portal_url: https://docs.salesforce.com/developer/current/en-us/marketing-cloud/guides/mc-app-development/load-custom-activity-ui.md
canonical_url: https://developer.salesforce.com/docs/marketing/marketing-cloud/guide/load-custom-activity-ui.html
source_site: developer.salesforce.com
content_type: documentation
content_hash: 0bc696aa4fd44e375bdddddc4ec7347b2f7f5fa09b2f5653989ab8c3af9015da
products:
  - Marketing Cloud Engagement APIs and Programmatic Languages
  - Marketing Cloud
---
# Load a Custom UI for Your Activity

Custom hover UIs are used to display information. While a journey is in running mode, you can configure a custom hover UI to load for an activity. This hover UI is optional and appears only if there’s a `userInterfaces.runningHover` object in the config.json. The hover UI contains an iframe that loads the URL that the `runningHover` object specifies.

![A custom hover displaying on an Entry Event.](https://developer.salesforce.com/docs/media/images/jb-custom-running-hover.gif)

To define default outcomes, define `runningHover` and `runningModal` in the activity's config.json under the `userInterfaces` object.

## Sample

<!-- Moved Gist inline (mc-doc/827a27c9565f11d8eb5685120878580f) -->

```json
"userInterfaces": {
    "configModal": {
        "height": 200,
        "width": 300
    },
    "runningModal": {
        "url": "runningModal.html"
    },
    "runningHover": {
        "url": "runningHover.html"
    }
}
```

## More Details Button

The hover UI contains a button labeled More Details, which closes the hover and opens a larger modal element. This modal contains an iframe that loads the URL specified in the `runningModal` object. The iframe supports Postmonger's `destroy` event. Users click the **X** that is shown by default to exit. If you provide a button, such as a Cancel button, along with the modal's default close method, Postmonger's `destroy` event closes the iframe when the user clicks **Cancel** or **X**.

You can’t hide the More Details button, but you can customize the text by setting a `runningHoverButtonLabel` in the config.json's `lang` object.

## Dynamic URLs for the Hover and Modal

Both the `runningHover` and `runningModal` URLs load inside an iframe, so any JavaScript you run within the iframe works. You can make dynamic decisions about what to show or hide either from the server hosting the URL, or by using JavaScript in the browser. While the URLs are static, you can make them dynamic by pointing them at a server resource that redirects the iframe.

## Interacting with the Hover and Modal via Postmonger

Interacting with a hover UI and modal using Postmonger events works just as it does for activities, but with limited interactivity. For example, you can't use the `updateActivity` method or its equivalent.

Hover UIs and modals are initialized by calling their respective context-dependent initialization Postmonger events.

## Hover and Modal Iframe Dimensions

- The running hover's iframe is 200 px x 243 px.

- The running modal's iframe is 420 px x 560 px.

**note:** iframe dimensions can’t be resized.

## Related Items

[Postmonger Events Reference](https://developer.salesforce.com/docs/marketing/marketing-cloud/guide/using-postmonger.md)