Designer API Reference

Constructor Options

`new SeatSquirrel.Designer(options)`

Shared Callbacks (Both Modes)

These options work in both standalone and iframe SDK modes.

Option	Type	Required	Description
`permissions`	`DesignerPermissions`	No	Restrict which features are enabled in the designer. Default: all features enabled.
`onReady`	`() => void`	No	Called when designer is ready.
`onLayoutLoaded`	`() => void`	No	Called when `loadLayout()` succeeds. Pure confirmation signal — no payload.
`onSave`	`(data: { layout:` `LayoutOutput` `}) => void`	No	Called when user clicks Save.
`onLayoutChanged`	`(data: { hasChanges: boolean }) => void`	No	Called when unsaved changes status changes.
`onPricingCategoriesChanged`	`(data: { hasChanges: boolean }) => void`	No	Called when pricing changes; call `getPricingCategories()` for data.
`onError`	`(error: { message: string, code: string, details?: string }) => void`	No	Called when an error occurs. See Error Codes below.
`ui`	`{ fullscreenButton?: boolean }`	No	UI configuration. `ui.fullscreenButton: false` hides the built-in fullscreen toggle. Default: `true`. You can still trigger fullscreen programmatically via `setFullscreen()` when the button is hidden.
`onFullscreenChange`	`(isFullscreen: boolean) => void`	No	Called whenever the designer enters or exits viewport-fill fullscreen.
`onRequestSectionContent`	`(sectionId: string) => SectionContent \| Promise<SectionContent>`	No	Sections only. Lazily provide one Section's contents when the user drills in to edit it. Required to edit sectioned layouts — without it, drilling into a section loaded from the parent layout is blocked (its host-stored contents are never wiped).
`onSaveSectionContent`	`(sectionId: string, content: SectionContent) => void \| Promise<void>`	No	Sections only. Persist one Section's edited contents to your per-section store. See when it fires below.
`onDeleteSectionContent`	`(sectionId: string) => void \| Promise<void>`	No	Sections only. Remove a deleted Section's content blob from your per-section store. Called on save for sections the user deleted. Without it, deleted sections leave orphaned blobs in your store.
`onSectionChange`	`(activeSectionId: string \| null) => void`	No	Sections only. Fires when the user drills into a Section (its id) or back to the parent (`null`).

Desktop only — The Designer requires a mouse or trackpad. On touch-only devices (phones, tablets without an external pointer), a "Desktop Required" screen is shown and onError fires with code MOBILE_NOT_SUPPORTED. The onReady callback will not fire and the API will not be available. Connecting an external mouse or trackpad to a tablet will allow the designer to initialize. Narrow screens (below 768px) are also blocked regardless of input device.

iFrame SDK Only

These options only apply when using the iframe SDK. They are not available in standalone mode.

Option	Type	Required	Description
`container`	`string \| HTMLElement`	Yes	CSS selector or DOM element for the iframe
`baseUrl`	`string`	No	Location of the SeatSquirrel app (default: `https://seatsquirrel.com`)
`designerUrl`	`string`	No	Full URL override for the designer page. Takes precedence over `baseUrl`. Useful for servers requiring `.html` extensions (e.g., `https://example.com/designer.html`)

Restricting Designer Features

Use the permissions option to control which tools and features are available in the designer.

Disable pricing category management

When you supply pricing categories from your external system, you typically want to prevent users from creating or modifying them:

Standalone mode (window.SeatSquirrelConfig):

window.SeatSquirrelConfig = {
  permissions: {
    properties: {
      pricingCategoriesCrud: false,
      settingsPanels: { currency: false },
    },
  },
  onReady: function () {
    SeatSquirrel.designer.setPricingCategories({
      mode: 'replace',
      pricingCategories: [
        { id: 'vip', label: 'VIP', slug: 'vip', price: 15000, color: '#8b5cf6' },
        { id: 'standard', label: 'Standard', slug: 'standard', price: 5000, color: '#3b82f6' },
      ],
    });
  },
  onSave: function (layout) {
    console.log('Layout saved:', layout);
  },
};

iFrame SDK mode (new SeatSquirrel.Designer()):

const designer = new SeatSquirrel.Designer({
  container: '#designer',
  permissions: {
    properties: {
      pricingCategoriesCrud: false,
      settingsPanels: { currency: false },
    },
  },
  onReady: () => {
    designer.setPricingCategories({
      mode: 'replace',
      pricingCategories: [
        { id: 'vip', label: 'VIP', slug: 'vip', price: 15000, color: '#8b5cf6' },
        { id: 'standard', label: 'Standard', slug: 'standard', price: 5000, color: '#3b82f6' },
      ],
    });
  },
});

Hide individual settings panels

The Settings tab contains five panels: Pricing Categories, Background, Display, Alignment, and Currency. Use properties.settingsPanels to hide any of them individually. Omitted panels stay visible, so you only list the ones you want hidden. When every panel is hidden, the Settings tab itself is hidden.

const designer = new SeatSquirrel.Designer({
  container: '#designer',
  permissions: {
    properties: {
      settingsPanels: {
        background: false,
        display: false,
        alignment: false,
        // pricingCategories and currency omitted → still visible
      },
    },
  },
});

Note: the Currency panel is shown only when settingsPanels.currency is not false. Editing within the Pricing Categories panel is still governed separately by pricingCategoriesCrud.

Read-only preview mode

// Standalone
window.SeatSquirrelConfig = {
  permissions: { readOnly: true },
};

// iFrame SDK
const designer = new SeatSquirrel.Designer({
  container: '#designer',
  permissions: { readOnly: true },
});

Assignment-only mode

Allows pricing category assignment while blocking all structural and visual edits:

Pricing category assignment remains enabled
Creating, moving, resizing, and deleting objects is disabled
Undo/redo, copy/paste, and destructive controls are hidden
Settings tab and category CRUD are disabled
Save and export remain available
Selected elements show greyed-out (non-editable) properties below the pricing editor
If both readOnly and assignmentOnly are true, readOnly takes precedence

// Standalone
window.SeatSquirrelConfig = {
  permissions: { assignmentOnly: true },
};

// iFrame SDK
const designer = new SeatSquirrel.Designer({
  container: '#designer',
  permissions: { assignmentOnly: true },
});

// Show greyed-out structural properties alongside the pricing panel for context
window.SeatSquirrelConfig = {
  permissions: {
    assignmentOnly: true,
    properties: { showProperties: true },
  },
};

Limit available tools

// Only allow rows and areas (hide tables, shapes, text, sections)

// Standalone
window.SeatSquirrelConfig = {
  permissions: {
    tools: {
      table: false,
      shape: false,
      text: false,
      traceImage: false,
      section: false,
    },
  },
};

// iFrame SDK
const designer = new SeatSquirrel.Designer({
  container: '#designer',
  permissions: {
    tools: {
      table: false,
      shape: false,
      text: false,
      traceImage: false,
      section: false,
    },
  },
});

Hide the Settings tab

// Standalone
window.SeatSquirrelConfig = {
  permissions: {
    properties: {
      settingsTab: false,
    },
  },
};

// iFrame SDK
const designer = new SeatSquirrel.Designer({
  container: '#designer',
  permissions: {
    properties: {
      settingsTab: false,
    },
  },
});

Suppress pricing category panel warning

Hide the amber "Missing Pricing Categories" warning box shown in the properties panel when nothing is selected:

// Standalone
window.SeatSquirrelConfig = {
  permissions: {
    warnings: {
      pricingCategoriesAssignmentPanelWarning: false,
    },
  },
};

// iFrame SDK
const designer = new SeatSquirrel.Designer({
  container: '#designer',
  permissions: {
    warnings: {
      pricingCategoriesAssignmentPanelWarning: false,
    },
  },
});

Methods

Summary

| Method | Parameters | Returns | | --------------------------------------------------------------------- | ------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------- | | loadLayout(layoutData) | layoutData: LayoutOutput | Standalone: { success: boolean }
iFrame: Promise<{ success: boolean }> | | getLayout({ mode }) | { mode: 'current' \| 'last-saved' } | Standalone: { layout: LayoutOutput \| null }
iFrame: Promise<{ layout: LayoutOutput \| null }> | | hasChanges() | — | { hasChanges: boolean } | | setPermissions(permissions) | DesignerPermissions | { success: boolean } | | clearLayout() | — | { success: boolean } | | setPricingCategories({ mode, ... }) | { mode, pricingCategories } | Standalone: { success: boolean }
iFrame: Promise<{ success: boolean }> | | getPricingCategories() | — | Standalone: { pricingCategories: PricingCategory[] }
iFrame: Promise<{ pricingCategories: PricingCategory[] }> | | assignPricingCategories(input) | AssignPricingCategoriesInput | Standalone: { success, errors? }
iFrame: Promise<{ success, errors? }> | | showToast(options) | ShowToastOptions | Standalone: { success: boolean }
iFrame: Promise<{ actionClicked: boolean }> | | showAlertDialog(options) | ShowAlertDialogOptions | { success: boolean } | | showNotice(options) | ShowNoticeOptions | { success: boolean, noticeId: string } | | removeNotice(noticeId) | string | { success: boolean } | | isDesignerReady() | — | { designerReady: boolean } | | setFullscreen(value) | boolean | { success: boolean } | | destroy() | — | void | iFrame SDK only |

Property	Type	Required	Description
`mode`	`'replace' \| 'update-by-id' \| 'update-by-slug'`	Yes	How to apply the pricing categories
`pricingCategories`	Array	Yes	Array of pricing category objects (shape depends on mode)

Property	Type	Required	Description
`id`	string	Yes	Unique identifier for the category
`label`	string	Yes	Display label (e.g., "VIP", "Standard")
`slug`	string	Yes	URL-friendly identifier
`price`	number	Yes	Price in cents (e.g., 15000 for $150)
`color`	string	Yes	Hex color code (e.g., "#8b5cf6")
`customerNotes`	string	No	Optional notes visible to customers

Property	Type	Required	Description
`id`	string	Yes	ID of the category to update (must match an existing category)
`label`	string	No	New display label
`slug`	string	No	New slug
`price`	number	No	New price in cents
`color`	string	No	New hex color code
`customerNotes`	string	No	New customer notes

Property	Type	Required	Description
`slug`	string	Yes	Slug of the category to match (used for lookup only, not merged)
`label`	string	No	New display label
`price`	number	No	New price in cents
`color`	string	No	New hex color code
`customerNotes`	string	No	New customer notes

On this page