# 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>
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.iheartjane.com/jane-docs/embeds/advanced-embedded-menu-options.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.