Embeddable designer loader · Browser

@openseat/cloud/designer

Embeds the OpenSeat layout designer in your admin page. The designer runs in a sandboxed iframe on OpenSeat's embed origin (EMBED_ORIGIN), which keeps its styles, scripts and session token apart from your page; this loader only creates that iframe and speaks postMessage protocol v1 with it.

No dependencies and nothing runs at import time, so it is safe to import during server rendering, and the built file is under 3 kB gzip. React users can use OpenSeatDesigner from @openseat/cloud/react.

1 function
7 interfaces
MIT

A separate entry point of @openseat/cloud with no dependencies of its own: it only creates the sandboxed designer iframe and talks to it.

depends on @openseat/adapter-rest, @openseat/booking, @openseat/core · peers @openseat/react, konva, react, react-dom

/

Import

import {
  mountDesigner,
} from "@openseat/cloud/designer";
import type {
  MountDesignerOptions,
  DesignerHandle,
} from "@openseat/cloud/designer";

Functions1

function

mountDesigner

Puts the designer for one session into el. Throws a TypeError for an invalid embedUrl, height or theme. Messages are posted only to the embed URL's origin and accepted only from that origin and this iframe's window.

function mountDesigner(
  el: HTMLElement,
  options: MountDesignerOptions,
): DesignerHandle;

Parameters

Parameter	Type	Description
`el`	`HTMLElement`
`options`	`MountDesignerOptions`

Returns

DesignerHandle

@openseat/cloud/src/designer/index.ts

Interfaces7

interface

DesignerError

Something went wrong. code is the designer's (for example DESIGNER_SESSION_EXPIRED), or TOKEN_REFRESH_FAILED when getToken rejected or did not return an os_ds_ token.

interface DesignerError

Members

Member	Type	Description
`code`	`string`
`message`	`string`

@openseat/cloud/src/designer/index.ts

interface

DesignerHandle

interface DesignerHandle

Members

Member	Type	Description
`save`method	`() => void`	Asks the designer to save. The result arrives in `onSaved` or `onError`.
`requestClose`method	`() => void`	Asks the designer to close; it confirms unsaved changes first and then calls `onClose`.
`setTheme`method	`(theme: DesignerTheme) => void`	Changes the theme. Throws a TypeError for an invalid accent or radius.
`destroy`method	`() => void`	Removes the iframe and stops listening. Unsaved changes are lost. Calling it twice is fine.

Every member is readonly.

@openseat/cloud/src/designer/index.ts

interface

DesignerLoaded

The layout is open in the designer.

interface DesignerLoaded

Members

Member	Type	Description
`layoutKey`	`string`
`revision`	`number`

@openseat/cloud/src/designer/index.ts

interface

DesignerReady

The designer has started for this session. layoutKey is null until a "create" session saves.

interface DesignerReady

Members

Member	Type	Description
`sessionId`	`string`
`layoutKey`	`string \| null`

@openseat/cloud/src/designer/index.ts

interface

DesignerSaved

A save went through: the layout is at revision and layout.updated has been sent to your webhooks.

interface DesignerSaved

Members

Member	Type	Description
`layoutKey`	`string`
`revision`	`number`
`seatCount`	`number`
`updatedAt`	`string`

@openseat/cloud/src/designer/index.ts

interface

DesignerTheme

Colours and corner radius for the designer's own chrome.

interface DesignerTheme

Members

Member	Type	Description
`accent`optional	`string`	`#rrggbb`.
`radius`optional	`number`	Pixels, 0 to 24.

@openseat/cloud/src/designer/index.ts

interface

MountDesignerOptions

interface MountDesignerOptions

Members

Member	Type	Description
`embedUrl`	`string`	The session's `embedUrl` exactly as minted (`https://<EMBED_ORIGIN>/embed/designer/dsn_…#os_ds_…`).
`getToken`optional	`() => Promise<string> \| string`	Called about two minutes before the session expires. Mint a new session on your server for the same layout and origin and resolve with its `token`; the designer switches to it without losing work. Without it the designer shows "This session has ended" when the session expires.
`height`optional	`number \| "auto"`	Pixels (200 to 10,000), or "auto" to follow the designer's own height. Default 640. Default `640`
`theme`optional	`DesignerTheme`
`onReady`optional	`(info: DesignerReady) => void`
`onLoaded`optional	`(info: DesignerLoaded) => void`
`onSaved`optional	`(info: DesignerSaved) => void`
`onDirty`optional	`(dirty: boolean) => void`	Whether the designer has unsaved changes.
`onClose`optional	`(info: { reason: string; }) => void`	The person pressed Done, or the designer closed after `requestClose()`. Remove the designer here.
`onError`optional	`(error: DesignerError) => void`

@openseat/cloud/src/designer/index.ts