Addressfinder integration instructions for Hubspot forms

What is the Addressfinder embed for Hubspot?

Installation Instructions

• These instructions will show you how to add the Addressfinder embed to Hubspot. You can learn more about this service on our Addressfinder embed for Hubspot page. Your form should already be working well - just with manual address entry. We will enhance this form to integrate the Addressfinder widget, and enable autocompletion of verified addresses.
• Screenshot of example Hubspot form with Addressfinder Embed
  

Before you start

• Before adding address autocompletion to your HubSpot form, you’ll need to have the following:
• 1. An existing Hubspot form, embedded on a landing page or Hubspot-hosted web page.
• 2. The form should already have the following address elements:
1. Street
2. Suburb
3. City
4. Region (optional)
5. Postcode
6. Country (optional)
• 3. You’ll need an Addressfinder licence key (any trial account will work fine).
• 4. Sufficient Hubspot access to edit the settings for website pages. You’ll need edit and publish permissions.

Getting started

• 1. Log into Hubspot
• 2. In the menus, navigate to Marketing > Website > Website Pages
• 3. Select on the desired page, and click the Edit button

Taking note of the form field property names

• 1. Click on the form within the content area
• 2. In the sidebar, expand the Form Content area, to show a panel such as this. Click the pencil icon next to each element
• 3. This will reveal the property name of each field.
• 4. Write down each property name like the FORM CONFIG table below:

Field label	Property name
Street address	address
Suburb	suburb
City	city
Region (optional)	state
Post code	zip
Country (optional)	country

Preparing the code

• 1. Click on Settings icon at the top of screen
• 2. Select Website > Pages
• 3. Paste this code to the Site footer HTML field. If there is already content in the field, paste it at the bottom of the existing content.

  <script>
(function () {
  // **************************************************
  // Addressfinder plugin for Hubspot
  // **************************************************

  // STEP BY STEP integration instructions here:
  // https://addressfinder.nz/docs/plugins/hubspot/

  var addressfinderConfig = {
    // STEP 1: paste in your licence key
    licenceKey: "ADDRESSFINDER_DEMO_KEY",

    defaultCountryCode: "NZ",

    // STEP 2 - update the property names using the values assigned within your Hubspot form
    addressPropertyName: "address",
    suburbPropertyName: "suburb",
    cityPropertyName: "city",
    statePropertyName: "state", // region (optional)
    postCodePropertyName: "zip",
    countryPropertyName: "country", // optional (will use defaultCountryCode if not present)

    // STEP 3 (optional): customise the addresses returned by updating the address_params values
    // Examples at: https://addressfinder.nz/docs/widget_code_generator/
    widgetOptions: {
      AU: {
        address_params: {
          gnaf: 1
        }
      },
      NZ: {
        address_params: {}
      },
      INT: {
        address_params: {}
      }
    },

    // STEP 4: once the plugin is working, you can set debugMode to false
    debugMode: true,
  };

  window.addEventListener("message",function(e){if("hsFormCallback"===e.data.type&&"onFormReady"===e.data.eventName){if(!document.querySelector(`input[name=${addressfinderConfig.addressPropertyName}]`))return;var d=document.createElement("script");d.src="https://api.addressfinder.io/assets/hubspot/v2/address.js",d.async=!0,d.onload=function(){new Addressfinder.Hubspot.AddressPlugin(addressfinderConfig)},document.body.appendChild(d)}});
})();
</script>

Copy source codecontent_copy Copiedcheck
• 4. At the top of this code, replace the ADDRESSFINDER_DEMO_KEY with your licence key. You can get this key from the Addressfinder Portal after you’ve signed up.
• 5. Next, update the property names using the table you created (above).
• 6. If your property name contains any special characters (such as a slash), you need to wrap the value in single quotation marks. For example, addressPropertyName: "'2-577445/street_address'".
• 7. (optional) You may tweak the address_params values. Use the output from the code generator to tune your addresses for allowed addresses such as PO Boxes, etc.
• 8. That’s all - now click the Update button at the top of the page

Publish and test

• 1. Wait 30 seconds, and then visit the external URL of the landing page.
• 2. The autocomplete popup should display once you start typing into the address field.
• 3. Selecting an address should see the individual elements being populated into the appropriate fields.

Troubleshooting

• If you still have the debugMode enabled, then you can view error messages within your browser's Javascript console.
• The most likely problem is a mis-configuration of the property names. The code above will give you a useful error message if it is unable to find the correct field.
• If this happens, you should double-check the values you wrote down in the FORM CONFIG table above. Have these values been copied into the code correctly?
• Still having trouble? Send us an email at support@addressfinder.nz, and we will have a look. Be sure to include the URL of the page, so we can debug the problem.