JS library setup: ShipupETA

🚧

A new version of the docs is available here

General

The Shipup Smart Delivery Estimate javascript library, called ShipupETA, allows you to display an estimated date of arrival in the checkout process of your customers.
The library connects your online store with Shipup's API implementing a machine learning model that retrieves the most precise delivery date estimation for your orders.
By adding the ShipupETA library to your checkout page you will be able to show your customers a precise expected delivery date depending on the delivery mode they select.
With this JS library you can have this type of checkout page:

Installation instructions

Add this code snippet between the head tags of your page (you can also add it in the body if you don't have access to the head).

<script src="https://cdn.shipup.co/shipup-eta/latest/shipup-eta.js"></script>

Configuration instructions

Add this snippet at the end of your page's body. Be sure to replace my-public-key with your own public API key.

πŸ“˜

You can find your public API key here. Keys are located at the bottom of the page.

<script>
	ShipupETA.init({ publicApiKey: 'my-public-key' })
</script>

ShipupETA initialization options

The ShipupETA.init method is used to configure the library. It accepts an options object as the only parameter. The below table displays available fields for this object:

FIELDDESCRIPTION
options.publicApiKey
string, required
Your public API key.
options.defaultDestinationAddress
address, optional
The destination address to use by default for the delivery date prediction.
options.carrierCodesCssSelectorsMapping
object, optional
An object consisting of Shipup carrier codes for keys and CSS selectors for values. This selector determines which DOM nodes should be used to inject the prediction for a given carrier.
options.language
string, optional. Available values are 'en', 'es' and 'fr'
The language used to display the predictions.
By default, it will detect the browser language or fall back to English.
options.estimationMode
string, optional. Available values are 'early', 'safe', 'range'
Determines what estimate to display:

- earlydisplays the most optimistic estimation
- safeadds an extra delay of one day to the optimistic estimation (before post-processing rules are applied)
- rangedisplays a range between the early and safe estimates
If early and safe estimates are12/02/2024 and 13/02/2024, the rangeoption will be 12/02/2024 - 13/02/2024.
ShipupETA.init({
  publicApiKey: 'my-public-key',
  language: 'fr'
})