JavaScript Widget

Get started

How to install

  1. Copy the SDK code to your website, preferably before </body> tag.
  2. After the SDK is executed, Gophr.reload() will be available.
  3. Internationalisation is coming soon.

Quick booking

How it works

  1. Make sure the SDK is included just once in your website
  2. Add the HTML code where you want the button to appear
  3. Set the fields you want to be automatically included in the draft

Settings

Below are all available fields that can be set, separated by category.

System fields

FieldTypeDescription
data-envvarchar(128)Use data-env="sandbox" for tests. Remove this field when production ready.

Pickup fields

Field

Type

Description

data-pickup-company-name

varchar(128)

Name of the company at pickup, if applicable

data-pickup-address1

varchar(128)

Pickup address, line 1

data-pickup-address2

varchar(128)

Pickup address, line 2 if applicable

data-pickup-postcode

varchar(10)

Pickup postcode

data-pickup-city

varchar(64)

Pickup city

data-pickup-country-code

varchar(2)

Pickup country code (i.e. GB)
See ISO_3166-1

data-pickup-location-lat

decimal(20,16)

Pickup location's latitude

data-pickup-location-lng

decimal(20,16)

Pickup location's longitude

data-pickup-tips-how-to-find

varchar(256)

Tips to help couriers find the pickup location

data-pickup-person-name

varchar(128)

Person who's expecting the courier at the pickup location

data-pickup-email

varchar(128)

Person's email at pickup location

data-pickup-mobile-number

varchar(40)

Person's mobile phone at pickup location

data-pickup-phone-number

varchar(40)

Person's phone number at pickup location

Consignment fields

FieldTypeDescription
data-weightdecimal(10,3)Weight of parcel in kg
data-size-xdecimal(10,2)Parcel's width in centimeters
data-size-ydecimal(10,2)Parcel's height in centimeters
data-size-zdecimal(10,2)Parcel's depth in centimeters
data-is-foodint 0/1Is there food inside the parcel?
data-is-fragileint 0/1Is the parcel fragile?
data-is-liquidint 0/1Is there liquid inside the parcel?
data-is-not-rotatableint 0/1Is the parcel not rotatable?

Job fields

FieldTypeDescription
data-reference-numbervarchar(40)Your reference number
data-earliest-pickup-timedatetimeEarliest pickup time
data-pickup-deadlinedatetimePickup deadline
data-delivery-deadlinedatetimeDelivery deadline
data-package-valuedecimal(15,2)Package value (declare this field if you want your parcel to be insured)
data-is-first-war-jobint 0/1indicates if it's a wait and return job
data-vehicle-typetinyintVehicle type (10: pushbike, 15: cargobike, 20: motorbike, 40: van)

Delivery fields

Field

Type

Description

data-delivery-company-name

varchar(128)

Name of the company at delivery, if applicable

data-delivery-address1

varchar(128)

Delivery address, line 1

data-delivery-address2

varchar(128)

Delivery address, line 2

data-delivery-postcode

varchar(10)

Delivery postcode

data-delivery-city

varchar(64)

Delivery city

data-delivery-country-code

varchar(2)

Delivery country code (i.e. GB)
See ISO_3166-1

data-delivery-location-lat

decimal(20,16)

Delivery location's latitude

data-delivery-location-lng

decimal(20,16)

Delivery location's longitude

data-delivery-tips-how-to-find

varchar(256)

Tips to help couriers find the delivery location

data-delivery-person-name

varchar(128)

Person who's expecting the courier at the delivery location

data-delivery-email

varchar(128)

Person's email at delivery location

data-delivery-mobile-number

varchar(40)

Person's mobile number at delivery location

data-delivery-phone-number

varchar(40)

Person's phone number at delivery location

Examples

HTML5 example: <https://jsfiddle.net/Gophr/wm610sa4/>
Vanilla Javascript example: <https://jsfiddle.net/Gophr/kr1e9suk/>
jQuery example: <https://jsfiddle.net/Gophr/tarhu8a3/>
Angular example: <http://jsfiddle.net/Gophr/0v4n8qm6/>