Showroom Intro

Showroom Intro is a lightweight version of our interactive buyer experience built specifically for seamless integration on a builder’s website. The key differentiator is the robust customization capabilities that allow builders to tailor the look and feel to their brand. The result is a best-in-class sales tool to capture new leads with a compelling portrayal of each builder’s products, all directly on their website.

Note: This feature is in early/limited access. Please contact your Customer Success Manager if interested in enabling it for your account.

Accessing Showroom Intro

Admin, Sales Manager

Showroom Intro is available to be configured for both Master and Community Plans. To access it:

Choose a Master or Community plan.
Select the overflow menu.
Select Configure in Showroom Intro.

Customization

Global Settings

Use the Settings button at the top of the editor to access the global settings as it relates to the interface. From here, users could specify:

Primary Brand Color
1. Controls the color of buttons, highlights and links
Background Color
1. Controls the iFrame background color
Price Display
1. Hide or show price information for a specific community or for all plans in Showroom Intro.

Configuring Options

Use the Options button at the top of the editor to access the full list of all options that are included in the respective model. From here, users could explicit select which options to highlight that would be the most compelling for a potential homebuyer.

Interface

In addition to the global settings and options, users can select and directly manipulate the elements on the option panel as well. The editable parts of the interface are indicated with a dashed outline when hovering over them. This includes:

Updating the Call to action buttons
Updating the Plan Name
Reordering the list options
Adjusting the view mode of the Elevation & Palette options
Updating the option name, description, and thumbnails.

Previewing and Saving Changes

At any time during the editing of Showroom Intro, users can quickly preview their changes from the dropdown at the top of the editor, and select Preview mode. This will temporarily prevent all editing capabilities so you could easily preview what the final result is going to look like.

Once satisfied with the configuration of the showroom environment, click the Save Changes button to save next to the dropdown menu at the top of the editor. Clicking Discard will revert all changes made to the plan and start over, while the left and right arrow buttons could be used to undo and redo the most recent changes.

Embedding on a Website

There are three ways to add Showroom Intro to a website: Embed (recommended best practice), iFrame, or Linking.

Why Embed is recommended

The Embed method uses a lightbox overlay on your own page rather than an external redirect or a raw iframe. It is the best supported option and the only one with full analytics and mobile handling.

Website integration

Keeps visitors on your own domain, with your navigation and branding intact.
Consistent open and close behavior, so users can return to browsing after interacting.

Mobile support

Automatic device detection and experience optimization.
Opens in a new tab on iOS to manage memory constraints.
Responsive across screen sizes and consistent across mobile operating systems.

Performance

Background preloading starts the load on interaction, reducing perceived load time.
Avoids the SEO ranking impact associated with inline iframes.
Automatically receives the latest optimization patches through the hosted script.
Memory management reduces browser crashes through better resource allocation.

Analytics

Works with GA4 (gtag), Universal Analytics (ga), and Google Tag Manager (dataLayer).
Tracks floor plan opens, option selections, lead form submissions, and more.

Customization and Upkeep

Works with your existing buttons without modification.
Supports multiple buttons per page for different plans.
CSS variables for brand color matching.
Feature and performance updates arrive automatically, with no manual work from builders.

Method 1: Embed (recommended)

Embedding instructions live in the app. Open the editor and click the Embed button at the top to access the exact code snippets for a plan.

Step 1: Add the global script

This script only needs to be added once per site. It handles shared functionality like Google Analytics integration.

In the Embed dialog, copy the first script tag provided (the  block, which includes the <script> and <link> tags).
Paste it once into your website's <head> tag.

Step 2: Open a specific plan

To launch a specific plan in Showroom Intro, attach two properties to any clickable element (a button or a link):

data-higharc-plan-id (the plan's ID)
data-higharc-plan-type (for example, master_plans)

Example:

<button data-higharc-plan-id="k8E7M6Gp4rGyqRxp" data-higharc-plan-type="master_plans">
  Configure Home in 3D
</button>

On click, this opens the specified plan in Showroom Intro.

Using a CMS (for example Webflow)

If the site is built on a CMS:

Create a variable.
Set the variable to point to the specific plan.

Tips

You can add multiple buttons per page. They can share the same plan ID or use different ones, so Showroom Intro can be opened from anywhere on the site.
Each plan also has a direct link (found at the bottom of the Embed dialog) that can be used for QR codes, testing, and similar cases.

Method 2: iFrame

The iFrame method is the alternative to embedding. It launches Showroom Intro in a full-screen iframe from a button on the plan page.

Because embedding is the recommended path, iFrame is best reserved for cases where the Embed script cannot be added to the site. Note the tradeoffs above: iFrame does not get the background loading or automatic mobile new-tab behavior. It also gets no Google Analytics forwarding at all, since there is no Embed script on the page to receive Showroom's events and pass them to your GA.

Setup

Open the Embed dialog and copy the plan's direct link, found at the bottom under "Direct link to this plan's page."
Use that link as the src in an iframe tag on your page.

Example:

<iframe src="https://app.higharc.com/showroom/intro?builder_id=...&plan_id=..." allow="clipboard-write self https://app.higharc.com"></iframe>

Use the full link exactly as provided in the dialog, since it contains the plan and builder identifiers.

Method 3: Linking

Linking uses the same direct link, but instead of embedding it in an iframe you point a normal link or button at it. Clicking sends the visitor to the Showroom Intro page directly.

Setup

Open the Embed dialog and copy the plan's direct link, found at the bottom under "Direct link to this plan's page."
Use that link as the href on any link or button.

Example:

<a href="https://app.higharc.com/showroom/intro?builder_id=...&plan_id=...">
  Configure Home in 3D
</a>

This is the simplest option and works anywhere a link does, including QR codes. Like the iFrame method, it does not include background preloading or Google Analytics forwarding, and it sends the visitor away from your page rather than keeping them on it.

After setup, verify the integration:

Go to your website and navigate to a plan page.
Click the "Customize in 3D" button (or similarly named button).
Confirm Showroom Intro launches full screen.
Test the core interactions to confirm content and behavior are correct:
- Choosing options
- Configuring and saving a home
- Copying and sharing a link
- Navigating back to your website

Google Analytics

Analytics forwarding applies to the Embed method only. The iFrame and Linking methods do not forward events to your GA.

How the integration works

The Embed script forwards Showroom events to your own Google Analytics. It does not set up or inject analytics for you. It only sends events to whatever you already have running on the page.

You must already have GA or GTM installed. If no analytics is present on the page, Showroom events have nowhere to go.
The script detects your setup automatically and uses it, in this order of preference: GA4 (gtag), then Universal Analytics (ga), then Google Tag Manager (dataLayer).
Events show up in the same account as the rest of your site traffic, so no separate Showroom property is needed.

Two caveats to plan for:

iOS opens in a new tab, not an iframe. On iOS, only the showroom-intro:opened event reaches your GA. The events that happen inside Showroom (option selections, viewer changes, and so on) do not, because there is no parent page to report them back to.
GTM users must map triggers manually. These are custom event names, not standard GA4 recommended events, so they will not appear in reports until you create matching triggers in GTM.

To confirm events are firing, open your browser console on a page with the embed script and run:

console.log(window.showroom.events);

This lists every event Showroom has recorded, along with plan metadata, even if no GA is installed.

Events reference

Event	When it fires
`showroom-intro:opened`	User opens Showroom (button click)
`showroom-intro:loaded`	Showroom Intro finishes loading
`showroom-intro:selected option`	User picks an option
`showroom-intro:clicked CTA`	User opens the CTA modal
`showroom-intro:submitted CTA`	User submits the CTA form
`showroom-intro:clicked share button`	User clicks share
`showroom-intro:changed viewer - 3d`	Switches to 3D view
`showroom-intro:changed viewer - exterior`	Switches to exterior view
`showroom-intro:changed viewer - interior`	Switches to interior view
`showroom-intro:changed viewer - sales image`	Switches to sales image view
`showroom-intro:changed viewer - floorplan`	Switches to floor plan view
`showroom-intro:closed`	User closes Showroom

Events carry plan and context details (such as plan name, community, and builder). Option selections include the chosen option, and CTA submissions include the form fields the customer entered.