OkHi Documentation
v6.0.0
Ask or search…
K
Comment on page

API Reference

API Reference for the OkHi JavaScript browser library

new okcollect(target, props)

Argument
Description
target <HTMLElement>
DOM Element where the OkCollect component is mounted
props <Object>
See below
props
Argument
Description
API_KEY <string>
Api key string
userFirstName <string>
User's first name (Optional)
userLastName <string>
User's last name (Optional)
userPhoneNumber <string>
User's phone number
onAddressSelected <(UserAddress) => void>
Callback to be called with UserAddress once an address has been created/selected
onError <(Error) => void>
Callback to be called with Error object
streetviewEnabled <boolean>
Controls whether features for capturing the user's gate photo on streetview are enabled (Optional)
toTheDoorEnabled <boolean>
Controls whether features for capturing detailed user address data(building, apartment etc.) are enabled (Optional)
styleSettings
(Optional) See below
appSettings <Object>
See below
isDarkMode <boolean>
Controls the component light/dark theming (Optional. Defaults to false)
createOnly <boolean>
If set to true users will only be able to create new addresses, not select from pre-existing addresses (Optional. Defaults to false)
requiredFieldsConfig <Object> (optional)
(optional) See below
  • props <Object>
    • API_KEY <string> Api key string
    • userFirstName <string> User's first name (Optional)
    • userLastName <string> User's last name (Optional)
    • userPhoneNumber <string> User's phone number
    • onAddressSelected <(UserAddress) => void> Callback to be called with UserAddress once an address has been created/selected
    • onError <(Error) => void> Callback to be called with Error object
    • streetviewEnabled <boolean> Controls whether features for capturing the user's gate photo on streetview are enabled (Optional)
    • toTheDoorEnabled <boolean> Controls whether features for capturing detailed user address data(building, apartment etc.) are enabled (Optional)
    • styleSettings <Object>(Optional)
      • primaryColor <string> Controls the primary theme color of UI elements(Usually corresponds to the parent app's primary color or the business' brand color)
      • highlightColor <string> A secondary theme color that contrasts well with the primary color
    • appSettings <Object>
      • name <string> The parent app's name
      • version <string> The parent app's version number
    • isDarkMode <boolean> Controls the component light/dark theming (Optional. Defaults to false)
    • createOnly <boolean> If set to true users will only be able to create new addresses, not select from pre-existing addresses (Optional. Defaults to false)
    • requiredFieldsConfig <Object> (optional)
      • buildingNameOrNumber <boolean> If set to true requires the user to provide a building name value. The "Building Name or Number" input on the final ToTheDoor screen will be required.(Optional. Defaults to false).

UserAddress

  • geo_point: <Object>
    • lon: <number> longitude of the address
    • lat: <number> latitude of the address
  • id: <string> The id of the address
  • user_id: <string> The user's id in OkHi
  • url: <string> A public link to view the OkHi address
  • street_name: <string> Name of the street
  • directions: <string> (Optional) Directions to the location
  • property_name: <string> (Optional) Name of the building
  • display_title: <string> Full text address
  • street_view <Object> (Optional)
    • geo_point <Object>
      • lon: <number> longitude of the address
      • lat: <number> latitude of the address
    • pano_id: <string> Streetview pano id
    • url: <string> Streetview url