API Reference

API Reference for the OkHi JavaScript browser library

new okcollect(target, props)

ArgumentDescription

target <HTMLElement>

DOM Element where the OkCollect component is mounted

props <Object>

See below

props

ArgumentDescription

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