OkHi on your website
Display and access user's OkHi locations on your website.
The OkHi JavaScript library provides you with a quick and easy way to start collecting high accuracy location information from your users.
Check out our video demos to see how OkHi looks and behaves👇
Video demo
New user checkout, delivery address collection
Return user checkout, zero click pre-selected delivery address
Prerequisites
API Keys: You can obtain your API keys by signing up here
Launching OkHi Address Manager 🚀
The following webpage is an example of a button that launches the OkHi address manager.
The OkHi Location Manager enables the user to create or select an already existing location. It can be launched from a simple button click or any other triggers you wish to have.
Whenever a user's OkHi address is created or used an SMS is sent to them notifying them of this usage
In this example, there are a few things to note:
We create a button with ID "lets-okhi"
The button has data attributes that contain the user's information, but feel free to customise this to however that suits you.
We then create a javascript function to launch OkHi when the button is clicked
We load the OkHi JavaScript library using a
script
tag
Next steps:
Loading the JavaScript library
To load the OkHi JavaScript library, use a script tag like the one below
Displaying a user's OkHi Location Card
The OkHi Location Card displays the most recently used location by the user. It also allows them to create or select another location via the Location Manager. To get started, create a div on your HTML Document where you'd want to display the location card and use the OkHi library as shown below. In the example the user's phone number is obtained from the data attribute in the HTML document, but feel free to customise this to however that suits you.
Whenever a user's OkHi address is created or used an SMS is sent to them notifying them of this usage
*IMPORTANT* The onSuccess callback may be called multiple times as the user changes or manages their location.
*IMPORTANT* To switch to production remember to change your client & server keys and branch ID to production ones and change the JS library to:
https://api.okhi.io/v5/okweb?clientKey=YOUR_CLIENT_API_KEY&branchId=YOUR_BRANCH_ID&callback=initOkHi
Next steps
Checkout the API Reference for more customisation options
Integrate the OkCollect Webhook
Last updated