---
updatedAt: 2025-05-21T20:20:40.000Z
agentTools:
  projectIndex: https://developers.gophr.com/llms.txt
---

# 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

| Field    | Type         | Description                                                                |
| :------- | :----------- | :------------------------------------------------------------------------- |
| data-env | varchar(128) | Use data-env="sandbox" for tests. Remove this field when production ready. |

#### Pickup fields

<Table align={["left","left","left"]}>
  <thead>
    <tr>
      <th>
        Field
      </th>

      <th>
        Type
      </th>

      <th>
        Description
      </th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>
        data-pickup-company-name
      </td>

      <td>
        varchar(128)
      </td>

      <td>
        Name of the company at pickup, if applicable
      </td>
    </tr>

    <tr>
      <td>
        data-pickup-address1
      </td>

      <td>
        varchar(128)
      </td>

      <td>
        Pickup address, line 1
      </td>
    </tr>

    <tr>
      <td>
        data-pickup-address2
      </td>

      <td>
        varchar(128)
      </td>

      <td>
        Pickup address, line 2 if applicable
      </td>
    </tr>

    <tr>
      <td>
        data-pickup-postcode
      </td>

      <td>
        varchar(10)
      </td>

      <td>
        Pickup postcode
      </td>
    </tr>

    <tr>
      <td>
        data-pickup-city
      </td>

      <td>
        varchar(64)
      </td>

      <td>
        Pickup city
      </td>
    </tr>

    <tr>
      <td>
        data-pickup-country-code
      </td>

      <td>
        varchar(2)
      </td>

      <td>
        Pickup country code (i.e. GB)\
        See [ISO\_3166-1](https://en.wikipedia.org/wiki/ISO_3166-1)
      </td>
    </tr>

    <tr>
      <td>
        data-pickup-location-lat
      </td>

      <td>
        decimal(20,16)
      </td>

      <td>
        Pickup location's latitude
      </td>
    </tr>

    <tr>
      <td>
        data-pickup-location-lng
      </td>

      <td>
        decimal(20,16)
      </td>

      <td>
        Pickup location's longitude
      </td>
    </tr>

    <tr>
      <td>
        data-pickup-tips-how-to-find
      </td>

      <td>
        varchar(256)
      </td>

      <td>
        Tips to help couriers find the pickup location
      </td>
    </tr>

    <tr>
      <td>
        data-pickup-person-name
      </td>

      <td>
        varchar(128)
      </td>

      <td>
        Person who's expecting the courier at the pickup location
      </td>
    </tr>

    <tr>
      <td>
        data-pickup-email
      </td>

      <td>
        varchar(128)
      </td>

      <td>
        Person's email at pickup location
      </td>
    </tr>

    <tr>
      <td>
        data-pickup-mobile-number
      </td>

      <td>
        varchar(40)
      </td>

      <td>
        Person's mobile phone at pickup location
      </td>
    </tr>

    <tr>
      <td>
        data-pickup-phone-number
      </td>

      <td>
        varchar(40)
      </td>

      <td>
        Person's phone number at pickup location
      </td>
    </tr>
  </tbody>
</Table>

#### 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

<Table align={["left","left","left"]}>
  <thead>
    <tr>
      <th>
        Field
      </th>

      <th>
        Type
      </th>

      <th>
        Description
      </th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>
        data-delivery-company-name
      </td>

      <td>
        varchar(128)
      </td>

      <td>
        Name of the company at delivery, if applicable
      </td>
    </tr>

    <tr>
      <td>
        data-delivery-address1
      </td>

      <td>
        varchar(128)
      </td>

      <td>
        Delivery address, line 1
      </td>
    </tr>

    <tr>
      <td>
        data-delivery-address2
      </td>

      <td>
        varchar(128)
      </td>

      <td>
        Delivery address, line 2
      </td>
    </tr>

    <tr>
      <td>
        data-delivery-postcode
      </td>

      <td>
        varchar(10)
      </td>

      <td>
        Delivery postcode
      </td>
    </tr>

    <tr>
      <td>
        data-delivery-city
      </td>

      <td>
        varchar(64)
      </td>

      <td>
        Delivery city
      </td>
    </tr>

    <tr>
      <td>
        data-delivery-country-code
      </td>

      <td>
        varchar(2)
      </td>

      <td>
        Delivery country code (i.e. GB)\
        See [ISO\_3166-1](https://en.wikipedia.org/wiki/ISO_3166-1)
      </td>
    </tr>

    <tr>
      <td>
        data-delivery-location-lat
      </td>

      <td>
        decimal(20,16)
      </td>

      <td>
        Delivery location's latitude
      </td>
    </tr>

    <tr>
      <td>
        data-delivery-location-lng
      </td>

      <td>
        decimal(20,16)
      </td>

      <td>
        Delivery location's longitude
      </td>
    </tr>

    <tr>
      <td>
        data-delivery-tips-how-to-find
      </td>

      <td>
        varchar(256)
      </td>

      <td>
        Tips to help couriers find the delivery location
      </td>
    </tr>

    <tr>
      <td>
        data-delivery-person-name
      </td>

      <td>
        varchar(128)
      </td>

      <td>
        Person who's expecting the courier at the delivery location
      </td>
    </tr>

    <tr>
      <td>
        data-delivery-email
      </td>

      <td>
        varchar(128)
      </td>

      <td>
        Person's email at delivery location
      </td>
    </tr>

    <tr>
      <td>
        data-delivery-mobile-number
      </td>

      <td>
        varchar(40)
      </td>

      <td>
        Person's mobile number at delivery location
      </td>
    </tr>

    <tr>
      <td>
        data-delivery-phone-number
      </td>

      <td>
        varchar(40)
      </td>

      <td>
        Person's phone number at delivery location
      </td>
    </tr>
  </tbody>
</Table>

#### Examples

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