Hello•

主页全球电子商务集成安装

安装Hello遗留版

了解如何在您商店的网站上安装Hello。

如果您使用的Shopify BigCommerce Magento Miva X-Cart，请阅读相应的插件集成页面。

下面的脚本将把Zonos Hello标志添加到您的网站，识别您的客户访问的国家，向他们问好，并提供他们国家的一般关税和税务信息（基本）。

通过最少的开发工作可以获得额外功能（如下所示）。

将Hello添加到您的网站

添加Hello脚本 - 基本

将此脚本添加到您网站的代码中，将把Zonos Hello标志添加到您的网站，识别您的客户访问的国家，向他们问好，并提供他们国家的一般关税和税务信息。

所需技能：基本网页技能

要安装Hello，请在关闭body标签之前将包含您唯一站点密钥的自定义脚本应用到您的网站中。

Hello 集成脚本

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

Zonos Hello 必须在添加任何其他功能之前加载。请在上述脚本之后包含任何附加功能。

还没有脚本? 点击这里下载。

生成估计的关税和税费

所需技能 : 基本开发技能

启用此功能后，Hello 可以在查看或添加产品到购物车时提供关税和税费估算。Hello 还可以在页面查看时向整个购物车显示完整的关税和税费报价。

关税和税费报价可以放在每个产品页面或您的主产品页面上，具体取决于您的平台设置。

要添加关税和税费报价，请应用如下所示的脚本。两个必需字段是 name 和 price。

示例： 以下是脚本在您的页面上显示和功能的示例。

Hello 集成脚本

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

需要调整的脚本才能在您的网站上正常工作。请确保您使用的以下任何脚本都放在初始的 Zonos Hello 脚本之后。

如果您不使用平台，可以使用以下脚本动态获取您的产品详细信息。此脚本将获取第一个可用产品。您还可以调整此脚本以在您网站的购物车页面上使用。您需要循环遍历所有产品及其数据，然后将其发送到 zonos.quote。

Hello 集成脚本

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

您可以从下面的项目字段添加额外的值，并且还可以将 currencyCode 更改为您的默认货币。

Shopify 和 BigCommerce

如果您使用 Shopify 或 BigCommerce，请使用下面的代码。

Shopify

大商业

如果您将 Shopify 作为您的平台，我们有一个可以使用的脚本，它将从您的 Shopify 产品详情中提取产品数据。

下面的代码包含一个将在产品页面和购物车页面运行的函数。

Hello 集成脚本

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

报价字段

字段	数据类型	描述
`items`	array 必填	要包含在报价中的项目列表
`currencyCode`	string	项目价格将以三字符货币代码指定的货币显示。默认：USD
`includedTaxRate`	number	如果项目包含税，则为项目税 rate
`showDecimal`	bool	切换是否显示转换货币的十进制值

项目字段

字段	数据类型	描述
`name`	string 必填	产品名称
`price`	number 必填	单个产品的单价
`quantity`	integer	购物车中产品的数量。默认：1
`image`	string	产品图片的URL
`url`	string	单个产品的URL
`hsCode`	string	产品的协调编码（HS编码）
`category`	string	您网站上产品的类别
`country`	string	产品来源国的两字符ISO代码
`customization`	string	产品定制（例如：尺寸、颜色）
`description`	string	产品的详细描述
`sku`	string	产品的UPC或SKU

当您向 Zonos 提供更多关于您的产品的详细信息时，估算的准确性通常会提高。

自定义 Hello

更改旗帜位置

所需技能 : 基本开发技能

默认情况下，Zonos Hello 旗帜将出现在您页面的右下角。

在这里，您将找到有关如何更改旗帜位置以及隐藏您不希望国际用户看到的某些网站元素的信息。

示例：从国际用户那里隐藏免费送货；这也将使您能够从国内客户和特定国家隐藏 Zonos Hello。

如果位置留空，代码将使用默认值。

Hello 集成脚本

zonos.config({ location: 'right bottom attached' });
zonos.config({ location: '' });

对于左下角：

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

对于左上角带有浮动信息对话框：

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

floating指的是位于页面中心的Hello信息对话框。
attached指的是在国旗上方打开的Hello信息对话框。
在将国旗定位于top时，优先使用floating。

隐藏特定内容

所需技能：基本开发技能

z-intl类基于当前国内国家。如果Hello设置为国际国家，z-intl类将作为隐藏类，隐藏与.z-intl相关的内容。

使用以下CSS隐藏内容。将.your-content替换为您想要隐藏的浮动内容。
.z-intl .your-content { display: none; }

现在您可以将Hello从您的国内客户中隐藏，以便其他对话框再次可见。

Hello集成脚本

#zonos {
  display: none;
}
.z-intl #zonos {
  display: block;
}

针对特定国家隐藏

将 #zonos id 与国家代码结合，作为该国家的 CSS 类，添加到 .z-intl { display: none; } 函数中。

该行应如下所示：

Hello 集成脚本

.z-intl #zonos.US {
  display: none;
}

开启/关闭启动画面

所需技能 : 基本开发技能

启动画面指的是 Zonos 对话框的弹出和放大，其中包含有关其国家特定关税和税收政策的附加信息。\

如果您希望在客户首次访问时开启并显示 Zonos Hello 启动画面：

Hello 集成脚本

zonos.config({ showSplash: true });

如果您希望在客户第一次访问时关闭Zonos Hello启动画面：

Hello 集成脚本

zonos.config({ showSplash: false });

注意： 任何Zonos自定义都需要放在script标签内。

常见问题

我不是开发人员，需要帮助。我有哪些选择？

如果您有任何问题，请联系我们支持团队。如果您没有资源完成集成并需要帮助，请联系我们专业服务团队。

这个页面有帮助吗？

有问题吗？

联系我们。

查 Zonos

政策和协议