DOCS

Install

/
Hello•
HomeGlobal ecommerce Integration Install

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).

Add Hello to your site 

1

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

1
<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.

2

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

1
2
3
4
5
6
7
8
9
10
11
12
13
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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<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 

FieldData typeDescription
itemsarray

REQUIRED

A list of items to include in the quote
currencyCodestringThe item prices will display in the currency specified by the three-character currency code. Default: USD
includedTaxRatenumberThe item tax rate if the item includes tax
showDecimalboolToggles on or off showing the decimal value on converted currencies

Item fields 

FieldData typeDescription
namestring

REQUIRED

The product name
pricenumber

REQUIRED

Unit price of a single product
quantityintegerThe number of products in the cart. Default: 1
imagestringURL of the product image
urlstringURL to the individual product
hsCodestringThe Harmonized Code (HS code) for your product
categorystringThe product’s category on your site
countrystringTwo-character ISO code of the country this product originated from
customizationstringProduct customization, e.g., size, color
descriptionstringThe detailed description of the product
skustringThe 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

1
2
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'});

  • floatingrefers 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 the top.

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

1
2
3
4
5
6
#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

1
2
3
.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

1
zonos.config({ showSplash: true });

If you would like to turn OFF the Zonos Hello splash for your customers’ first visit:

Hello integration script

1
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.

Was this page helpful?

Questions?

Contact us.
© 2024 Zonoszonos.com
On this page:
  • Install Hello legacy
  • Add Hello to your site
  • Quote fields
  • Item fields
  • Customize Hello
  • Frequently asked questions