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