reimaginehome-widget

Embeddable ReimagineHome widget — AI-powered virtual staging for any website. This package is the loader: a tiny client that creates a session, opens the hosted iframe app, and bridges config to it. The heavy UI runs in the hosted iframe, so this package stays small (no UI bundle).

You can use it two ways:

1. npm module (this package) — import it into your app/bundler.
2. CDN <script> — drop in a single widget.js file (no build step).

Install

npm install reimaginehome-widget

Usage (npm)

import { reihWidget } from "reimaginehome-widget";

// Set persistent config once (e.g. on app start)
reihWidget.configure({
  public_key: "ppk_live_xxx",
  branding: { heading: "Reimagine Your Space" },
});

// Open the widget (per-launch overrides allowed)
await reihWidget.open({
  media: [{ image_url: "https://example.com/room.jpg" }],
  mode: "simple",
  onError: (e) => console.error(e.message, e.code),
  onClose: () => console.log("closed"),
});

// Other controls
reihWidget.close();   // hide modal, keep session
reihWidget.destroy(); // tear down completely

Import styles

The API is exposed three ways — all equivalent, pick what suits your codebase:

// 1. Namespaced object (recommended)
import { reihWidget } from "reimaginehome-widget";
reihWidget.open();

// 2. Named functions
import { open, close, configure, destroy } from "reimaginehome-widget";
open();

// 3. Default export (same instance as #1)
import reihWidget from "reimaginehome-widget";

Which should you use? We recommend the namespaced object (reihWidget.open()). The method names open/close are intentionally generic, so as standalone named imports they can read ambiguously (next to window.open) and collide with other libraries — you'd often need import { open as openWidget }. The namespaced form is self-documenting at the call site and collision-proof, which is the common convention for embeddable SDKs. The named exports remain available if you prefer them.

TypeScript

Types ship with the package — no @types needed:

import type { WidgetConfig, MediaItem, WidgetBranding } from "reimaginehome-widget";

Config

| Field | Type | Required | Notes | | ------------------ | ----------------- | -------- | ------------------------------------------- | | public_key | string | yes | Your publishable key | | media | MediaItem[] | yes | Non-empty; each needs image_url | | mode | "simple" | no | Defaults to "simple" | | branding | WidgetBranding | no | Logo, heading, colors, typography, sections | | language | string | no | BCP 47 locale code, e.g. "en-US" | | sidebar_position | "left"\|"right" | no | Sidebar side. Defaults to "right" | | user_id | string | no | Your own analytics id | | listing_id | string | no | Your own listing id (echoed in events) | | session_id | string | no | Your own reference id (not our session) | | onError | (err) => void | no | { message, code? } | | onClose | () => void | no | Fired when the modal closes |

Usage (CDN <script>)

No build step — the package also ships a prebuilt IIFE that attaches window.reihWidget. Serve dist/widget.js from your CDN, or load it from a package CDN:

<script>
  window.reihWidgetConfig = {
    media: [{ image_url: "https://example.com/room.jpg" }],
  };
</script>
<script async
  src="https://cdn.jsdelivr.net/npm/reimaginehome-widget/dist/widget.js"
  data-public-key="ppk_live_xxx"></script>

<button onclick="reihWidget.open()">Reimagine</button>

Scalar values can also be passed as data-* attributes: data-public-key, data-mode, data-user-id, data-session-id. Arrays/objects/functions (media, branding, callbacks) must go through window.reihWidgetConfig, reihWidget.configure(), or reihWidget.open().

How it works

Host app
  │  configure() / open(overrides)
  ▼
reihWidget (this package)
  ├─ POST /v1/public/session  →  backend returns session_id
  ├─ Creates an iframe at the hosted app
  └─ Sends config via postMessage once the app signals ready
                                  ▼
                           Hosted widget app (iframe)

Because the UI is hosted, you get updates without re-publishing this package.