Installation

tip

Be sure to follow our Javascript SDK installation instructions found here before continuing

<div 
    data-zt-type="estimated-delivery" 
    data-zt-show-countdown="true"
    data-zt-name="<PRODUCT_NAME>"
    data-zt-sku="<PRODUCT_SKU>"
    data-zt-image-url="<PRODUCT_IMAGE_URL>"
    data-zt-url="<PRODUCT_URL>"
    data-zt-in-stock="<IN_STOCK>"
    data-zt-price="<PRODUCT_PRICE_IN_CENTS>"
    data-zt-display-type="range"
    data-zt-render="city, state zip"
></div>

Method Arguments

Argument	Required/Optional	Type	Value
type	Required	string	estimated-delivery
sku	Required	string	the product sku to lookup. this value must be loaded into the merchant dashboard and mapped to a warehouse
name	Optional	string	the name of the product
image-url	Optional	string	the fully qualified url of the product image including https://
url	Optional	string	the fully qualified url of the product including https://
price	Optional	int	the price of the product in cents
date-format	Optional	string	the format for the estimated delivery date. Date formats can be viewed here
show-countdown	Optional	string	whether to show the "if ordered in XX hours" countdown
byline	Optional	string	the word or phrase to use before the date. The word 'by' or 'tomorrow' will be appended after this. The default value is 'Get it' which will translate to 'Get it by' or 'Get it tomorrow'
display-type	Optional	string	either 'default' or 'range'. Range will display two dates, the first is the estimated minimum arrival date and the second is the estimated maximum arrival date. Default will show the estimated date based on our computations.
render	Optional	string	can contain any combination of the words 'city', 'state', and/or 'zip'. Defaults to 'zip'
in-stock	Optional	boolean	either true or false depending on whether the product has stock on hand. Setting to false will hide the estimated delivery date.
backordered-until	Optional	string	the date the item is on backorder until. This will allow for backordered messaging to show or to hide the estimated delivery date completely.
cache	Optional	string	whether to used a cached response from our servers or not. We recommend not setting this value, but this can be useful on sandbox. Each non cached request will send a request to our servers and reduce from your available request budget.
callback	Optional	string	the name of the method for the callback

Optional Callback

<div
  data-zt-type="estimated-delivery"
  data-zt-name="<PRODUCT_NAME>"
  data-zt-sku="<PRODUCT_SKU>"
  data-zt-image-url="<PRODUCT_IMAGE_URL>"
  data-zt-url="<PRODUCT_URL>"
  data-zt-price="<PRODUCT_PRICE_IN_CENTS>"
  data-zt-in-stock="<IN_STOCK>"
  data-zt-display-type="range"
  data-zt-render="zip"
  data-zt-callback="myMethod"
></div>
<script>
  function myMethod(data) {
    console.log(data);
  }
  // or
  // window.myMethod
  // if using React and scoping prevents accessing the method
</script>

Callback Response Structure

{
  "date": "Thur, Oct 6",
  "byline": "Arrives tomorrow",
  "estimated_date": "2022-10-06T15:20:00-05:00"
}

Templating

You are not limited to the default estimated delivery date display when using our SDK. You can use a few defined template variables to adjust the display on your website. Outside of a few required variables, you are free to adjust in any way you see fit.

Template variables can be passed using the data-zt-template attribute. This attribute takes a string of bracketed reserved words which will be replaced during render with the appropriate values.

An example of templating looks like:

<div
  data-zt-type="estimated-delivery"
  data-zt-name="<PRODUCT_NAME>"
  data-zt-sku="<PRODUCT_SKU>"
  data-zt-image-url="<PRODUCT_IMAGE_URL>"
  data-zt-url="<PRODUCT_URL>"
  data-zt-price="<PRODUCT_PRICE_IN_CENTS>"
  data-zt-in-stock="<IN_STOCK>"
  data-zt-display-type="range"
  data-zt-render="zip"
  data-zt-template="{TRANSLATE_SHIPPING_TO} {ZIP_CODE_UPDATE_LINK} {HELP_TIP}<br />{ESTIMATED_DELIVERY_BYLINE} {ESTIMATED_DELIVERY_DATE}"
></div>

The table below lists all available template variables used for estimated delivery dates. The required template variables must be within your template string and must be available and accessible to your end user.

Variable	Required/Optional	Example Value	Description
ZIP_CODE_UPDATE_LINK	Required	90210	The zip code that can be edited/updated by the end user. This field is required since users should always be allowed to update the guessed value in order to correct discrepencies.
HELP_TIP	Required	(?)	The help-tip that is displayed. This variable is required because it informs the user about the input box and provides required accessibility and legal information.
TRANSLATE_BYLINE	Optional	Get it by	The translated value for 'Shipping to' or 'Deliver to'. This value can be set or modified within the merchant portal
ESTIMATED_DELIVERY_BYLINE	Optional	Get it by	the word or phrase directly in front of the estimated delivery date
ESTIMATED_DELIVERY_DATE	Required	Sat. Oct. 2nd	This is the estimated delivery date.

Byline Text

The byline is the word or phrase directly in front of the estimated delivery date. This can be set to your preference. The default value is 'Arrives by'. You could set this to 'Get it by', 'Delivers on', 'Pickup by', 'Est. delivery on', etc. Use a phrase that matches your style. Keep in mind, if there is more than one word, we will automatically remove the last word when the date of delivery is the following day (i.e. tomorrow) an for holidays (i.e. Christmas) if holidays are set within your settings. So, Arrives by becomes Arrives tomorrow or Arrives before Christmas etc. If you choose to use only one word, we will not modify the byline. So Arrives will still show as Arrives tomorrow. When choosing a phrase to use, be sure to take into account how it will be phrased in edge case scenarios such as described above.

info

The logic we use to determine whether the byline displays tomorrow is whether or not the estimated delivery date is within 1 day of the current users time and timezone. Outside this window, we will not customize the byline unless you have holidays configured to display. See the holidays section for more info.

<div
  data-zt-type="estimated-delivery"
  data-zt-byline="Arrives by"
  data-zt-name="<PRODUCT_NAME>"
  data-zt-sku="<PRODUCT_SKU>"
  data-zt-image-url="<PRODUCT_IMAGE_URL>"
  data-zt-url="<PRODUCT_URL>"
  data-zt-price="<PRODUCT_PRICE_IN_CENTS>"
  data-zt-in-stock="<IN_STOCK>"
  data-zt-display-type="range"
  data-zt-render="zip"
></div>