Installing the widget

One script tag

In the e-shop template, ideally before </body>:

<script type="module" src="https://widget.metty.eu/v1/metty.js?api=<PUBLIC_API_KEY>"></script>

That completes the integration. The widget loads, picks up its configuration from the server and attaches to the e-shop's search input; you do not call any init function.

The api parameter is your public key. It may stay in the HTML — it does not grant write access to the catalog.

Which input the widget takes over

The widget binds to the existing search input through a DOM selector stored in its configuration, for example .search-form input[type="search"]. The input stays where it is and keeps its appearance — the widget only adds a results panel to it.

If search is hidden behind an icon on mobile, the configuration also holds the selector of that toggle so the widget can open the input.

We set the selectors up for your site. If the e-shop template changes and the selectors stop matching, get in touch.

Optional parameters

parameter	meaning
api	required public key <PUBLIC_API_KEY>
id	slug of the widget configuration (for example prod, stag); without it we serve the one marked as active

<script type="module" src="https://widget.metty.eu/v1/metty.js?api=<PUBLIC_API_KEY>&id=prod"></script>

The id parameter does not select a version but one of your configurations. /v1/metty.js always serves the current build of the configuration you chose, so a new widget release requires no change on your side.

If you need a pinned version, for example during a security audit, we can give you an immutable link to a specific build in the form https://widget.metty.eu/v1/b/<template>-<hash>.mjs. Such a link never changes — but it never updates either.

Verifying the integration

1. Open the e-shop and click into the search input — the panel opens on focus, before you type anything, and fills with results as you type.
2. The browser console must not show an error from widget.metty.eu or search.api.metty.eu.
3. If the panel does not appear, check that the script tag contains your public key and that the request is not blocked by an ad blocker.

Content Security Policy

If your e-shop has a CSP, allow the following sources:

script-src  https://widget.metty.eu
connect-src https://search.api.metty.eu
img-src     https:
style-src   'unsafe-inline'

The widget loads both its configuration and search results from search.api.metty.eu; it never reaches catalog.api.metty.eu. Product images are served by your e-shop, or as thumbnails from search.api.metty.eu — img-src https: covers both.

The style-src 'unsafe-inline' directive is required because the widget injects its styles as a <style> element into its own shadow root. They never reach your page — the shadow root isolates them in both directions. The widget does not download external fonts, so there is no need to widen font-src because of it.