Address autocomplete on Wix with Velo and a custom element

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#

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

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.

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

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:

$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
• Squarespace, if you are comparing platforms
• Integrations