Add Hello to your site
Add the Hello script - basic
Adding this script to your site's code will add the Zonos Hello flag to your website, recognize the country your customers are visiting from, greet them, and give general duty and tax information for their country.
SKILLS NEEDED : Basic web skills
To install Hello, apply the custom script containing your unique site key into your website before the closing body
tag.
Hello integration script
<script src="https://hello.zonos.com/hello.js?siteKey=YOURSITEKEY"></script>
Zonos Hello must be loaded before any additional functionality is added. Please include any additional features after the above script.
Don't already have a script? Click here to download.
Generate estimated duty and tax
SKILLS NEEDED : Basic developer skills
When this feature is enabled, Hello can provide duty and tax estimates when a product is viewed or added to the cart. Hello can also display full duty and tax quotes to the whole cart when the page is viewed.
The duty and tax quote can go on each product page or your main product page, depending on how your platform is set up.
To add the duty and tax quote, apply a script that looks like the one shown below. The two required fields are name
and price
.
Example: Below is an example of how the script will look and function on your page.
Hello integration script
zonos.quote({
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",
},
],
currencyCode: "USD",
});
Scripts that can be used will need to be adjusted to make them work for your site. Please make sure any of the following scripts you use are placed after the initial Zonos Hello Script.
If you are not using a platform, you can use the following to dynamically grab your product details. This script will grab the first product available. You can also adjust this script to be used on the cart page of your site. You will need to loop through all products and their data, then send that to the zonos.quote
.
Hello integration script
<script>
var zPrice = "";
var zName = "";
var zImg = "";
try {
if (document.querySelector("ID OR CLASSNAME") != null) {
zPrice = document.querySelectorAll("ID OR CLASSNAME").innerText;
}
if (document.querySelector("ID OR CLASSNAME") != null) {
zName = document.querySelector("ID OR CLASSNAME").innerText;
}
if (document.querySelector(".ID OR CLASSNAME") != null) {
zImg = document.querySelector("ID OR CLASSNAME").src;
}
zonos.quote({
items: [
{
name: zName,
price: zPrice,
image: zImg,
},
],
currencyCode: "USD",
});
} catch (error) {}
</script>
You can add additional values from the item fields down below and also change the
currencyCode
to be your default currency.
Shopify and BigCommerce
If you are using Shopify or BigCommerce use the code below.
If you are using Shopify as your platform, we have a script you can use that will pull the product data from your Shopify product details.
The below code has a function that will run on the product pages and the cart page.
Hello integration script
<script>
function znDutyTaxEstimateOnDetailPage() {
{% if product and product.price %}
zonos.quote({
items: [{ price: "{{ product.price | money_without_currency }}", name: "{{product.title | replace: '"', '\"'}}", url: "{{ shop.secure_url }}{{ product.url }}", image: "https:{{ product.featured_image | product_img_url: 'medium' }}"}],
currencyCode: '{{ shop.currency }}'
});
{% endif %}
}
function znDutyTaxEstimateOnCartPage() {
if (window.location.href.indexOf("cart") > -1) {
zonos.quote({
items: [
{% for item in cart.items %}
{ price: "{{ item.price | money_without_currency }}", quantity: {{item.quantity}}, name: "{{ item.title | replace: '"', '\"'}}", url: "{{ shop.secure_url }}{{item.url}}", image: "https:{{item.image| product_img_url: 'medium'}}"},
{% endfor %}
],currencyCode: '{{ shop.currency }}'});
}
}
znDutyTaxEstimateOnDetailPage();
znDutyTaxEstimateOnCartPage();
</script>
Quote fields
Field | Data type | Description |
---|---|---|
items | array REQUIRED | A list of items to include in the quote |
currencyCode | string | The item prices will display in the currency specified by the three-character currency code. Default: USD |
includedTaxRate | number | The item tax rate if the item includes tax |
showDecimal | bool | Toggles on or off showing the decimal value on converted currencies |
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 in the cart. Default: 1 |
image | string | URL of the product image |
url | string | URL to the individual product |
hsCode | string | The Harmonized Code (HS code) for your product |
category | string | The product’s category on your site |
country | string | Two-character ISO code of the country this product originated from |
customization | string | Product customization (e.g. 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 will usually be improved.
Customize Hello
Change the flag location
SKILLS NEEDED : Basic developer skills
By default, the Zonos Hello flag will appear in the lower right corner of your page.
Here you will find some information on how to change the location of the flag as well as hiding certain elements of your website that you don't want internationals to see.
Example: Hiding free shipping from internationals; this will also enable you to hide Zonos Hello from domestic customers and specific countries.
If the location is left blank, the code will use the default.
Hello integration script
zonos.config({ location: "right bottom attached" });
zonos.config({ location: "" });
For the bottom-left corner:
zonos.config({location: 'left'});
For the top-left corner with a floating information dialog:
zonos.config({location: 'left top floating'});
floating
refers to the Hello information dialog that floats in the center of the page.attached
refers to the Hello information dialog to open over the flag.floating
is preferred when positioning the flag at thetop
.
Hide specific content
SKILLS NEEDED : Basic developer skills
The z-intl
class is based off of the current domestic country. If Hello is set to an international country, the z-intl
class will act as a hidden class, hiding the content that .z-intl
is tied to.
Use the following CSS to hide content. Replace
.your-content
with floating content you want hidden.
.z-intl .your-content { display: none; }
Now you can hide Hello from your domestic customers so other dialogs are visible again.
Hello integration script
#zonos {
display: none;
}
.z-intl #zonos {
display: block;
}
Hide for specific countries
Add the #zonos id combined with the country code that doubles as the CSS class for that country to the .z-intl { display: none; }
function.
The line should look something like this:
Hello integration script
.z-intl #zonos.US {
display: none;
}
Turn on/off the splash
SKILLS NEEDED : Basic developer skills
Splash refers to the pop-up and enlargement of the Zonos dialog box, which contains additional information regarding their country’s specific duty and tax policy.\
If you would like to turn ON and display the Zonos Hello splash for your customers’ first visit:
Hello integration script
zonos.config({ showSplash: true });
If you would like to turn OFF the Zonos Hello splash for your customers’ first visit:
Hello integration script
zonos.config({ showSplash: false });
Note: Any Zonos customizations will need to be inside a
script
tag.
Frequently asked questions
I'm not a developer and need assistance. What are my options?
If you have questions, please contact our support team. If you do not have the resources to complete the integration and need assistance, please contact our Professional Services team.
Install Hello legacy
Learn how to install Hello on your store's website.If you are using Shopify, BigCommerce, Magento, Miva, or X-Cart please read the corresponding plugin integration page.
The script below will add the Zonos Hello flag to your site, recognize the country your customers are visiting from, greet them, and give general duty and tax information for their country (basic).
Additional features are available with minimal development work (shown below).