View our Figma file of user interface assets for this tutorial
Displaying a 3 word address
- The 3 words address can be entered into an existing field or as it’s own independent field.
- The words in a 3 word address should always be separated by a full stop (‘.’), please don’t use spaces or commas. There are exceptions for other scripts.
- what3words should feel native to your app or website, so we recommend using your existing styling and typography. You can show our slashes ‘///’ in red ( #E11F26 ) or use your primary colour.
- If displaying a 3 word address in a secondary language, you only need to display the slashes once. This is so users understand that they both refer to the same address.
Entering a 3 word address
- A user should be able to enter a 3 word address with or without the ‘///’ at the beginning
- Once the user has entered the first letter of the 3rd word the autosuggest feature should be displayed
- For simplicity, we recommend only displaying 3 suggested results
- Every address should be accompanied by it’s nearest location and the flag of the country it’s in. The country flags are included in the Zip file listed at the top of this tutorial
Displaying a 3 word address on a map
There are 2 ways of display a 3 word address on a map:
- When there is a search bar that displays a 3 word address, you only need to place the what3words pin on the map.
- When there is no search bar present, you will need to present the whole 3 word address on the map as shown.