Widget configurator

The tool below uses the real widget.js loader and the real calculator: the settings you make appear instantly in the preview and the code block updates accordingly. When you run a calculation in the preview, you can follow the mo:* events that the widget sends to your page in the event log.

Configuration

Tool keyType a catalog key or pick one from the list.Initial height (px)Empty: the last measured height, or 480.

Accent colour Use a custom accent colour

Limit the search to a category

Prefilled inputsOne value per line: amount=1000

Show header Calculate automatically Also write default attributes Use the pinned version + integrity (SRI)

Live preview

These buttons drive the widget through the JavaScript API.

calculate()setInputs(prefilled)reset()

Code

HTMLElementiframeReactVueJS APICopy

If your page uses a Content-Security-Policy, add:

Event log

What you can do

• Widget kind. Pick Calculator, Search box or Category list (Widget kinds). For a calculator you enter a tool key, for a category list a category key; the search box has an optional category filter. The key box suggests values from the catalog.
• Appearance and behaviour. Language, theme (including inherit), view (full or result only), accent colour, corner radius, density, initial height, header, autorun and what a pick does (_blank or event). Enter prefilled inputs one field=value per line.
• Live update versus re-creating. When theme, view, accent colour, radius, density, header or height change, the preview is updated with update without reloading the iframe; the badge above the preview says “Updated live (no reload)”. When the kind, key, language, prefilled inputs, autorun, target or the category filter change, the widget is re-created (“Re-created”). The same distinction applies in your application: update.
• Programmatic control buttons. Under the calculator preview there are three buttons: calculate() calculates the form and shows the result (result and inputs) or the error (code, fields); setInputs(prefilled) applies the values in the prefilled field to the widget, using the state of the Calculate automatically box; reset() resets the form. The output box shows what the call returned. These are calls of the loader’s JavaScript API.
• Pinned version + integrity (SRI). If you tick it, the configurator reads /widget/manifest.json and the generated code uses the immutable /widget/v1.1.0.js address with integrity and crossorigin="anonymous"; the preview uses that pinned script too. If the manifest cannot be read, the regular address is shown. Details: Versioning policy.
• Also write default attributes. When ticked, the code also contains the default values explicitly (such as data-theme="auto").

Code tabs

Tab	Content
HTML	The data-mo-* container and the loader script.
Element	<mo-calculator>, <mo-search> or <mo-category> and the loader script: Custom elements and SDK.
iframe	The direct embed address for places where you cannot run scripts: Plain iframe.
React	A component filled with your options (loads the loader, does mount/unmount).
Vue	The same as a Vue 3 <script setup> component.
JS API	A short update / setInputs / calculate / mo:* example that fits the chosen kind.

Below the code you will also see the rules to add if your page uses a Content-Security-Policy: Security and CSP.

Note

If you enter an invalid value (for example a colour that is not 6 digits, or an unsuitable key), the configurator says which field is invalid and does not produce code that the loader would reject by the same rules.

To find the tool key, use the Tool catalog; from every row in the catalog you can arrive at this page with the tool preselected (?tool=kdv).