IFrame integration

This guide explains how to integrate the HAUT.ai Skin Consultant into your website using an iframe and how to forward HAUT-generated events to Google Analytics (GA4).

1️⃣ Google Analytics Event Listener

(Required for GA tracking)

This script listens for postMessage events sent from the HAUT.ai iframe and forwards specific events to Google Analytics (gtag).

Script

<script type="text/javascript">
	(function () {
		"use strict";

		window.addEventListener(
			"message",
			function (event) {
				// Accept messages only from HAUT.ai SaaS domain
				if (event.origin !== "https://saas.haut.ai") return;

				var data = event.data;

				if (
					data &&
					data.type === "haut_ga_event" &&
					data.payload &&
					typeof window.gtag === "function"
				) {
					window.gtag(
						"event",
						data.payload.name,
						data.payload.options || {}
					);
				}
			},
			false
		);
	})();
</script>

How it works

• The HAUT iframe sends events via postMessage

• The script listens for those messages

• If the event type is haut_ga_event, it forwards the event to Google Analytics

• Events are sent using:

  • payload.name → GA event name

  • payload.options → GA event parameters

2️⃣ Option A — Simple iframe Integration

Replace IFRAME_URL with the actual environment-specific HAUT URL. The URL location can be found at the bottom of the page.

<iframe
	frameborder="0"
	style="width: 100%; height: 80vh;"
	allow="camera; microphone; web-share"
	src="IFRAME_URL"
></iframe>

Notes:

• width: 100% — full container width (can be customize)

• height: 80vh — 80% of viewport height (can be customize)

• allow permissions are required for:

  • camera access

  • microphone access

  • web sharing

3️⃣ Option B — Script-Based iframe Injection (Recommended)

This approach dynamically injects the iframe into a specific container. The location of the script can be found in the screenshot below. It is in the integrations section of the skin consultant settings.

<script	data-integration="iframe"...

---

Copy the integration script from the HAUT SaaS Integrations section and place it on your page.

Requirement:

Make sure the page contains the target container:

<div id="iframe-window"></div>