DOCS

Install

/
Hello•
InícioComércio eletrônico global Integração Instalar

Instale o Hello legado

Saiba como instalar o Hello no site da sua loja.

Se você estiver usando Shopify, BigCommerce, Magento, Miva ou X-Cart, por favor leia a página de integração do plugin correspondente.

O script abaixo adicionará a bandeira do Zonos Hello ao seu site, reconhecerá o país de onde seus clientes estão visitando, os cumprimentará e fornecerá informações gerais sobre impostos e taxas para o país deles (básico).

Recursos adicionais estão disponíveis com um trabalho de desenvolvimento mínimo (mostrado abaixo).

Adicione o Hello ao seu site 

1

Adicione o script do Hello - básico

Adicionar este script ao código do seu site adicionará a bandeira do Zonos Hello ao seu site, reconhecerá o país de onde seus clientes estão visitando, os cumprimentará e fornecerá informações gerais sobre impostos e taxas para o país deles.

HABILIDADES NECESSÁRIAS: Habilidades básicas de web

Para instalar o Hello, aplique o script personalizado contendo sua chave de site única no seu site antes da tag de fechamento body.

Hello integration script

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

Zonos Hello deve ser carregado antes que qualquer funcionalidade adicional seja adicionada. Por favor, inclua quaisquer recursos adicionais após o script acima.

Não tem um script ainda? ?Clique aqui para baixar.

2

Gerar estimativa de impostos e taxas

HABILIDADES NECESSÁRIAS: Habilidades básicas de desenvolvedor

Quando esse recurso está habilitado, Hello pode fornecer estimativas de impostos e taxas quando um produto é visualizado ou adicionado ao carrinho. Hello também pode exibir cotações completas de impostos e taxas para todo o carrinho quando a página é visualizada.

A cotação de impostos e taxas pode ser colocada em cada página de produto ou na sua página principal de produtos, dependendo de como sua plataforma está configurada.

Para adicionar a cotação de impostos e taxas, aplique um script que se pareça com o mostrado abaixo. Os dois campos obrigatórios são name e price.

Exemplo: Abaixo está um exemplo de como o script aparecerá e funcionará na sua página.

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

Os scripts que podem ser usados precisarão ser ajustados para que funcionem no seu site. Certifique-se de que quaisquer dos seguintes scripts que você usar sejam colocados após o script inicial Zonos Hello.

Se você não estiver usando uma plataforma, você pode usar o seguinte para obter dinamicamente os detalhes do seu produto. Este script pegará o primeiro produto disponível. Você também pode ajustar este script para ser usado na página do carrinho do seu site. Você precisará percorrer todos os produtos e seus dados e, em seguida, enviá-los para o zonos.quote.

Hello script de integração

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>

Você pode adicionar valores adicionais dos campos do item abaixo e também alterar o currencyCode para ser sua moeda padrão.

Shopify e BigCommerce

Se estiver usando Shopify ou BigCommerce, use o código abaixo.

Shopify
BigCommerce

Se estiver usando o Shopify como sua plataforma, temos um script que você pode usar para extrair os dados do produto dos detalhes do seu produto Shopify.

O código abaixo possui uma função que será executada nas páginas de produto e na página do carrinho.

Hello script de integração

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>

Campos de citação 

CampoTipo de dadoDescrição
itemsarray

REQUERIDO

Uma lista de itens a serem incluídos na citação
currencyCodestringOs preços dos itens serão exibidos na moeda especificada pelo código de moeda de três caracteres. Padrão: USD
includedTaxRatenumberA taxa de imposto do item rate se o item incluir imposto
showDecimalboolAlterna a exibição do valor decimal nas moedas convertidas

Campos do item 

CampoTipo de dadoDescrição
namestring

REQUERIDO

O nome do produto
pricenumber

REQUERIDO

Preço unitário de um único produto
quantityintegerO número de produtos no carrinho. Padrão: 1
imagestringURL da imagem do produto
urlstringURL para o produto individual
hsCodestringO Código Harmonizado (código HS) do seu produto
categorystringA categoria do produto em seu site
countrystringCódigo ISO de duas letras do país de origem deste produto
customizationstringPersonalização do produto (por exemplo, tamanho, cor)
descriptionstringA descrição detalhada do produto
skustringO UPC ou SKU do produto

À medida que você fornece mais detalhes ao Zonos sobre seu produto, a precisão da estimativa geralmente será melhorada.

Personalizar Hello 

Mudar a localização da bandeira

HABILIDADES NECESSÁRIAS: Habilidades básicas de desenvolvedor

Por padrão, a bandeira do Zonos Hello aparecerá no canto inferior direito da sua página.

Aqui você encontrará algumas informações sobre como mudar a localização da bandeira, bem como ocultar certos elementos do seu site que você não deseja que os internacionais vejam.

Exemplo: Ocultando o frete grátis dos internacionais; isso também permitirá que você oculte Zonos Hello de clientes domésticos e de países específicos.

Se a localização for deixada em branco, o código usará o padrão.

Hello script de integração

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

Para o canto inferior esquerdo:

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

Para o canto superior esquerdo com um diálogo de informação flutuante:

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

  • flutuante refere-se ao Hello diálogo de informação que flutua no centro da página.
  • anexado refere-se ao Hello diálogo de informação que se abre sobre a bandeira.
  • flutuante é preferido ao posicionar a bandeira no top.

Ocultar conteúdo específico

HABILIDADES NECESSÁRIAS: Habilidades básicas de desenvolvedor

A classe z-intl é baseada no país doméstico atual. Se Hello estiver configurado para um país internacional, a classe z-intl atuará como uma classe oculta, escondendo o conteúdo ao qual .z-intl está vinculado.

Use o seguinte CSS para ocultar conteúdo. Substitua .your-content pelo conteúdo flutuante que você deseja ocultar.
.z-intl .your-content { display: none; }

Agora você pode ocultar Hello de seus clientes domésticos para que outros diálogos fiquem visíveis novamente.

Hello script de integração

1
2
3
4
5
6
#zonos {
  display: none;
}
.z-intl #zonos {
  display: block;
}

Ocultar para países específicos

Adicione o id #zonos combinado com o código do país que serve como a classe CSS para esse país na função .z-intl { display: none; }.

A linha deve se parecer com isso:

Hello script de integração

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

Ativar/desativar o splash

HABILIDADES NECESSÁRIAS: Habilidades básicas de desenvolvedor

Splash refere-se ao pop-up e ao aumento da caixa de diálogo Zonos, que contém informações adicionais sobre a política específica de impostos e taxas do seu país.\

Se você deseja ATIVAR e exibir o splash Zonos Hello na primeira visita de seus clientes:

Hello script de integração

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

Se deseja DESATIVAR a tela de boas-vindas do Zonos Hello para a primeira visita dos seus clientes:

Hello script de integração

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

Nota: Qualquer personalização da Zonos precisará estar dentro de uma tag script.

Perguntas frequentes 

Não sou um desenvolvedor e preciso de ajuda. Quais são as minhas opções?

Se tiver dúvidas, entre em contato com nossa equipe de suporte. Se não tiver os recursos para concluir a integração e precisar de assistência, entre em contato com nossa equipe de Serviços Profissionais.

Esta página foi útil?

© 2024 Zonoszonos.com
Nesta página:
  • Instale o Hello legado
  • Adicione o Hello ao seu site
  • Campos de citação
  • Campos do item
  • Personalizar Hello
  • Perguntas frequentes