Aggiungi Hello al tuo sito
Aggiungi lo script di Hello - base
Aggiungere questo script al codice del tuo sito aggiungerà la bandiera di Zonos Hello al tuo sito web, riconoscerà il paese da cui i tuoi clienti stanno visitando, li saluterà e fornirà informazioni generali su dazi e tasse per il loro paese.
COMPETENZE NECESSARIE : Competenze web di base
Per installare Hello, applica lo script personalizzato contenente la tua chiave univoca del sito nel tuo sito web prima del tag di chiusura body
.
Hello script di integrazione
<script src="https://hello.zonos.com/hello.js?siteKey=YOURSITEKEY"></script>
Zonos Hello deve essere caricato prima che venga aggiunta qualsiasi funzionalità aggiuntiva. Si prega di includere eventuali funzionalità aggiuntive dopo lo script sopra.
Non hai già uno script? ?Clicca qui per scaricare.
Genera stime di dazi e tasse
COMPETENZE NECESSARIE : Competenze di base per sviluppatori
Quando questa funzionalità è abilitata, Hello può fornire stime di dazi e tasse quando un prodotto viene visualizzato o aggiunto al carrello. Hello può anche visualizzare citazioni complete di dazi e tasse per l'intero carrello quando la pagina viene visualizzata.
La citazione di dazi e tasse può essere posizionata su ciascuna pagina del prodotto o sulla tua pagina principale del prodotto, a seconda di come è configurata la tua piattaforma.
Per aggiungere la citazione di dazi e tasse, applica uno script che assomiglia a quello mostrato di seguito. I due campi richiesti sono name
e price
.
Esempio: Di seguito è riportato un esempio di come apparirà e funzionerà lo script sulla tua pagina.
Hello integration script
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',
});
Gli script che possono essere utilizzati dovranno essere adattati per funzionare con il tuo sito. Assicurati che uno dei seguenti script che utilizzi sia posizionato dopo il primo Zonos Hello Script.
Se non stai utilizzando una piattaforma, puoi utilizzare il seguente per acquisire dinamicamente i dettagli del tuo prodotto. Questo script acquisirà il primo prodotto disponibile. Puoi anche adattare questo script per essere utilizzato nella pagina del carrello del tuo sito. Dovrai eseguire un ciclo attraverso tutti i prodotti e i loro dati, quindi inviarli a zonos.quote
.
Hello script di integrazione
<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>
Puoi aggiungere valori aggiuntivi dai campi dell'elemento qui sotto e anche cambiare il
currencyCode
per essere la tua valuta predefinita.
Shopify e BigCommerce
Se stai utilizzando Shopify o BigCommerce, utilizza il codice qui sotto.
Se stai utilizzando Shopify come tua piattaforma, abbiamo uno script che puoi utilizzare che estrarrà i dati del prodotto dai dettagli del prodotto Shopify.
Il codice qui sotto ha una funzione che verrà eseguita sulle pagine dei prodotti e sulla pagina del carrello.
Hello integrazione script
<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>
Campi di quotazione
Campo | Tipo di dato | Descrizione |
---|---|---|
items | array OBBLIGATORIO | Un elenco di articoli da includere nella quotazione |
currencyCode | string | I prezzi degli articoli verranno visualizzati nella valuta specificata dal codice valuta di tre caratteri. Predefinito: USD |
includedTaxRate | number | L'imposta sugli articoli rate se l'articolo include l'imposta |
showDecimal | bool | Attiva o disattiva la visualizzazione del valore decimale sulle valute convertite |
Campi dell'articolo
Campo | Tipo di dato | Descrizione |
---|---|---|
name | string OBBLIGATORIO | Il nome del prodotto |
price | number OBBLIGATORIO | Prezzo unitario di un singolo prodotto |
quantity | integer | Il numero di prodotti nel carrello. Predefinito: 1 |
image | string | URL dell'immagine del prodotto |
url | string | URL del prodotto individuale |
hsCode | string | Il Codice Armonizzato (codice HS) per il tuo prodotto |
category | string | La categoria del prodotto sul tuo sito |
country | string | Codice ISO a due caratteri del paese da cui proviene questo prodotto |
customization | string | Personalizzazione del prodotto (es. taglia, colore) |
description | string | La descrizione dettagliata del prodotto |
sku | string | L'UPC o SKU del prodotto |
Man mano che fornisci ulteriori dettagli a Zonos riguardo al tuo prodotto, l'accuratezza della stima di solito migliorerà.
Personalizza Hello
Cambia la posizione della bandiera
COMPETENZE NECESSARIE : Competenze di base per sviluppatori
Per impostazione predefinita, la bandiera di Zonos Hello apparirà nell'angolo in basso a destra della tua pagina.
Qui troverai alcune informazioni su come cambiare la posizione della bandiera e su come nascondere determinati elementi del tuo sito web che non vuoi che gli utenti internazionali vedano.
Esempio: Nascondere la spedizione gratuita agli utenti internazionali; questo ti permetterà anche di nascondere Zonos Hello ai clienti domestici e a paesi specifici.
Se la posizione viene lasciata vuota, il codice utilizzerà il valore predefinito.
Hello script di integrazione
zonos.config({ location: 'right bottom attached' });
zonos.config({ location: '' });
Per l'angolo in basso a sinistra:
zonos.config({location: 'left'});
Per l'angolo in alto a sinistra con un dialogo informativo flottante:
zonos.config({location: 'left top floating'});
flottante
si riferisce al Hello dialogo informativo che galleggia al centro della pagina.attaccato
si riferisce al Hello dialogo informativo che si apre sopra la bandiera.flottante
è preferito quando si posiziona la bandiera in alto.
Nascondere contenuti specifici
COMPETENZE NECESSARIE: Competenze di base per sviluppatori
La classe z-intl
si basa sul paese domestico attuale. Se Hello è impostato su un paese internazionale, la classe z-intl
agirà come una classe nascosta, nascondendo il contenuto a cui è legata .z-intl
.
Usa il seguente CSS per nascondere il contenuto. Sostituisci
.your-content
con il contenuto flottante che desideri nascondere.
.z-intl .your-content { display: none; }
Ora puoi nascondere Hello dai tuoi clienti domestici in modo che altri dialoghi siano nuovamente visibili.
Hello integrazione script
#zonos {
display: none;
}
.z-intl #zonos {
display: block;
}
Nascondi per paesi specifici
Aggiungi l'#zonos id combinato con il codice del paese che funge anche da classe CSS per quel paese alla funzione .z-intl { display: none; }
.
La riga dovrebbe apparire in questo modo:
Hello integrazione script
.z-intl #zonos.US {
display: none;
}
Attivare/disattivare il splash
COMPETENZE NECESSARIE : Competenze di base per sviluppatori
Lo splash si riferisce al pop-up e all'ingrandimento della Zonos finestra di dialogo, che contiene informazioni aggiuntive riguardanti la specifica politica doganale e fiscale del loro paese.\
Se desideri ATTIVARE e visualizzare lo splash di Zonos Hello per la prima visita dei tuoi clienti:
Hello script di integrazione
zonos.config({ showSplash: true });
Se desideri disattivare il Zonos Hello splash per la prima visita dei tuoi clienti:
Hello integrazione script
zonos.config({ showSplash: false });
Nota: Qualsiasi Zonos personalizzazione dovrà essere all'interno di un
script
tag.
Domande frequenti
Non sono uno sviluppatore e ho bisogno di assistenza. Quali sono le mie opzioni?
Se hai domande, ti preghiamo di contattare il nostro team di supporto. Se non hai le risorse per completare l'integrazione e hai bisogno di assistenza, ti preghiamo di contattare il nostro team di servizi professionali.
Installa Hello legacy
Scopri come installare Hello sul sito del tuo negozio.Se stai utilizzando Shopify, BigCommerce, Magento, Miva o X-Cart, ti preghiamo di leggere la pagina di integrazione del plugin corrispondente.
Lo script qui sotto aggiungerà la bandiera di Zonos Hello al tuo sito, riconoscerà il paese da cui i tuoi clienti stanno visitando, li saluterà e fornirà informazioni generali su dazi e tasse per il loro paese (base).
Funzionalità aggiuntive sono disponibili con un minimo lavoro di sviluppo (mostrato di seguito).