How to add what3words to your website in just two lines of code
To make it as easy as possible for businesses to accept and display 3 word addresses, we’ve made it simple to add a what3words input field with AutoSuggest, address validation and country clipping – with just two lines of code.
Here’s a quick walk through of how it works.
Tip: type your 3 word address in the box above and see how it works.
<script src=”https://assets.what3words.com/sdk/v3/what3words.js?key=YOUR_API_KEY”></script> <what3words-autosuggest/>
The input uses the powerful features of the what3words API V3 to provide accurate suggestions as the user enters a 3 word address. These suggestions can be refined to only display results from specific countries.
The input also contains validation to check whether the inputted text is a valid 3 word address and alerts the user if the 3 word address is not valid. The HTML attributes of the element can be used to further customise the element with the ability to adjust characteristics such as placeholder text, the number of suggested results, country clipping and focus. Simply adding the property, for example,clipToCountry=”GB” restricts results to the United Kingdom. Event handlers can also be harnessed to enable page content to be dynamically changed once text has been input.
Learn how to customise the attributes of the input or use event handlers in this tutorial.
How does the component work?
We used StencilJS to build 100% web standards compliant components that are small, performant and versatile. StencilJS powers the Ionic Framework used for cross-platform development and was a great choice to ensure we could build and deploy lightweight components compatible with a wide range of browsers.
Getting started with our component
This tutorial outlines the steps to adding what3words to your site and how the element can be customised using HTML properties.
Interested in developing exciting products using new technologies to make an impact on hundreds of thousands of people around the world?
Our team is on a mission to create the global standard for communicating location. We’re making the world an easier, more efficient and safer place for everyone.
You’ll be joining a group of talented people from all over the world on an unprecedented journey. Every day brings new challenges and we are always learning. At what3words, you will be proud to see your individual and team contributions making a real difference.
Visit our Jobs page to find out more.
We’re looking forward to adding more new and exciting components over the coming months.