Customisation
The Postcoder integrator-js JavaScript library offers a wide range of customisation options which allow you to tailor its behaviour to suit your specific requirements. For guidance on integrating it into forms, pages and websites, refer to the Setup guide.
Limit to one country without a country dropdown
Replace the country
parameter with countrycode
and set it to a 2-character country code:
...
countrycode: 'fr', // Show French suggestions only
...
Use your own custom CSS
Add the defaultstyles
parameter, set it to false
and include your own CSS on your page:
...
defaultstyles: false, // Switch off default styles
...
Include an organisation name field
Add the organisation
parameter and set it using a query selector that targets the ID or name attribute of the organisation field on your form, for example #organisation
or [name="organisation"]
:
...
outputfields: {
organisation: '#organisation', // Use this organisation field
addressline1: '#address_line_1',
...
Change the number of address lines
Add up to 9 addressline
parameters and set them using query selectors that target the ID or name attributes of the address line fields on your form, for example #address_line_3
or [name="address_line_3"]
:
outputfields: {
addressline1: '#address_line_1', // Use 3 address lines
addressline2: '#address_line_2',
addressline3: '#address_line_3',
posttown: '#post_town',
...
Filter suggestions by residential or non-residential
Add the usercategory
parameter and set it to either R
for residential or N
for non-residential; UK and Ireland only:
...
usercategory: 'R', // Show residential suggestions only
...
Filter suggestions by a full or partial postcode
Add the postcode
field and set it to either a full or partial UK postcode:
...
postcode: 'nr', // Show suggestions with a postcode starting with NR
...
Change the maximum number of suggestions
Add the maximumresults
parameter and set it to between 5 and 30 (default):
...
maximumresults: '5', // Show up to 5 suggestions (until a postcode or street is reached)
...
Tag your address lookups with a custom identifier
Add the identifier
field to your code and set it to a meaningful label which you can track and analyse on the Identifier Usage page:
...
identifier: 'Support_Contact_Form', // Use this custom identifier
...
Use query selectors to target IDs or names
Use query selectors that target the ID or name attributes of the fields on your form, for example #country
or [name="country"]
:
...
country: '[name="country"]', // Reference the country field by name
...