Showroom Plan Viewer API

Embed Showroom without any of Higharc’s controls and use JavaScript to update Option choices.

First, follow the same best practices documented in the Public Links article to embed Showroom on your web page. Once Showroom is embedded, the following is available to you, via the postMessage API — https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage

Getting Started

Embed a Showroom Public Link on your website, passing the additional showroomPlanViewerOnly=true query parameter (case sensitive!) to an existing Public Link. This will strip the Showroom interface down to the Plan Viewer and associated controls.
Set up event listeners for communication between the iframe and its parent window. The iframe will have the ID #higharc-showroom. Example:

document.addEventListener('DOMContentLoaded', function () {
  const showroom = document.getElementById('higharc-showroom');

  window.addEventListener('message', function (e) {
    const message = JSON.parse(e.data);
    console.log("Received message from Higharc: " + message); // Do something with the received data
  });

  // An example of how to send a message to the iframe
  document.getElementById("submit-plan-button").addEventListener("click", function () {
    const message = {
      channel: "HIGHARC",
      messageType: "SHOWROOM:SUBMIT_HOME_PLAN",
    };

    showroom.contentWindow.postMessage(message, "*");
  });
});

Update Options

To notify Showroom to update an Option, you can either pass in the Higharc-standard Option Set ID + Option ID combination, or use Option IDs by themselves.

In this example, pass in the Option Set ID with the Option ID you want to select.

{
  channel: "HIGHARC",
  messageType: "SHOWROOM:UPDATE_OPTION_CHOICES",
  data: {
    "optionSets": { // Key-value pairs of the form Option Set ID -> Option ID
      "FIREPLACE": "FIRE01",
      ...
    }
  },
}

Method 2: Option ID-only

In the following example, pass along the Option ID with true to set the parent Option Set to that Option, or false to reset to base. Things of note:

Make sure your Builder Option ID fields in Studio are unique values. Otherwise, the Showroom API will not know which Option Set to modify, and it will pick the first one it finds.
If your default/base Options do not have an ID associated with them, simply pass along false to an Option with an ID in the same Option Set.

{
  channel: "HIGHARC",
  messageType: "SHOWROOM:UPDATE_OPTION_CHOICES",
  data: {
    "options": { // Key-value pairs of the form Option ID + true/false
      "FIRE01": true, // sets the FIREPLACE option to FIRE01
      "PORCH02": false, // resets the PORCH option to its default value
      ...
    }
  },
}

Listen for Options Updates

When Option choices are changed in Showroom, the latest set of choices will be broadcast back to the parent window in a message structured as follows:

{
  channel: "HIGHARC",
  messageType: "SHOWROOM:OPTION_CHOICES_UPDATED",
  data: { // Key-value pairs of the form Option Set ID -> Option ID
    "FIREPLACE": "FIRE01",
    ...
  },
}

Submit a New Home Plan

Trigger a pop-up form for the customer to fill out their info and save their plan by sending this message:

{
  channel: "HIGHARC",
  messageType: "SHOWROOM:SUBMIT_HOME_PLAN",
}

After the plan is submitted, the normal redirection to the newly-created plan and notification to the customer will commence, as with a normal Showroom Public Link.

The required fields in this CTA form can be customized in Account Settings > Sales > Customer Information.