Add StreetKit with custom code

When to use

Use this pattern for Webflow forms where you can assign stable IDs to the address input and any fields StreetKit should fill after selection.

High-level setup

1. Add a normal address input and give it a stable ID such as streetkit-address.
2. Add optional suburb, city, postcode, and metadata fields only if the form needs them.
3. Add the StreetKit CSS in the page or project head custom code.
4. Add the StreetKit script and initialization block before the closing body tag.
5. Publish and test the live page with browser devtools open.

Custom code snippet

<link rel="stylesheet" href="https://streetkit.smp.kiwi/widget/streetkit.css">
<script src="https://streetkit.smp.kiwi/widget/streetkit.js" defer></script>
<script>
  window.addEventListener("DOMContentLoaded", () => {
    if (!window.StreetKit) return;

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

Limitations

• There is no StreetKit Webflow app or site-wide installer today.
• Selectors must match the published Webflow markup; renaming fields can break mapping.
• StreetKit must fail open so the Webflow form can still be submitted manually.
• Do not rely on fragile whole-form scanning or hidden-field discovery.
• Webflow checkout or ecommerce behavior is not claimed by this guide.