Widget code generator

Working in progress on steps and intro.

2. Replace placeholder address_search_field_id with the ID of your first address field (eg, address_1).
3. Replace your_license_key with your Addressfinder license key. You can find it under Credentials in the Addressfinder Portal.
4. Update the code snippet with the IDs of the fields you are using to capture the selected address.

Configure your widget settings below and copy the generated code to your website.

Basic Configuration

Licence Key

You can get a Licence Key from the Addressfinder Portal or use our ADDRESSFINDER_DEMO_KEY to get started.

Generate full HTML example

Address Input ID

The ID of your address input field

CountryAustraliaNew ZealandAustralia & New Zealand

Split address into multiple fields

Australia Address Options

+

Australia Location Search

+

Options for collecting additional metadata

+

Advanced Options

+

Generated Code

  
  <script>
    (function() {
      // Generated code for country AU
      var widget
      function initAddressFinder() {
        widget = new AddressFinder.Widget(
          document.getElementById('address'),
          'ADDRESSFINDER_DEMO_KEY',
          'AU',
              {
            key: "ADDRESSFINDER_DEMO_KEY",
            input: "#address",
            address_params: {
              source: "gnaf,paf"
            },
            address_metadata_params: {}
          }
        );
          
        widget.on('address:select', function(fullAddress, metaData) {
          resetFields();
          document.getElementById('address_text').value = metaData.full_address;
        });
      };
      
      function resetFields() {
        const fields = ['address_text'];
        fields.forEach(id => {
          const el = document.getElementById(id);
          if (el) el.value = '';
        });
      }
        
      function downloadAddressfinder() {
        var script = document.createElement('script');
        script.src = 'https://api.addressfinder.io/assets/v3/widget.js';
        script.async = true;
        script.onload = initAddressFinder;
        document.body.appendChild(script);
      };
      
      document.addEventListener('DOMContentLoaded', downloadAddressfinder);
    })();
  </script>
  

Implementation Notes:

• Place this code just before the closing </body> tag of your page.
• Make sure to include the Addressfinder script only once per page.
• For multiple address fields on the same page, use different input IDs and configuration objects.