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.
Prerequisites
API Keys: You can obtain your API keys by signing up here
Quickstart 🚀
Enabling your users to create a new address or select an existing one is as simple as:
Always use your phone number or a phone number you own during testing as a message will be sent to this number after an address is created.
newokcollect({ target:document.querySelector('#address'), props: { API_KEY:"<CLIENT-KEY>", userFirstName:"Gift", userLastName:"Moore", userPhoneNumber: "+234xxxxx", // It is important to provide your actual phone number, as a message will be sent to this number
email:"<email>" onAddressSelected: (userAddress) => {console.log(userAddress) },onError: (error) => {console.log(error) }, appSettings: { name:"<app-name>", version:"<app-version>" },... }});
Whenever a user's OkHi address is created or used an SMS is sent to them notifying them of this usage
OkCollect supports two modes of integration. Single-step and Multi-step integration. Which mode of integration suits your app depends on the time user profile data is available to your app. Follow the Single-step integration guide if you’re collecting the user’s address as part of your user signup flow or as part of a checkout form where you’re prompting user profile data
On the other hand if user profile data is available to your app before the point of address collection (for example in a multi-step registration form or a user profile update screen), follow the Multi-step integration guide.
Single-step Integration
OkCollect requires a few data items on the user creating an address like the user's name and phone number. But oftentimes such user data is not available ahead of time since we commonly capture a user's address as part of our user input form.
To integrate OkCollect on the same form where we're prompting the rest of the user data requires reactively forwarding user input to OkCollect. Here's a full example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>OkCollect Demo</title>
<script src="https://api.okhi.io/v5/okweb/v2?clientKey=<CLIENT-KEY>&branchId=<BRANCH-ID>"></script>
</head>
<body>
<div style="margin: 0 auto; max-width: 500px; display: flex; flex-direction: column; gap: 8px">
<input id="firstName" name="firstName" placeholder="First Name" />
<input id="lastName" name="lastName" placeholder="Last Name" />
<input id="phoneNumber" name="phoneNumber" placeholder="Phone Number" />
<div id="address"></div>
</div>
<script>
const c = new okcollect({
target: document.querySelector('#address'),
props: {
API_KEY: "<CLIENT-KEY>",
userFirstName: "Gift",
userLastName: "Moore",
userPhoneNumber: "+234xxxx", // It is important to provide your actual phone number, as a message will be sent to this number
onAddressSelected: (userAddress) => {
console.log(userAddress)
},
onError: (error) => {
console.log(error)
},
streetviewEnabled: true,
toTheDoorEnabled: true,
styleSettings: {
primaryColor: "#005D67",
highlightColor: "#85FFC7"
},
appSettings: {
name: "Example App",
version: "1.0.0"
},
}
});
document.querySelector('#firstName').addEventListener('input', (ev) => {
c.$set({ userFirstName: ev.target.value });
});
document.querySelector('#lastName').addEventListener('input', (ev) => {
c.$set({ userLastName: ev.target.value });
});
document.querySelector('#phoneNumber').addEventListener('input', (ev) => {
c.$set({ userPhoneNumber: ev.target.value });
});
</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 onAddressSelected callback may be called multiple times as the user changes or manages their address.
Multi-step Integration
But there are cases where we have the user's data available ahead of time. For instance in a multi-step user creation flow or in case we want to collect a user's address only as part of an update profile feature. In such cases we don't have to sync user form inputs to OkCollect properties as we did above. Here's a full example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>OkCollect Demo</title>
<script src="https://api.okhi.io/v5/okweb/v2?clientKey=<CLIENT-KEY>&branchId=<BRANCH-ID>"></script>
</head>
<body>
<div style="margin: 0 auto; max-width: 500px">
<p>First Name: Gift</p>
<p>Last Name: Moore</p>
<p>Phone Number: +234xxxx</p> <!-- It is important to provide your actual phone number, as a message will be sent to this number -->
<div id="address"></div>
</div>
<script>
new okcollect({
target: document.querySelector('#address'),
props: {
API_KEY: "<CLIENT-KEY>",
userFirstName: "Gift",
userLastName: "Moore",
userPhoneNumber: "+234xxxxx", // It is important to provide your actual phone number, as a message will be sent to this number
onAddressSelected: (userAddress) => {
console.log(userAddress)
},
onError: (error) => {
console.log(error)
},
styleSettings: {
primaryColor: "#005D67",
highlightColor: "#85FFC7"
},
appSettings: {
name: "Example App",
version: "1.0.0"
},
}
});
</script>
</body>
</html>
Non-blocking integration guide
You may have noticed that in the previous examples OkCollect’s javascript library was imported at the top of the page’s html. Doing so blocks rendering of the rest of the page and increases the page’s load time.
We can get around this problem by using the library’s callback api and loading it asynchronously.
