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. Its extremely light-weight (~5kb), which eliminates any load performance concerns.

Check out our video demos to see how OkHi looks and behaves

Video demo

New user checkout, delivery address collection

Desktop-newuser-collect-otherlocation.mp4Google Docs

Return user checkout, zero click pre-selected delivery address

Desktop-repeat-user.mp4Google Docs

Prerequisites

api-key: You can obtain an api key by signing up here

Onward to the code 🚀

Include the OkHi JavaScript library to your HTML document. Make sure to place the script tag above your own JavaScript file.

Script tag

<script src="https://cdn.okhi.io/sandbox/web/v4/okhi.min.js">

HTML Document

<!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>
  <script src="https://cdn.okhi.io/sandbox/web/v4/okhi.min.js"></script>
  <script src="my_custom_javascript.js"></script>
</body>
</html>

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.

<!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>
  <div 
    id="lets-okhi" 
    data-firstname="John" 
    data-lastname="Doe" 
    data-phone="0722xxxxxx">
  </div>
  <script src="https://cdn.okhi.io/sandbox/web/v4/okhi.min.js"></script>
  <script src="my_custom_javascript.js"></script>
</body>
</html>

var okhi = new OkHi({ apiKey: 'my_api_key' });
var element = document.getElementById('lets-okhi');
var user = {
    firstName: element.getAttribute('data-firstname'),
    lastName: element.getAttribute('data-lastname'),
    phone: element.getAttribute('data-phone'),
};

var handleOnSuccess = function(data) {
// handle your success here with the data you get back
};

var handleOnError = function (error) {
// handle errors here e.g fallback to your own way of collecting a location information 
};

var locationCard = new okhi.LocationCard({
    element: element,
    user: user,
    onSuccess: handleOnSuccess,
    onError: handleOnError,
});

#lets-okhi {
    width: 100%;
    height: 300px;
}

*IMPORTANT* The onSuccess callback may be called multiple times as the user changes or manages their location.

Launching the OkHi Location 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. In the example below the user information 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>
</head>
<body>
  <button 
    id="lets-okhi" 
    data-firstname="John" 
    data-lastname="Doe" 
    data-phone="0722xxxxxx">
    Select your location
  </button>
  <script src="https://cdn.okhi.io/sandbox/web/v4/okhi.min.js"></script>
  <script src="my_custom_javascript.js"></script>
</body>
</html>

var button = document.getElementById('lets-okhi');

var handleOnSuccess = function (data) {
  // handle your success here with the data you get back
};

var handleOnError = function (error) {
  // handle errors here e.g fallback to your own way of collecting a location information 
};

var handleButtonClick = function () {
  var okhi = new OkHi({ apiKey: 'my_api_key' });
  var user = {
    phone: this.dataset.phone,
    firstName: this.dataset.firstname,
    lastName: this.dataset.lastname,
  };
  var locationManager = new okhi.LocationManager({
    user: user,
    onSuccess: handleOnSuccess,
    onError: handleOnError,
  });
  locationManager.launch();
};

button.addEventListener('click', handleButtonClick);

Want more customization options? We've got you covered! Check out the API Reference for styling configuration and more

PreviousOkHi on your Android app NextAPI Reference

Last updated 4 years ago