How to

Improve your checkout, increase your conversion by using our Address Autocomplete functionality. With just a few lines of code, you can install the light version. With some more work you can install the fully Premium version.

Light

The light version is the autocomplete functionality for each of the address fields. Like streetname, city and postalcode.

As soon as the user clicks on the field or starts typing, a list of options will appear. This will significantly improve the speed and conversion!

Summary

After you've requested your personal api-key, you only have to import a javascript and make some light modification to your form. No serverside technology, no difficult api and no hazzle.

Get help

Contact Patrick Vink for more details

Prerequisites

The form should consists of different rows or divs for each of the address lines. This will be so for most of the forms out in the world

Example:

<div class="form-group row">
    <label class="control-label col-sm-2 col-form-label" for="Postcode">Postcode</label>
    <div class="col-sm-10">
        <input id="postcode" type="text" placeholder="Postcode" class="control-input input-pnl" data-pnl="postalcode" data-val="true" data-val-required="The Postcode field is required." name="Postcode" value="" />
        <span class="text-danger field-validation-valid" data-valmsg-for="Postcode" data-valmsg-replace="true"></span>
    </div>
</div>

Step 1: make small changes

Add two properties to each textbox.
  1. Add the following class input-pnl
  2. Add the data you want to show: data-pnl="postalcode"
These are the datafields you can choose from:
  • postalcode
  • city
  • cityname
  • streetname
  • housenumber
  • housenumberaddition
  • region

So a proper minimal textbox looks like:


    <div>
    <input type="text" placeholder="Plaats" class="input-pnl" data-pnl="city" data-val="true" value="" />
    </div>

Download Files

Javascript:

Typecript:

Step 2: request api-key

The api-key is restricted to certain urls. So specify the url on which your site is hosted and you'll get an api-key that will work on your sites only.

Step 3: add javascript

Add the following code to your page


    <script type="module">
    import { registerAutocompleteDetailedFields, setApiKey  } from './js/postnlautocomplete.js';

    setApiKey("xxxx your api key xxxx")
    registerAutocompleteDetailedFields();
    </script>

Step 4: set the country

With the following code, you have to specify the country. This country is in iso-3 format.


    <script type="module">
    import { setAutocompleteCountry } from './js/postnlautocomplete.js';
    setAutocompleteCountry("fra")
    </script>

Done

Congratulations. You've successfully implemented the light version of our AutoComplete!

Premium

This requires some more sophisticated steps. Please contact us to get the latest manuals

Details

List of countries

The ISO3 code for the available countries are:

Styling .css

Add the following styling to your .css to improve the look & feel



.autocomplete-results {
    border: 1px solid #000;
    overflow-y: hidden;
    width: 100%;
    min-height: 160px;
}

.autocomplete-item-select {
    cursor: pointer;

    padding-bottom:5px;
}

    .autocomplete-item-select:hover {
        background: #aae6fc;
    }

.autocomplete-item-icon {
    padding: 5px;
    color: #3440B6;
}

Live check api

If you want to know if the api is alive and working, you can use the following apicall (curl example)


        curl --request OPTIONS --url 'https://autocomplete.p27.cldsvc.net/token' -v