Configuration

`<mooni-frame>` Attributes

Attribute	Type	Required	Default	Description
`api-key`	string	✅	—	Tenant API key. Sent as `mooni-api-key` header on every request.
`theme`	`"light" \| "dark"`	optional	`"light"`	Color theme.
`lang`	`"ko" \| "en"`	optional	`"ko"`	UI language.
`user-id`	string	optional	—	External user identifier. Forwarded to admin so staff can group sessions per user. Absent → anonymous session.
`organization-id`	string	optional	—	Organization identifier. When set, only that organization's FAQs are searched; when omitted, the search covers the tenant's entire FAQ set. Used when a single tenant serves multiple organizations.

All attributes can also be set imperatively:

const el = document.querySelector('mooni-frame');
el.apiKey = 'mooni_xxx';
el.theme = 'dark';
el.userId = 'user@example.com';

`<mooni-button>` Attributes

Attribute	Type	Default	Description
`position`	`"bottom-right" \| "bottom-left" \| "top-right" \| "top-left"`	`"bottom-right"`	Fixed-position corner.

The button toggles the sibling <mooni-frame> element's visibility. Place both inside the same parent.

User & Session Identification

Mooni distinguishes two identifiers:

user-id — provided by you (host site). Persists user across sessions for admin-side grouping.
sessionId — generated and managed inside the iframe. You do not need to pass or manage it. Same browser → same session.

Without user-id, sessions are still tracked but appear as anonymous in the admin.

Multi-Organization Setup

If your tenant has multiple organizations (e.g. an academy that runs several schools), configure organizations in the tenant config and pass the relevant organization-id per page:

<!-- School A pages -->
<mooni-frame api-key="..." organization-id="school-a"></mooni-frame>

<!-- School B pages -->
<mooni-frame api-key="..." organization-id="school-b"></mooni-frame>

When organization-id is set, only that organization's FAQs appear in search results, and FAQs not assigned to a specific organization are excluded. When organization-id is omitted, no filter is applied — the search covers the tenant's entire FAQ set.

Theming

Mooni ships with light and dark themes. Switch dynamically:

document.querySelector('mooni-frame').theme = 'dark';

The change applies immediately, without a reload.

Language

Supported: ko (default), en.

<mooni-frame lang="en" ...></mooni-frame>

Switching lang after mount also applies immediately.

Tenant Provisioning Checklist

Before going live, verify with us:

API key issued (you receive a mooni_… key)
Organization IDs configured (if multi-organization)
Out-of-scope fallback message reviewed
Search sensitivity reviewed (tuned together with your contact)

<mooni-frame> Attributes

<mooni-button> Attributes