Plain iframe

Using widget.js is recommended; but in environments where you cannot run scripts (some CMSs or restricted editors that do not allow scripts), you can also embed the embed page directly with an iframe.

<iframe
  src="https://mirac-ozdemir.com/en/embed/kdv"
  title="VAT calculator"
  width="100%"
  height="520"
  style="border:0;display:block"
  loading="lazy"
  referrerpolicy="strict-origin-when-cross-origin"
  sandbox="allow-scripts allow-same-origin allow-forms allow-popups allow-popups-to-escape-sandbox"
></iframe>

Address format

https://mirac-ozdemir.com/{locale}/embed/{key}?theme=…&header=…&id=…&accent=…&radius=…&density=…&view=…&autorun=1&i.field=value

Part	Values	Default	Description
`{locale}`	`tr`, `en`		Interface language (part of the path).
`{key}`	Tool key		The `key` in the catalog. `kit` is a reserved name (see below).
`theme`	`light`, `dark`, `auto`	`auto`	`auto` follows the system theme. (`inherit` exists only in the loader; with a plain iframe, resolve your page’s theme yourself and pass `light`/`dark`.)
`header`	`0` or `1`	`1`	`0` hides the title.
`id`	`[A-Za-z0-9_-]`, 1–64 characters	none	Opaque identifier; sent back unchanged in every message and required for command messages.
`view`	`full`, `result`	`full`	`result` shows only the result panel (inputs hidden); needs prefilled inputs and implies `autorun`.
`accent`	6 hex digits, without `#`	site colour	Primary colour (`0a7d5a`). The text colour on it is derived from its luminance.
`radius`	`none`, `sm`, `md`, `lg`	`md`	Corner radius.
`density`	`comfortable`, `compact`	`comfortable`	Spacing scale.
`autorun`	`1`	off	Calculates right after the inputs are applied.
`i.<field>`	canonical value	none	Prefilled input. `<field>` matches `^[a-z][A-Za-z0-9_]{0,63}$`; at most 50 fields, value ≤ 64 characters. Decimals `"1234.56"`, booleans `true`/`false`, enum keys, dates `YYYY-MM-DD`. Unknown fields and invalid values are ignored.

<iframe
  src="https://mirac-ozdemir.com/en/embed/kdv?theme=dark&accent=0a7d5a&radius=lg&i.amount=1000&i.mode=exclusive&autorun=1&id=kdv-1"
  title="VAT calculator"
  width="100%"
  height="520"
  style="border:0;display:block"
  sandbox="allow-scripts allow-same-origin allow-forms allow-popups allow-popups-to-escape-sandbox"
></iframe>

Search and category pages

https://mirac-ozdemir.com/{locale}/embed/kit/search?target=event&category=kdv
https://mirac-ozdemir.com/{locale}/embed/kit/category/{categoryKey}?target=event

These pages accept theme, header, id, accent, radius, density and target (_blank or event); search also takes category. Details: Widget kinds. There is no _top value for target.

This address format and its parameters are part of the public contract (versioning policy).

Managing height

With a plain iframe you set the height yourself by listening to postMessage messages. The embed page sends ready and resize messages:

<iframe id="mo-widget" src="https://mirac-ozdemir.com/en/embed/kdv?id=mo-widget" width="100%" height="480" style="border:0;display:block"></iframe>

<script>
  const ORIGIN = 'https://mirac-ozdemir.com';
  const frame = document.getElementById('mo-widget');

  window.addEventListener('message', (event) => {
    // Sender: our origin and this iframe.
    if (event.origin !== ORIGIN || event.source !== frame.contentWindow) return;
    const message = event.data;
    if (!message || message.source !== 'mirac-ozdemir-widget' || message.version !== 1) return;

    if (message.type === 'ready' || message.type === 'resize') {
      frame.style.height = Math.min(10000, Math.max(120, message.height)) + 'px';
    }
    if (message.type === 'result') console.log(message.data.result, message.inputs);
    if (message.type === 'error') console.warn(message.error.code, message.error.fields);
  });
</script>

The full message format: Events and message protocol.

Driving the iframe with commands

You can send commands to a plain iframe as well: to change presentation options such as theme/density, fill the inputs, trigger a calculation or reset the form, post a message from the parent window to the iframe with postMessage. The embed page accepts a command only if event.source === window.parent, the envelope is valid and the id equals its own id (so you must put an id in the address). Which commands are supported is listed in the features field of the ready message. Message formats: Events and message protocol.

frame.contentWindow.postMessage(
  { source: 'mirac-ozdemir-widget-host', version: 1, id: 'mo-widget', type: 'inputs', values: { amount: '2500' }, autorun: true },
  'https://mirac-ozdemir.com',
);

Limits of the iframe

With a plain iframe, what widget.js provides is up to you: height management, the placeholder and learned height (CLS), invalid-option warnings, mo:* events, calls such as update/calculate, theme=inherit and telling several widgets apart (id). Leave the sandbox attribute as above; the calculator needs scripts and forms, and the tool link opens in a new tab (allow-popups-to-escape-sandbox). For accessibility, give the iframe a meaningful title.