JS library setup: ShipupETA

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:

FIELD	DESCRIPTION
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: - `early`displays the most optimistic estimation - `safe`adds an extra delay of one day to the optimistic estimation (before post-processing rules are applied) - `range`displays a range between the early and safe estimates If early and safe estimates are`12/02/2024` and `13/02/2024`, the `range`option will be `12/02/2024 - 13/02/2024`.

ShipupETA.init({
  publicApiKey: 'my-public-key',
  language: 'fr'
})