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.
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.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>My site name</title>
</head>
<body>
<button
id="lets-okhi"
data-firstname="John"
data-lastname="Doe"
data-phone="+254722xxxxxx">
Select your location
</button>
<script>
function initOkHi(){
document.getElementById('lets-okhi').addEventListener('click', function() {
var user = new window.okhi.OkHiUser({
phone: this.dataset.phone,
firstName: this.dataset.firstname,
lastName: this.dataset.lastname,
});
var okhiConfig = new window.okhi.OkHiConfig({
streetView: true,
});
const okhiStyle = new okhi.OkHiStyle({
color: "rgb(0, 131, 143)",
logo: "https://cdn.okhi.co/icon.png"
});
var locationManager = new okhi.OkHiLocationManager({
user: user,
config: okhiConfig,
style: okhiStyle,
mode: okhi.OkHiLocationManagerLaunchMode.select_location
});
locationManager.launch(function(error, data) {
if (error) {
// handle errors
console.log(error.code);
console.log(error.message);
} else {
// handle success data
var location = data.location;
var user = data.user;
}
});
});
}
</script>
<script src="https://sandbox-api.okhi.io/v5/okweb?clientKey=YOUR_CLIENT_API_KEY&branchId=YOUR_BRANCH_ID&callback=initOkHi" async defer></script>
</body>
</html>
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
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.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>My site name</title>
<style>
#lets-okhi {
width: 100%;
height: 300px;
}
</style>
</head>
<body>
<div
id="lets-okhi"
data-firstname="John"
data-lastname="Doe"
data-phone="+254722xxxxxx">
</div>
<script>
function initOkHi() {
var element = document.getElementById('lets-okhi');
var user = new window.okhi.OkHiUser({
firstName: element.getAttribute('data-firstname'),
lastName: element.getAttribute('data-lastname'),
phone: element.getAttribute('data-phone'), // *Required*
});
var locationCard = new window.okhi.OkHiLocationCard(
{
user: user,
},
element,
function(error, data) {
if (error) {
// handle errors
} else {
// handle success data
}
});
}
</script>
<script src="https://sandbox-api.okhi.io/v5/okweb?clientKey=YOUR_CLIENT_API_KEY&branchId=YOUR_BRANCH_ID&callback=initOkHi" async defer></script>
</body>
</html>
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
