DOCS

Hello events

/

Hello events

How to use Hello events.

Learn how Zonos Hello uses events and methods, and how you can use these to enhance your ecommerce website.

z-country-change 

This event will fire each time the country is changed, including the initial country selection. The event detailproperty will be an object that includes code and name.

PropertyDescription
codeTwo-character ISO code of the country the product originated from
nameCountry name

Hello integration script

1
2
3
4
{
  "code": "US",
  "name": "United States"
}

z-duty-tax-quote 

This event will fire once a duty and tax quote response is received. The event detail property will be an object with the following properties:

PropertyDescription
subtotalThe item subtotal that the quote was based on
taxOrVatThe estimated sales tax or VAT amount quoted based on the subtotal
dutyTotalThe estimated duty amount quoted based on the subtotal
dutyTaxTotalThe combined values of taxOrVat and dutyTotal
foreign (premium)An object containing the same values as above, which is then converted into the foreign currency amount

Hello integration script

1
2
3
4
5
6
7
8
9
10
11
12
13
{
  "subtotal": 89.99,
  "taxOrVat": 18.0,
  "dutyTotal": 32.54,
  "dutyTaxTotal": 50.54,
  "foreign": {
    "currencyCode": "GBP",
    "subtotal": 89.99,
    "taxOrVat": 18.0,
    "dutyTotal": 32.54,
    "dutyTaxTotal": 50.54
  }
}

z-message-change 

This event will fire each time the displayed Hello message is changed. The event detail property will be an object that includes the message.

PropertyDescription
messageHtml string of the currently displayed message

Hello integration script

1
2
3
{
  "message": "<div>Welcome ...</div>"
}

Methods 

Below are utility methods you can use to integrate with your site.

MethodReturnsDescription
zonos.isDomestic()BooleanTrue if the current country is domestic
zonos.country()StringGet the currently selected country code.
zonos.country(code)StringSet the country manually and return it. code should be a two-character ISO code.

zonos.config(object) is a method utilized by Hello. It can be set up to work with estimating quotes, converting currency, or redisplaying the Hello splash screen and moving the flag position. Depending on which of these you want to do, the object sent to config changes:

TaskPopulate the config with the object like…
Estimating quotes{detail: {items: [{id: "String", name: "String", price: Double / "String", quantity: Integer / "String", image: "String URL of image / Optional", hsCode: "String / Optional", category: "String / Optional", country: "String (country of origin) / Optional", SKU: "String / Optional"}], currencyCode: "String / optional default to USD", includedTaxRate: Double / optional default to 0}}
Converting currency{detail: {currencySelectors: ["css selector 1", "css selector 2"], customConverter: "custom function to convert the selectors / Optional, best to leave as default", showDecimal: boolean / Optional}}
Redisplaying the Hello splash screen and moving the flag position{detail: {location: "String options are: left, right, top, bottom, floating & attached / Optional", showSplash: boolean / Optional}}

Was this page helpful?