DOCS

Install

/
Hello•
InicioComercio electrónico global Integración Instalar

Instalar Hello legacy

Aprende cómo instalar Hello en el sitio web de tu tienda.

Si estás utilizando Shopify, BigCommerce, Magento, Miva o X-Cart, por favor lee la página de integración del plugin correspondiente.

El script a continuación añadirá la bandera de Zonos Hello a tu sitio, reconocerá el país desde el que tus clientes están visitando, los saludará y proporcionará información general sobre aranceles e impuestos para su país (básico).

Funciones adicionales están disponibles con un trabajo de desarrollo mínimo (mostrado a continuación).

Añadir Hello a tu sitio 

1

Añadir el script de Hello - básico

Agregar este script al código de tu sitio añadirá la bandera de Zonos Hello a tu sitio web, reconocerá el país desde el que tus clientes están visitando, los saludará y proporcionará información general sobre aranceles e impuestos para su país.

HABILIDADES NECESARIAS: Habilidades básicas de web

Para instalar Hello, aplica el script personalizado que contiene tu clave única del sitio en tu sitio web antes de la etiqueta de cierre body.

Hello integration script

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

Zonos Hello debe cargarse antes de agregar cualquier funcionalidad adicional. Por favor, incluya cualquier característica adicional después del script anterior.

¿Todavía no tiene un script? ?Haga clic aquí para descargar.

2

Generar estimaciones de impuestos y aranceles

HABILIDADES NECESARIAS: Habilidades básicas de desarrollo

Cuando esta función está habilitada, Hello puede proporcionar estimaciones de impuestos y aranceles cuando se ve un producto o se agrega al carrito. Hello también puede mostrar cotizaciones completas de impuestos y aranceles para todo el carrito cuando se ve la página.

La cotización de impuestos y aranceles puede aparecer en cada página de producto o en su página principal de productos, dependiendo de cómo esté configurada su plataforma.

Para agregar la cotización de impuestos y aranceles, aplique un script que se parezca al que se muestra a continuación. Los dos campos requeridos son nombre y precio.

Ejemplo: A continuación se muestra un ejemplo de cómo se verá y funcionará el script en su página.

Hello script de integración

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

Los scripts que se pueden utilizar deberán ajustarse para que funcionen en su sitio. Asegúrese de que cualquiera de los siguientes scripts que utilice se coloque después del script inicial de Zonos Hello.

Si no está utilizando una plataforma, puede utilizar lo siguiente para obtener dinámicamente los detalles de su producto. Este script obtendrá el primer producto disponible. También puede ajustar este script para que se use en la página del carrito de su sitio. Deberá recorrer todos los productos y sus datos, y luego enviarlos a zonos.quote.

Hello script de integración

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>

Puede agregar valores adicionales de los campos del artículo a continuación y también cambiar el currencyCode para que sea su moneda predeterminada.

Shopify y BigCommerce

Si está utilizando Shopify o BigCommerce, use el código a continuación.

Si está utilizando Shopify como su plataforma, tenemos un script que puede usar que extraerá los datos del producto de los detalles de su producto en Shopify.

El siguiente código tiene una función que se ejecutará en las páginas de productos y en la página del carrito.

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>

Campos de cotización 

CampoTipo de datoDescripción
itemsarray

REQUERIDO

Una lista de artículos para incluir en la cotización
currencyCodestringLos precios de los artículos se mostrarán en la moneda especificada por el código de moneda de tres caracteres. Predeterminado: USD
includedTaxRatenumberLa tasa de impuesto rate si el artículo incluye impuestos
showDecimalboolActiva o desactiva la visualización del valor decimal en las monedas convertidas

Campos de artículo 

CampoTipo de datoDescripción
namestring

REQUERIDO

El nombre del producto
pricenumber

REQUERIDO

Precio unitario de un solo producto
quantityintegerLa cantidad de productos en el carrito. Predeterminado: 1
imagestringURL de la imagen del producto
urlstringURL al producto individual
hsCodestringEl Código Armonizado (código HS) para su producto
categorystringLa categoría del producto en su sitio
countrystringCódigo ISO de dos caracteres del país del que proviene este producto
customizationstringPersonalización del producto, por ejemplo, tamaño, color
descriptionstringLa descripción detallada del producto
skustringEl UPC o SKU del producto

A medida que proporcione más detalles a Zonos sobre su producto, la precisión de la estimación generalmente mejorará.

Personalizar Hello 

Cambiar la ubicación de la bandera

HABILIDADES NECESARIAS: Habilidades básicas de desarrollador

Por defecto, la bandera de Zonos Hello aparecerá en la esquina inferior derecha de su página.

Aquí encontrará información sobre cómo cambiar la ubicación de la bandera, así como ocultar ciertos elementos de su sitio web que no desea que los internacionales vean.

Ejemplo: Ocultar el envío gratuito de los internacionales; esto también le permitirá ocultar Zonos Hello de los clientes nacionales y de países específicos.

Si la ubicación se deja en blanco, el código utilizará la predeterminada.

Hello script de integración

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

Para la esquina inferior izquierda:

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

Para la esquina superior izquierda con un diálogo de información flotante:

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

  • flotante se refiere al Hello diálogo de información que flota en el centro de la página.
  • adjunto se refiere al Hello diálogo de información que se abre sobre la bandera.
  • flotante es preferido cuando se posiciona la bandera en la parte superior.

Ocultar contenido específico

HABILIDADES NECESARIAS: Habilidades básicas de desarrollador

La clase z-intl se basa en el país doméstico actual. Si Hello está configurado para un país internacional, la clase z-intl actuará como una clase oculta, ocultando el contenido al que está vinculada .z-intl.

Utiliza el siguiente CSS para ocultar contenido. Reemplaza .tu-contenido con el contenido flotante que deseas ocultar.
.z-intl .tu-contenido { display: none; }

Ahora puedes ocultar Hello de tus clientes domésticos para que otros diálogos sean visibles nuevamente.

Hello script de integración

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

Ocultar para países específicos

Agregue el id de #zonos combinado con el código de país que también funciona como la clase CSS para ese país en la función .z-intl { display: none; }.

La línea debería lucir algo así:

Script de integración de Hello

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

Activar/desactivar el splash

HABILIDADES NECESARIAS: Habilidades básicas de desarrollo

El splash se refiere a la ventana emergente y ampliación del cuadro de diálogo Zonos, que contiene información adicional sobre la política de impuestos y aranceles específica de su país.\

Si desea ACTIVAR y mostrar el splash de Zonos Hello para la primera visita de sus clientes:

Hello script de integración

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

Si desea desactivar la pantalla de bienvenida de Zonos Hello para la primera visita de sus clientes:

Hello integration script

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

Nota: Cualquier personalización de Zonos deberá estar dentro de una etiqueta script.

Preguntas frecuentes 

No soy un desarrollador y necesito ayuda. ¿Cuáles son mis opciones?

Si tiene preguntas, por favor contacte a nuestro equipo de soporte. Si no cuenta con los recursos para completar la integración y necesita ayuda, por favor contacte a nuestro equipo de Servicios Profesionales.

¿Fue útil esta página?

¿Preguntas?

Contáctenos.
© 2024 Zonoszonos.com
En esta página:
  • Instalar Hello legacy
  • Añadir Hello a tu sitio
  • Campos de cotización
  • Campos de artículo
  • Personalizar Hello
  • Preguntas frecuentes