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


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

System fields

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

Pickup fields

data-pickup-company-namevarchar(128)Name of the company at pickup, if applicable
data-pickup-address1varchar(128)Pickup address, line 1
data-pickup-address2varchar(128)Pickup address, line 2 if applicable
data-pickup-postcodevarchar(10)Pickup postcode
data-pickup-cityvarchar(64)Pickup city
data-pickup-country-codevarchar(2)Pickup country code (i.e. GB)
See ISO_3166-1
data-pickup-location-latdecimal(20,16)Pickup location's latitude
data-pickup-location-lngdecimal(20,16)Pickup location's longitude
data-pickup-tips-how-to-findvarchar(256)Tips to help couriers find the pickup location
data-pickup-person-namevarchar(128)Person who's expecting the courier at the pickup location
data-pickup-emailvarchar(128)Person's email at pickup location
data-pickup-mobile-numbervarchar(40)Person's mobile phone at pickup location
data-pickup-phone-numbervarchar(40)Person's phone number at pickup location

Consignment fields

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

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

data-delivery-company-namevarchar(128)Name of the company at delivery, if applicable
data-delivery-address1varchar(128)Delivery address, line 1
data-delivery-address2varchar(128)Delivery address, line 2
data-delivery-postcodevarchar(10)Delivery postcode
data-delivery-cityvarchar(64)Delivery city
data-delivery-country-codevarchar(2)Delivery country code (i.e. GB)
See ISO_3166-1
data-delivery-location-latdecimal(20,16)Delivery location's latitude
data-delivery-location-lngdecimal(20,16)Delivery location's longitude
data-delivery-tips-how-to-findvarchar(256)Tips to help couriers find the delivery location
data-delivery-person-namevarchar(128)Person who's expecting the courier at the delivery location
data-delivery-emailvarchar(128)Person's email at delivery location
data-delivery-mobile-numbervarchar(40)Person's mobile number at delivery location
data-delivery-phone-numbervarchar(40)Person's phone number at delivery location


HTML5 example: <>
Vanilla Javascript example: <>
jQuery example: <>
Angular example: <>