Quick start

Add StreetKit to an address input

Add the hosted widget script, attach it to an existing input, and handle the selected address object in JavaScript.

Focused guides

Start with NZ address autocomplete for the product overview, or use Webflow address autocomplete for Webflow custom-code setup.

Basic install

<link rel="stylesheet" href="https://streetkit.smp.kiwi/widget/streetkit.css">
<script src="https://streetkit.smp.kiwi/widget/streetkit.js"></script>
<input id="address" autocomplete="off">

<script>
  StreetKit.init({
    input: "#address",
    publicMode: true,
    indexBaseUrl: "https://index.streetkit.smp.kiwi/public/v1",
    onSelect(address) {
      console.log(address);
    },
    onError(error) {
      console.warn(error.code);
    }
  });
</script>

Registered access

Registered access uses a public siteId so StreetKit can classify traffic more accurately. The siteId is visible in JavaScript, metadata, request URLs, and browser devtools; it is not authentication, not a secret, not an API key, and not quota enforcement. 

const siteId = "REPLACE_WITH_ISSUED_SITE_ID";

StreetKit.init({
  input: "#address",
  indexBaseUrl: `https://index.streetkit.smp.kiwi/c/${siteId}/v1`,
  siteId,
  onSelect(address) {
    console.log(address.label);
  }
});

Map selected fields

Add field mapping only for form controls you want StreetKit to write. The widget does not read unrelated customer fields or send mapped form values back to StreetKit. 

<input id="address" autocomplete="off">
<input id="address_line_1" name="address_line_1">
<input id="address_line_2" name="address_line_2">
<input id="suburb" name="suburb">
<input id="city" name="city">
<input id="postcode" name="postcode">
<input type="hidden" id="linz_id" name="linz_id">
<input type="hidden" id="latitude" name="latitude">
<input type="hidden" id="longitude" name="longitude">

<script>
  StreetKit.init({
    input: "#address",
    publicMode: true,
    indexBaseUrl: "https://index.streetkit.smp.kiwi/public/v1",
    fields: {
      line1: "#address_line_1",
      line2: "#address_line_2",
      suburb: "#suburb",
      city: "#city",
      postcode: "#postcode",
      linzId: "#linz_id",
      latitude: "#latitude",
      longitude: "#longitude"
    }
  });
</script>

Integration notes

  • input can be a CSS selector or an HTMLInputElement.
  • indexBaseUrl points to the StreetKit address data endpoint.
  • Use publicMode: true for public access, or pass a public non-secret siteId with a /c/{siteId}/v1 path for registered mode.
  • onSelect receives the structured address object after the user chooses a result.
  • The widget only needs the typed address query to return suggestions.
  • fields writes only explicitly configured controls after selection and dispatches normal input/change events.
  • Treat suggestions as an enhancement: keep manual address entry available and continue normal form submission if autocomplete is unavailable or slow.
  • Keep visible LINZ Data Service attribution and StreetKit limitation wording somewhere in the same address-entry flow.

Local fixture data

The local demo uses /index/v1, a small fixture dataset included with the site. It is useful for development, but it is not the full LINZ-backed production dataset. 

StreetKit.init({
  input: "#address",
  publicMode: true,
  indexBaseUrl: "/index/v1",
  onSelect(address) {
    console.log(address.label);
  }
});