# Address autocomplete in DanDomain Webshop

> Paste one script tag into your DanDomain design so address fields get autocomplete with postcode and city, and point it at the fields if your design names them differently.
>
> https://danadresse.dk/en/guides/dandomain · verified 2026-11-02
DanDomain Webshop lets you add your own JavaScript to the design, so address fields can get autocomplete without a module. Our one-tag script `danadresse-auto` looks for the address fields itself. The same steps work for the webshops DanDomain runs under other names: SmartWeb, Wannafind, Scannet and Curanet.

## 1. Create a browser key

Create a *live* key under [Keys](/dashboard/keys) and add the shop's domains under **Allowed domains**. Open the checkout page and look at the address bar: if checkout runs on a different domain from the rest of the shop, that domain must be on the list too. See [Browser keys and allowed domains](/en/guides/browser-noegler-domaener).

## 2. Paste the script tag

In DanDomain Webshop go to **Webshop → Design → Ret design** on the active design, choose **Indsæt Javascript**, paste the tag under **Sidens indhold (bunden)**, and click **Gem**. In DanDomain Webshop Classic, paste it at the bottom of your design template, before `</body>`.

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

The script recognises the platform's own field names (`m-usercreate-address`, `-zipcode`, `-city` and `address`, `zipcode`, `city`) and, in Classic, the common names `Address`, `ZipCode`, `City` and `DeliveryAddress`, `DeliveryZipCode`, `DeliveryCity`. It also matches Danish labels such as "Adresse", "Postnr." and "By". When the customer picks a suggestion, street and number (with floor and door), postcode and city are filled, and a delivery address is kept apart from the billing address.

We have checked the markup of DanDomain Webshop's account form on a live page. The checkout names follow the same pattern but have not been checked on a live shop, and we have not seen a live Classic shop. Test your own checkout before you rely on it.

## 3. Test

Test in a private window with a sloppy entry such as "rodovre parkvej 150". The suggestion should be Rødovre Parkvej with the correct postcode, and postcode and city should be filled. Open the browser console if nothing happens:

- `API refused the request (403): … locked to …` means the domain is missing from the key's **Allowed domains**.
- If no field is found, add `data-debug` to the tag, reload, and read what the console lists.

## If the fields are not found

Find the field's selector: right-click the address field, choose **Inspect**, and use an `id` that stays the same after a reload (`id="address"` → `#address`) or the `name` (`name="address"` → `input[name="address"]`). Do the same for postcode and city, and give the selectors to the script:

```html id=auto-fields run=no
<script src="https://api.danadresse.dk/js/danadresse-auto.min.js"
        data-key="YOUR_BROWSER_KEY"
        data-fields='[{"street":"#your-address-field","zip":"#your-postcode-field","city":"#your-city-field"}]' defer></script>
```

You can map `street`, `house`, `floor`, `door`, `line2`, `zip`, `city` and `country`. If the house number is a separate field in your checkout, map it as `house`.

## Or: your own init code

If you want full control over what is filled, attach the address widget yourself. Change the three selectors in `FIELDS` and insert your key:

```js id=init-js run=syntax
const API_KEY = "YOUR_BROWSER_KEY";

// Change to your fields (see step 2)
const FIELDS = {
  adresse: "#your-address-field",
  postnr: "#your-postcode-field",
  by: "#your-city-field",
};

function setField(el, value, events) {
  if (!el || value == null) return;
  const setter = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(el), "value").set;
  setter.call(el, value);
  for (const type of events || ["input", "change"]) {
    el.dispatchEvent(new Event(type, { bubbles: true }));
  }
}

function streetLine(a) {
  let line = a.vejnavn + " " + a.husnr;
  if (a.etage) line += ", " + a.etage + ".";
  if (a["dør"]) line += " " + a["dør"];
  return line;
}

function bindAll() {
  document.querySelectorAll(FIELDS.adresse).forEach((input) => {
    DanadresseAutocomplete.attach(input, {
      apiKey: API_KEY,
      onSelect(a) {
        setField(input, streetLine(a), ["change"]);
        setField(document.querySelector(FIELDS.postnr), a.postnr);
        setField(document.querySelector(FIELDS.by), a.postnrnavn);
      },
    });
  });
}

function start() {
  bindAll();
  new MutationObserver(bindAll).observe(document.body, { childList: true, subtree: true });
}

if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", start);
else start();
```

Paste it just before `</body>` in the template the checkout page uses:

```html id=template-html run=no
<script src="https://danadresse.dk/static/js/danadresse-autocomplete-1.0.0.js"></script>
<script>
  /* paste the init code from above here */
</script>
```

The payment provider's payment window cannot get the widget. It does not need to, because the address is saved before that. Server-side validation needs access to the order, e.g. through an export or integration. See [Address cleansing in checkout](/en/guides/datavask-i-checkout).

## Next steps

- The [DanDomain page](/en/integrationer/dandomain) on Integrations
- [Browser keys and allowed domains](/en/guides/browser-noegler-domaener)
- [Shoporama](/en/guides/shoporama)