Mantle App Bridge

The Mantle app bridge provides the following postMessage API to interact with the host Mantle application:

Message	Description
`mantle:bridge:setPagePrimaryAction`	Sets the primary action button on the page.
`mantle:bridge:setPage`	Sets various page elements like primary action, back action, title, subtitle, title metadata, width, and secondary actions.
`mantle:bridge:redirect`	Redirects the page to a new URL.
`mantle:bridge:fullPage`	Toggles the iframe to full page mode.
`mantle:bridge:toast`	Displays a toast message with a status (error or success).
`mantle:bridge:setPath`	Updates the browser's URL path.
`mantle:bridge:sessionRequest`	Requests the current session data and sends it back to the iframe.
`mantle:bridge:userRequest`	Requests the current user data and sends it back to the iframe.
`mantle:bridge:showSaveBar`	Shows the save bar on the page.
`mantle:bridge:hideSaveBar`	Hides the save bar on the page.
`mantle:bridge:setSaveBarOptions`	Sets options for the save bar.
`mantle:bridge:showAssetLibrary`	Shows the asset library modal.
`mantle:bridge:hideAssetLibrary`	Hides the asset library modal.
`mantle:bridge:hideModalBackgroundOverlay`	Hides the modal background overlay.
`mantle:bridge:showModalBackgroundOverlay`	Shows the modal background overlay.
`mantle:bridge:closeModal`	Sent to the extension window in cases where the modal should be closed.

React.js example

export const fetchSessionFromMantle = async () => {
  return new Promise((resolve, reject) => {
    window.parent.postMessage(
      {
        type: "mantle:bridge:sessionRequest",
      },
      targetOrigin
    );

    const receiveSessionMessage = (event) => {
      if (event.origin !== targetOrigin) {
        reject(new Error("Invalid origin"));
        return;
      }

      try {
        if (event.data?.type === "mantle:bridge:sessionResponse") {
          if (event.data?.error) {
            reject(new Error("Failed to load session"));
          } else {
            resolve(event.data);
          }
          window.removeEventListener("message", receiveSessionMessage);
        }
      } catch (e) {
        console.error("Invalid data received:", event.data);
        reject(new Error("Failed to load session"));
      }
    };

    window.addEventListener("message", receiveSessionMessage);
  });
};