Embedding the Viewer
The Viewer is a web app you embed in an iframe. It loads a recipe and shows that garment for orbit, zoom, reset, and optional idle rotate. There is no graphics panel, colorway switch, Save & Exit, or parent-message API. For editing graphics in the page, use Embedding the Customizer.
<iframe
src="https://viewer.seddi.app/?api_key=API_KEY&recipe_url=https%3A%2F%2Fstorage.googleapis.com%2Fbucket%2Frecipe.json"
title="Seddi Viewer"
style="width: 100%; height: 100%; border: 0;"
></iframe>
Give the iframe a real height. The app fills its frame.
api_key is a query parameter, so it is visible in the iframe URL and to anyone who can see that URL.
Recipe URL
recipe_url is the URL-encoded https address of the recipe JSON.
The URL must be https on port 443, with no username or password, and a public host. localhost and private addresses are rejected. Seddi downloads the file itself and does not send the caller's API key or other credentials to that host.
Graphics already on the recipe are drawn in the scene. The Viewer does not let the shopper edit them.
A load calls POST /viewer-scene-generator/v1. The API key must allow that path.
Query parameters
| Parameter | Values | Default | Effect |
|---|---|---|---|
api_key | string | — | Required. Sent as x-api-key on every API request from the frame. |
recipe_url | URL-encoded https URL | — | Required. Public https URL of the recipe on port 443, with no userinfo. |
idle | static, rotate | static | rotate turns the garment when the viewer is idle. |
controls_layout | tl, tr, bl, br | tl | Corner for the viewer controls: top-left, top-right, bottom-left, or bottom-right. |
controls_style | URI-encoded JSON | unset | Colors for the viewer controls. Invalid JSON is ignored. |
controls_style accepts #rgb or #rrggbb for these keys:
| Key | Alias | What it colors |
|---|---|---|
t | textColor | Control text |
bg | backgroundColor | Control background |
bd | borderColor | Control border |
controls_style=%7B%22bg%22%3A%22%23111827%22%2C%22t%22%3A%22%23ffffff%22%2C%22bd%22%3A%22%23334155%22%7D
That value is {"bg":"#111827","t":"#ffffff","bd":"#334155"}.
The Viewer does not read parent_origin, logos, or units, and it does not listen for postMessage. Change layout, idle, or control colors by setting those query parameters on the iframe URL.
Enter an API key and an https recipe URL, choose idle and control corner, then press Load. The frame rebuilds from those query parameters. It does not listen for parent messages.