# Adresse-autocomplete på Wix med Velo og et custom element

> Byg et adressefelt som Wix custom element, send den valgte adresse til Velo, og se hvilke Wix-felter du ikke kan nå.
>
> https://danadresse.dk/guides/wix · verified 2026-11-02
Wix' butiks-checkout er lukket for egen kode. Til Wix Forms kan du først prøve vores script med ét tag: det er bygget til at finde adressefelter via deres labels, men det er ikke testet på et live Wix-site. Den vej, der virker pr. konstruktion, er et *custom element*: et lille stykke HTML med dit eget input, som widget'en kobles på. Elementet sender den valgte adresse videre til din Velo-sidekode, som kan sætte værdien i Wix-input-elementer.

## Hvad kan lade sig gøre

| Sted | Virker? |
|---|---|
| Wix Stores-checkout | Nej, Wix tillader ikke script i checkout |
| Felter i Wix Forms-appen, med ét script-tag under brugerdefineret kode | Måske: scriptet leder efter dem via label, ikke testet på et live site |
| Custom element + Velo-sidekode + egne input-elementer | Ja |
| HTML-indlejring (iframe) | Muligt, men iframen kører på et Wix-domæne, ikke dit eget |

Custom elements og Velo kræver, at du slår Dev Mode til, og Wix stiller krav til abonnementet. Tjek dem i din Wix-konto, før du går i gang.

## 1. Opret en browsernøgle

Custom elementet kører på dit sites domæne. Opret en *live*-nøgle under [Nøgler](/dashboard/keys) og lås den til fx `minside.dk` og `www.minside.dk` under **Tilladte domæner**. Får du `403 origin_not_allowed` i forhåndsvisningen, står det afviste domæne i fejlbeskeden. Tilføj det kun, hvis det er dit eget, og aldrig som wildcard på et fælles Wix-domæne. Se [Browsernøgler og tilladte domæner](/guides/browser-noegler-domaener).

## 2. Prøv først: ét script-tag

I Wix-dashboardet går du til **Indstillinger → Brugerdefineret kode (Avanceret) → + Tilføj brugerdefineret kode**, indsætter tagget med din browsernøgle, vælger **Alle sider**, placerer det i **Body – slut** og klikker **Anvend**. Brugerdefineret kode kræver et premium-abonnement med tilknyttet domæne.

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

`data-debug` får scriptet til at vise i browserens konsol, hvilke felter det fandt. Åbn den publicerede side med en Wix-formular, hvor felterne fx hedder "Adresse", "Postnr." og "By", skriv en adresse, og vælg et forslag. Bliver postnr. og by udfyldt, og står de i indsendelsen, er du færdig: fjern `data-debug`. Finder konsollen ingen felter, så brug custom elementet nedenfor.

## 3. Custom elementet

Opret filen `public/custom-elements/danadresse-felt.js` i Velo og indsæt din nøgle:

```js id=custom-element run=syntax
const API_KEY = "DIN_BROWSER_NØGLE";
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) => {
          // Kun simple værdier kan sendes videre til 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);
```

Elementet bruger ikke shadow DOM, fordi widget'en lægger sit stylesheet i sidens `<head>`.

## 4. Sæt elementet på siden

I editoren: **Tilføj → Indlejr kode → Custom element**. Vælg *Velo-fil*, peg på `danadresse-felt.js`, og skriv tagnavnet `danadresse-felt`. Giv elementet id'et `adresseFelt`. Gør det højt nok til forslagslisten, ellers kan Wix skjule den del, der stikker ud under elementet.

## 5. Modtag adressen i sidekoden

Læg input-elementer til postnr. og by på siden med id'erne `postnr` og `by`, og tilføj i sidens Velo-kode:

```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;
  });
});
```

Gem selve adressen og `a.id` sammen med resten af formularen i din egen Velo-kode, fx med `wix-data`. Feltet i custom elementet er ikke en del af en Wix-formular.

## Næste skridt

- [Widget-indstillinger](/widget)
- [Squarespace](/guides/squarespace), hvis du sammenligner platforme
- [Integrationer](/integrationer)