postMessage Protocol

All messages are JSON objects with a type discriminator. Schemas are validated in both directions; unknown messages are dropped.

Parent → iframe

mooni:config:update

Sent on iframe load and whenever a configurable attribute changes.

{
  type: "mooni:config:update",
  apiKey: string,
  theme?: "light" | "dark",
  language?: "ko" | "en",
  userId?: string,
  organizationId?: string,
}

sessionId is not part of this schema — it is generated and managed inside the iframe, so the host never needs to pass it.

mooni:visibility:changed

Notifies the iframe that the host toggled visibility. The iframe uses this to focus the input or pause activity.

{
  type: "mooni:visibility:changed",
  visible: boolean,
}

mooni:viewport:resize

Notifies the iframe of host viewport changes (for responsive layout decisions).

{
  type: "mooni:viewport:resize",
  width: number,
  height: number,
}

iframe → Parent

mooni:ready

First message after iframe boot. The host must respond with mooni:config:update before the iframe will function.

{ type: "mooni:ready" }

mooni:close

User clicked the in-iframe close button. Host should hide the widget.

{ type: "mooni:close" }

mooni:resize

Iframe content height changed. Host should update the iframe height to match.

{
  type: "mooni:resize",
  height: number,
}

Handshake Sequence

Reference Implementation

For most cases, the <mooni-frame> Web Component handles everything above for you. If you need a parent-side reference implementation, contact your integration contact.