Skip to content
Miraç Özdemir Developers

Widget overview

The widget adds a calculator to your page with a single line of HTML. A small loader script (widget.js) places an iframe where you mark it; inside the iframe, the same interactive calculator and result panel from our site run. Calculators are not the only thing you can embed: a search box and a category list are available too (Widget kinds).

<div data-mo-tool="kdv" data-locale="en"></div>
<script src="https://api.mirac-ozdemir.com/widget.js" async></script>

No key, free of charge

No sign-up or API key is required. The loader and the calculator are open to everyone.

Layout that does not jump

A placeholder skeleton reserves the height, the measured height is remembered, and the height follows the content automatically.

Appearance options

Theme (including inherit), accent colour, corner radius, density; Turkish or English interface.

Programmatic control

update, setInputs, calculate, reset; rich mo:* events; custom elements and an SDK.

How it works

Section titled “How it works”
Your page (any origin)                            mirac-ozdemir.com
┌────────────────────────────────────┐            ┌───────────────────────────────────┐
│ <div data-mo-tool="kdv">           │            │ /en/embed/kdv?theme=&header=&id=  │
│ <script src=…/widget.js async>     │   iframe   │                                   │
│   loader validates options,        ├───────────►│ renders the calculator, calls the │
│   builds the iframe, listens       │◄───────────┤ public API, sends messages        │
│   and drives it with commands      │ postMessage│ and answers your page's commands  │
└────────────────────────────────────┘            └───────────────────────────────────┘
  1. widget.js finds every element on the page that carries data-mo-tool, data-mo-search or data-mo-category (and the <mo-calculator>, <mo-search>, <mo-category> custom elements), validates the attributes and creates an iframe.
  2. The iframe loads the https://mirac-ozdemir.com/{locale}/embed/{key} page (/{locale}/embed/kit/… for search and category). Without the site shell, this page shows only the calculator, the warnings, the disclaimer and a link to the full tool page.
  3. The page reports its height and results to the parent page with postMessage; the loader turns these into the iframe height and mo:* events. In the other direction the loader passes option changes, prefilled inputs and calculation commands to the iframe.

Widget or API?

Section titled “Widget or API?”
Widget Public API
Effort A single line of HTML You write your own UI
Appearance Our UI (theme, accent colour, radius, density configurable) Entirely your own design
Access to results mo:result event, calculate() Directly in the response
Calculation load From the user’s browser, distributed per IP From your client/server
Disclaimer text Shown inside the widget We recommend that you show it

The widget is suitable for getting started quickly, adding tax/payroll tools to your content or embedding in a blog post. For a custom form, a mobile app or server-side calculation, use the Public API. You can also use both together: show the widget, receive the result with mo:result and process it in your own component.

What it includes

Section titled “What it includes”
  • All tools: every key in the catalog can be embedded as a widget.
  • Three kinds: calculator, search box and category list: Widget kinds.
  • Prefilled inputs and autorun: fill the form on load, optionally calculate right away, or show only the result panel.
  • Appearance: accent, radius, density, theme="inherit".
  • Warnings and disclaimer: the tool’s warnings and legal note are shown inside the widget; they cannot be removed.
  • Maintenance mode: if a tool is under maintenance, the widget shows a maintenance notice instead of the calculation.
  • Attribution link: below the widget there is a link to the full tool page (opens in a new tab).
  • Search engines: embed pages are not indexed (noindex); the content value stays on your page.
  • Anonymous usage counting: the domains that embed the widget are counted in aggregate; no inputs or results are stored: Security and privacy.
InstallationAttributes, prefilled inputs, multiple widgets and dynamic pages.
Widget kindsSearch box, category list and the result-only view.
Custom elements and SDKmo-calculator elements, React/Vue components and the typed loader.
ConfiguratorPick options, preview live, copy the code.