Zonos Hello

Install Zonos Hello on your site

Include your custom hello script with your unique siteKey. You can obtain your unique key by completing the signup on hello.zonos.com

<script src="https://hello.zonos.com/hello.js?siteKey=a1b2c3d4e5f6g7"></script>

The Script should be placed before any calls to zonos.config.

Generate an estimated Duty and Tax quote

A great place to get a duty/tax quote is on your product detail page. As the customer is looking at your product they will know what duties / takes to expect

To create a duty tax quote you can send a list of items to Zonos with the following javascript

zonos.config({
    items: [{
        name: "The name of the product",
        price: 19.95,
        quantity: 2,
        image: "https://example.com/product-123.png",
        url: "https://example.com/product-123",
        sku: "123"   
    }]
})

Item fields

Field Data Type Description
name String (required) The product name
price Number (required) Unit price of a single product
quantity Integer The number of products to estimate. If this number is not provided it will default to 1
image String Url of the product image
url String Url to the individual product
hsCode String The Harmonized Code for your product
brand String  
category String The category the product belongs to on your site.
country String Two character ISO code of the country this product originated from
customization String Product customizations (ie size, color)
description String The detailed description of the product
sku String The UPC or sku of the product

As you provide more details to Zonos about your product the accuracy of the estimate can be improved.

Customize hello to show in the bottom left

By default hello will show up in the bottom right corner of your website. If you already have a floating content dialog in the bottom right you can move hello to the left with the following javascript

zonos.config({location: 'left'});

If your website already has floating content dialogs in both bottom corners of your site Zonos recommends hiding one of the floating content dialogs for international customers.

.z-intl .your-dialog { display: none; }

Adjust the content displayed on your site for international customers

Zonos hello will add a css class z-intl to the body tag in your html. By adding css style rules, you can hide content that does not apply to your international customers. For example

.z-intl .free-shipping {
    display: none;
}

Currency conversion

(premium)

For premium customers that have the currency conversion enabled you can have it re-trigger the conversion by calling the following javascript.

zonos.displayCurrency()

Calling displayCurrency may be needed if your site is loading product information dynamically after the page has loaded.