MeridianLand Group

For development teams

The plans on this site are embedded

Every interactive plan on meridianland.example is the RegalScene SDK mounted into an ordinary page. Your site only ever holds one value — a placement ID. Origin whitelisting, project binding, routing and attribution are all managed server-side by RegalScene.

React / ESM

The integration this site uses. npm package, React peer dependency, full lifecycle control.

Open full-page demo
import { createRegalSceneViewer } from "@regalscene/sdk";
import "@regalscene/sdk/styles.css";

// Resolve the placement in the browser — the resolver validates
// your site's Origin against the placement whitelist.
const res = await fetch(
  `${API_BASE}/engine/resolve/placements/plc_xxxxx`,
);
const config = await res.json();

const viewer = createRegalSceneViewer({
  ...config,
  container: document.getElementById("viewer"),
});

// Later — e.g. on route change:
viewer.destroy();

UMD script tag

One stylesheet, one script, one call. React is bundled — works on any stack.

Open full-page demo
<link rel="stylesheet" href="${SDK_BASE}/regalscene-sdk.css" />
<script src="${SDK_BASE}/regalscene-sdk.umd.js"></script>
<script>
  fetch(API_BASE + "/engine/resolve/placements/plc_xxxxx")
    .then((r) => r.json())
    .then((config) =>
      RegalScene.createViewer({
        ...config,
        container: document.getElementById("viewer"),
      }),
    );
</script>

Simple Embed

Two lines of HTML for CMS platforms. The loader resolves, styles and mounts everything.

Open full-page demo
<div
  class="regalscene-embed"
  data-placement-id="plc_xxxxx"
  data-api-base="https://api.regalscene.com/api"
  style="width:100%; height:700px;"
></div>
<script src="https://cdn.regalscene.com/sdk/<version>/embed.js"></script>

Validating an integration? Open the diagnostics surface — live SDK callbacks, the resolved placement payload and destroy/remount switching.