# Address autocomplete on Wix with Velo and a custom element

> Build an address field as a Wix custom element, pass the chosen address to Velo, and see which Wix fields you cannot reach.
>
> https://danadresse.dk/en/guides/wix · verified 2026-11-02
Wix's store checkout is closed to custom code. For Wix Forms you can try our one-tag script first: it is built to find address fields by their labels, but it has not been tested on a live Wix site. The route that works by design is a *custom element*: a small piece of HTML with your own input, which the widget attaches to. The element passes the chosen address on to your Velo page code, which can set the value in Wix input elements.

## What is possible

| Place | Works? |
|---|---|
| Wix Stores checkout | No, Wix does not allow scripts in checkout |
| Fields in the Wix Forms app, with one script tag under Custom code | Maybe: the script looks for them by label, not tested on a live site |
| Custom element + Velo page code + your own input elements | Yes |
| HTML embed (iframe) | Possible, but the iframe runs on a Wix domain, not your own |

Custom elements and Velo require Dev Mode, and Wix sets plan requirements. Check them in your Wix account before you start.

## 1. Create a browser key

The custom element runs on your site's domain. Create a *live* key under [Keys](/dashboard/keys) and lock it to e.g. `mysite.dk` and `www.mysite.dk` under **Allowed domains**. If you get `403 origin_not_allowed` in preview, the refused domain is in the error message. Add it only if it is your own, and never as a wildcard on a shared Wix domain. See [Browser keys and allowed domains](/en/guides/browser-noegler-domaener).

## 2. Try first: one script tag

In the Wix dashboard go to **Settings → Custom code (Advanced) → + Add custom code**, paste the tag with your browser key, choose **All pages**, place it in **Body – end**, and click **Apply**. Custom code needs a premium plan with a connected domain.

```html id=auto-tag run=no
<script src="https://api.danadresse.dk/js/danadresse-auto.min.js"
        data-key="YOUR_BROWSER_KEY" data-debug defer></script>
```

`data-debug` makes the script list in the browser console which fields it found. Open the published page with a Wix form that has fields labelled e.g. "Address", "Postcode" and "City" (or "Adresse", "Postnr.", "By"), type an address and pick a suggestion. If postcode and city are filled and the submission contains them, you are done: remove `data-debug`. If the console finds no fields, use the custom element below.

## 3. The custom element

Create the file `public/custom-elements/danadresse-felt.js` in Velo and insert your key:

```js id=custom-element run=syntax
const API_KEY = "YOUR_BROWSER_KEY";
const WIDGET = "https://danadresse.dk/static/js/danadresse-autocomplete-1.0.0.js";

function loadWidget() {
  if (window.DanadresseAutocomplete) return Promise.resolve();
  return new Promise((resolve, reject) => {
    const s = document.createElement("script");
    s.src = WIDGET;
    s.onload = resolve;
    s.onerror = reject;
    document.head.appendChild(s);
  });
}

class DanadresseFelt extends HTMLElement {
  connectedCallback() {
    if (this.querySelector("input")) return;
    const input = document.createElement("input");
    input.type = "text";
    input.style.cssText = "width:100%;box-sizing:border-box;padding:10px;font:inherit";
    this.appendChild(input);

    loadWidget().then(() => {
      DanadresseAutocomplete.attach(input, {
        apiKey: API_KEY,
        onSelect: (a) => {
          // Only plain values can be passed on to Velo
          this.dispatchEvent(new CustomEvent("adresse-valgt", {
            detail: {
              tekst: a.tekst, id: a.id, vejnavn: a.vejnavn, husnr: a.husnr,
              etage: a.etage, doer: a["dør"], postnr: a.postnr, by: a.postnrnavn,
            },
          }));
        },
      });
    });
  }
}

customElements.define("danadresse-felt", DanadresseFelt);
```

The element does not use shadow DOM, because the widget puts its stylesheet in the page's `<head>`.

## 4. Put the element on the page

In the editor: **Add → Embed Code → Custom Element**. Choose *Velo file*, point it at `danadresse-felt.js`, and enter the tag name `danadresse-felt`. Give the element the id `adresseFelt`. Make it tall enough for the suggestion list, or Wix may hide the part that sticks out below the element.

## 5. Receive the address in the page code

Put input elements for postcode and city on the page with the ids `postnr` and `by`, and add this to the page's Velo code:

```js id=velo-page run=syntax
$w.onReady(function () {
  $w("#adresseFelt").on("adresse-valgt", (event) => {
    const a = event.detail;
    $w("#postnr").value = a.postnr;
    $w("#by").value = a.by;
  });
});
```

Save the address itself and `a.id` together with the rest of the form in your own Velo code, e.g. with `wix-data`. The field inside the custom element is not part of a Wix form.

## Next steps

- [Widget options](/en/widget)
- [Squarespace](/en/guides/squarespace), if you are comparing platforms
- [Integrations](/en/integrationer)