JavaScript Widget
Get started
How to install
- Copy the SDK code to your website, preferably before
</body>tag. - After the SDK is executed,
Gophr.reload()will be available. - Internationalisation is coming soon.
Quick booking
How it works
- Make sure the SDK is included just once in your website
- Add the HTML code where you want the button to appear
- 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
| Field | Type | Description |
|---|---|---|
| data-env | varchar(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) |
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
| Field | Type | Description |
|---|---|---|
| data-weight | decimal(10,3) | Weight of parcel in kg |
| data-size-x | decimal(10,2) | Parcel's width in centimeters |
| data-size-y | decimal(10,2) | Parcel's height in centimeters |
| data-size-z | decimal(10,2) | Parcel's depth in centimeters |
| data-is-food | int 0/1 | Is there food inside the parcel? |
| data-is-fragile | int 0/1 | Is the parcel fragile? |
| data-is-liquid | int 0/1 | Is there liquid inside the parcel? |
| data-is-not-rotatable | int 0/1 | Is the parcel not rotatable? |
Job fields
| Field | Type | Description |
|---|---|---|
| data-reference-number | varchar(40) | Your reference number |
| data-earliest-pickup-time | datetime | Earliest pickup time |
| data-pickup-deadline | datetime | Pickup deadline |
| data-delivery-deadline | datetime | Delivery deadline |
| data-package-value | decimal(15,2) | Package value (declare this field if you want your parcel to be insured) |
| data-is-first-war-job | int 0/1 | indicates if it's a wait and return job |
| data-vehicle-type | tinyint | Vehicle 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) |
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/>
Updated 7 days ago