Troubleshooting

The widget doesn’t show at all

Symptom	Likely cause	Fix
The container stays as it is	widget.js did not load	Check the https://api.mirac-ozdemir.com/widget.js request in the Network tab. It could be a content blocker, CSP or a wrong address.
Refused to load the script / Refused to frame in the console	CSP	Add the script-src and frame-src rules: Security and CSP.
[MiracOzdemirWidget] Invalid data-… in the console	Invalid attribute value	The warnings are in English; the message says which attribute and which values are expected. The key must be ^[a-z0-9]+(-[a-z0-9]+)*$ (2–64 characters), data-locale tr/en, data-theme auto/light/dark/inherit, data-accent 6 hex digits. The container is skipped.
Invalid data-inputs value in the console	data-inputs is not a JSON object	Give a valid JSON object with double quotes: data-inputs='{"amount":"1000"}'.
An Integrity / SRI error in the console, the script does not run	The hash you pinned does not match the file	Take the current integrity value from the manifest and make sure you added crossorigin="anonymous": Versioning policy.
Empty or “not found” page	The tool does not exist, is not published or is not in the requested language	Verify the key from the catalog; check data-locale.
Only a “maintenance” notice	The tool is temporarily under maintenance	Wait; check the status page.
The page is on HTTP	Mixed content blocking	Your site must be served over HTTPS.

If you load the script with defer/async and added the container after the page loaded, call scan() or mount().

The height is wrong

• A scrollbar appears or there is leftover space. The height adjusts automatically as the content changes. If you gave your container a fixed height or overflow: hidden, remove it; do not force a height on the iframe itself with CSS.
• A jump on first display. The loader draws a skeleton placeholder and remembers the last measured height for the same {tool, locale, view} in your site’s localStorage (mo-widget-h:…); on the very first visit the height is unknown, so 480 px is reserved. Give the tool’s typical height with data-height. If the browser blocks storage (private window, cookie blocker), the height is learned again on every visit.
• You are using a plain iframe. You must manage the height yourself: Plain iframe.
• Loaded in a hidden tab. Measurement cannot be done in a container inside display:none; when the tab opens, rebuild it with unmount + mount.
• The widget appears late. The iframe is kept invisible until it is ready (at most 15 seconds). For widgets at the top of the page, ask for immediate loading with data-lazy="false".

Events don’t arrive

• Make sure you attach the listener to the container or to document; the events bubble, but they are dispatched on the container, not on the iframe itself. With <mo-calculator>, event.target is the container inside the element; you can attach the listener to the element too.
• The event names are mo:ready, mo:resize, mo:input, mo:result, mo:error, mo:select (with a colon). mo:select comes only from search/category widgets, mo:input only from calculators.
• Try the preview in the configurator: the event log shows the same events; if they arrive there, the problem is on your page.
• mo:result fires only after a successful calculation. mo:input arrives about 250 ms after the user edits a field.
• If the new fields you expect in an event’s detail (inputs, requestId, tool) are missing, the embed page may be older; event.detail.features tells what is supported.

Prefilled inputs are not applied

• Take the field names from the tool definition and write them in kebab-case in attributes: data-input-vat-rate-option → vatRateOption. In JSON (data-inputs) the field name is camelCase.
• Unknown fields and invalid values are silently ignored. Decimals must be strings ("1234.56"), booleans true/false, dates YYYY-MM-DD; for option fields give the option key. Value ≤ 64 characters, at most 50 fields.
• data-autorun="true" calculates only if the inputs are valid; if a required field is missing the widget shows an error.
• data-view="result" needs prefilled inputs; without them the result panel stays empty.

Programmatic calls don’t work

• update, setInputs, calculate and reset work only on a mounted container; otherwise they return false (calculate rejects with NOT_MOUNTED). For <mo-calculator>, give the API the container inside the element (el.querySelector('[data-mo-mounted]')): Custom elements and SDK.
• calculate() rejects with a { code, message, fields? } object, not an Error. NOT_READY: the iframe did not become ready in time; UNSUPPORTED: a search/category widget, or an older embed page that does not know the command.
• If you see window.MiracOzdemirWidget.update is not a function in the console, an old (1.0) loader may be cached on your page; check widget.build and widget.features. /widget.js is cached for at most an hour.
• theme="inherit", which follows your page’s theme, exists only in the loader, not in a plain iframe.

Calculation errors

If you see a red error inside the widget, look at the code value of the mo:error event (Error codes). RATE_LIMITED indicates that many calculations were made from the same IP; wait a short while.

Theme or language is not applied

• data-theme="auto" (the default) follows the visitor’s system theme, not your page’s theme. To match your page’s theme, give data-theme="inherit"; when the theme changes, the widget is updated without reloading. The loader recognises your page’s theme from data-theme/data-bs-theme/data-color-mode attributes, dark-like classes or color-scheme; if your site’s theme mechanism uses none of these, tell it yourself with update(el, { theme: 'dark' }).
• The language is set with data-locale; it does not follow the browser language automatically. Changing it reloads the iframe (update(el, { locale })).

Still can’t solve it?

Send us the following: the page address, your data-* attributes, the browser and the console output. See Support.

Tip

When debugging, first try it in a standalone HTML file (only the container and the script): if it works, the problem is in your page’s CSS, framework or CSP.