Our browser plugin is compatible with all modern browsers and IE9+ (polyfills required).
This simple to use plugin helps you to get started quickly, allowing you to add postcode lookup to any address form in minutes.
See @firstclasspostcodes/plugin for detailed usage, guides and examples.
Add the plugin directly into your HTML with:
Note on older browsers: You will need to use a polyfill service, the following example covers all of the required language features:
Add the client library
We do not bundle the client library with the plugin, so you will need to add a separate script tag to require the JS client:
All JS library versions are available on the @firstclasspostcodes/js releases page.
Where the libary is loaded on pages including sensitive information, we recommend using the Subresource Integrity security feature.
Every version of the library is accompanied by an SRI hash file, the hash can be accessed directly using:
$ curl https://js.firstclasspostcodes.com/plugin/v1.0.4.sri.txt # => "sha256-45tfd... sha384-43567ytr..."
You can then update the above
<script> tag, adding the integrity attribute:
You need to configure the plugin to use your API Key which is available on your dashboard. Below is a minimal working setup, you can see more guides on how to better customise the plugin by viewing the documentation.
Address Line 1Address Line 2CountyCityPostcode
The plugin can be initialized with the same configuration overrides that you can supply for the @firstclasspostcodes/js library using the
apiOverrides property (an example of its usage is below).
If you're running the mock service docker container. You can configure the plugin to talk to it using the example below:
Whilst not necessarily required, if you need to listen to events happening we support attaching event handlers for the following:
||Fired when an address is selected from the drop down. Contains the address detail.|
Events are fired using the CustomEvent class. Event properties are included inside the
Event handlers can be attached using the following:
Our plugin is built using Svelte and an instantiated component is returned from the
FirstclasspostcodesPlugin() function. Therefore, the returned object is compatible with the documented Client-side component API.