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:
| 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: - 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 estimatesIf early and safe estimates are 12/02/2024 and 13/02/2024, the rangeoption will be 12/02/2024 - 13/02/2024. |
ShipupETA.init({
publicApiKey: 'my-public-key',
language: 'fr'
})
Updated 6 months ago