> For the complete documentation index, see [llms.txt](https://docs.iheartjane.com/jane-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.iheartjane.com/jane-docs/embeds/advanced-embedded-menu-options.md).

# Advanced Embedded Menu Options

It is also possible to pass a few advanced options to Jane's embedded menus. Partners can use two `postMessage` APIs to:

1. Customize the look and feel of their embedded iFrame menus
2. Pass in user data to pre-populate the checkout form with the user’s data

### Menu Theming

```json
{
    "messageType": "initEmbeddedOptions",
    "payload": {
        "options": {
            "disableAuthFeatures": true,
            "theme": {
                "themeColor": "#4ba34b",
                "navigationColor": "#4ba34b",
                "ctaTextColor": "#ffffff",
                "font": {
                    "fontFamily": "d-din",
                    "url": "<https://fonturl.com/D-DIN.ttf>"
                },
                "calloutBackground": "#4ba34b",
                "calloutTextColor": "#ffffff",
                "buttonBorderRadius": "0px"
            }
        }
    }
}
```

### Auto-filling Customer Information on Checkout Page

```json
{
  "messageType": "setExternalUser",
  "payload": {
    "user": {
      "firstName": "Bob",
      "lastName": "Smith",
      "birthDate": "1997-06-19",
      "phone": "1234567890",
      "email": "bob@example.com",
      "externalId": "CUS1000005OM",
    },
    "headlessPartnerName": "Headless Partner Name",
    "headlessCheckoutPartnerId": '1234-5678-9012-3456',
  },
}
```

### Working Example

The following example uses the postMessage API to customize the look and set user information.

```javascript
<script>
  window.addEventListener("message", receiveMessage, false);

  var externalUserData = {
    "messageType": "setExternalUser",
    "payload": {
      "user": {
        "firstName": "Bob",
        "lastName": "Smith",
        "birthDate": "1997-06-19",
        "phone": "1234567890",
        "email": "bob@example.com",
        "externalId": "CUS1000005OM",
      },
      "headlessPartnerName": "Headless Partner Name",
      "headlessCheckoutPartnerId": '1234-5678-9012-3456',
    },
  };

  var embeddedOptionsData = {
    messageType: "initEmbeddedOptions",
    payload: {
      options: {
        disableAuthFeatures: true,
        theme: {
          themeColor: "#4ba34b",
          navigationColor: "#4ba34b",
          ctaTextColor: "#ffffff",
          font: {
            fontFamily: "d-din",
            url: "test.com"
          },
          calloutBackground: "#4ba34b",
          calloutTextColor: "#ffffff",
          buttonBorderRadius: "0px"
        }
      }
    }
  };

  function receiveMessage(event) {
    var payload = event.data && event.data.payload;
    var messageType = event.data && event.data.messageType;
    var frame = document.getElementById('jane-menu')

    if (messageType === "loadingEvent" && payload.name === "embeddedAppLoaded") {
      frame.contentWindow.postMessage(embeddedOptionsData, '*')
    }

    if (payload.name === "checkoutLoaded") {
      frame.contentWindow.postMessage(externalUserData, '*')
    }
  }
</script>
```

## Customizing Jane Boost

It is possible to use this technique to customize Jane Boost menus. You will need to edit the embed config, and paste your code in the **Page Head** section of your Boost Configuration. The main difference from the iFrame use case is that you will send the `postMessage` to the window object rather than to the iFrame.

### Working Example

```javascript
<script>
  window.addEventListener("message", receiveMessage, false);

  var embeddedOptionsData = {
    messageType: "initEmbeddedOptions",
    payload: {
      options: {
        theme: {
          themeColor: "#4ba34b",
          navigationColor: "#4ba34b",
          ctaTextColor: "#ffffff",
          font: {
            fontFamily: "d-din",
            url: "test.com"
          },
          calloutBackground: "#4ba34b",
          calloutTextColor: "#ffffff",
          buttonBorderRadius: "0px"
        }
      }
    }
  };

  function receiveMessage(event) {
    var payload = event.data && event.data.payload;
    var messageType = event.data && event.data.messageType;

    if (messageType === "loadingEvent" && payload.name === "embeddedAppLoaded") {
      window.postMessage(embeddedOptionsData, '*')
    }
  }
</script>
```