# Address autocomplete in Shoporama

> Paste one script tag into Shoporama's body code so the checkout gets address autocomplete with postcode and city, or attach the widget to your own selectors.
>
> https://danadresse.dk/en/guides/shoporama · verified 2026-11-02
Shoporama lets you add your own code to every page, so the checkout can get address autocomplete without an app. Our one-tag script `danadresse-auto` knows Shoporama's checkout fields, so you do not need to find any selectors.

## 1. Create a browser key

Create a *live* key under [Keys](/dashboard/keys) and add the shop's domains under **Allowed domains**, e.g. `myshop.dk` and `www.myshop.dk`. If you test on the shop's temporary Shoporama address, add that address too, written exactly. A domain-locked key only works on those domains, so it is safe in the page source. See [Browser keys and allowed domains](/en/guides/browser-noegler-domaener).

## 2. Paste the script tag

Go to **Settings (the cog) → Code in body**, paste the tag with your browser key, and click **Save**:

```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 Shoporama's fields `order_address`, `order_zipcode` and `order_city`, and the alternative delivery address `del_address`, `del_zipcode` and `del_city`. The two addresses are kept apart. When the customer picks a suggestion, street and number (with floor and door), postcode and city are filled. If the customer types the address by hand, it is checked when they leave the field, with a "Did you mean …?" suggestion. The checkout is never blocked, and only Danish addresses are touched.

## 3. Test

Put an item in the cart, go to checkout, type an address with a typo, and pick a suggestion. Check that postcode and city are filled, also in the delivery address. 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 your design uses other field names

A custom design may name the fields differently. Tell the script where they are with `data-fields`:

```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 your checkout has separate fields for street and house number, map both `street` and `house`.

## Or: your own init code

If you want full control over what is filled, attach the address widget yourself. Find the fields with **Inspect** (an `id` is used as `#id`, a name as `input[name="…"]`), change the three selectors 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 used on the checkout page, or under **Code in body**:

```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>
```

Checking the address on the server after the order is placed needs an integration that reads the orders. See [Address cleansing in checkout](/en/guides/datavask-i-checkout).

## Next steps

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