Hello•

BerandaEcommerce global Integrasi Pasang

Pasang Hello legacy

Pelajari cara memasang Hello di situs web toko Anda.

Jika Anda menggunakan Shopify, BigCommerce, Magento, Miva, atau X-Cart silakan baca halaman integrasi plugin yang sesuai.

Skrip di bawah ini akan menambahkan bendera Zonos Hello ke situs Anda, mengenali negara asal pengunjung Anda, menyapa mereka, dan memberikan informasi umum tentang bea dan pajak untuk negara mereka (dasar).

Fitur tambahan tersedia dengan sedikit pekerjaan pengembangan (ditunjukkan di bawah).

Tambahkan Hello ke situs Anda

Tambahkan skrip Hello - dasar

Menambahkan skrip ini ke kode situs Anda akan menambahkan bendera Zonos Hello ke situs web Anda, mengenali negara asal pengunjung Anda, menyapa mereka, dan memberikan informasi umum tentang bea dan pajak untuk negara mereka.

KETERAMPILAN YANG DIBUTUHKAN : Keterampilan web dasar

Untuk memasang Hello, terapkan skrip kustom yang berisi kunci situs unik Anda ke situs web Anda sebelum tag body penutup.

Hello skrip integrasi

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

Zonos Hello harus dimuat sebelum fungsi tambahan ditambahkan. Harap sertakan fitur tambahan setelah skrip di atas.

Belum memiliki skrip? ? Klik di sini untuk mengunduh.

Hasilkan estimasi bea dan pajak

KETERAMPILAN YANG DIBUTUHKAN : Keterampilan pengembang dasar

Ketika fitur ini diaktifkan, Hello dapat memberikan estimasi bea dan pajak saat produk dilihat atau ditambahkan ke keranjang. Hello juga dapat menampilkan kutipan bea dan pajak lengkap untuk seluruh keranjang saat halaman dilihat.

Kutipan bea dan pajak dapat ditampilkan di setiap halaman produk atau halaman produk utama Anda, tergantung pada bagaimana platform Anda diatur.

Untuk menambahkan kutipan bea dan pajak, terapkan skrip yang terlihat seperti yang ditunjukkan di bawah ini. Dua bidang yang diperlukan adalah name dan price.

Contoh: Di bawah ini adalah contoh bagaimana skrip akan terlihat dan berfungsi di halaman Anda.

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

Skrip yang dapat digunakan perlu disesuaikan agar berfungsi untuk situs Anda. Harap pastikan bahwa salah satu skrip berikut yang Anda gunakan ditempatkan setelah skrip awal Zonos Hello.

Jika Anda tidak menggunakan platform, Anda dapat menggunakan yang berikut ini untuk secara dinamis mengambil detail produk Anda. Skrip ini akan mengambil produk pertama yang tersedia. Anda juga dapat menyesuaikan skrip ini untuk digunakan di halaman keranjang situs Anda. Anda perlu melakukan loop melalui semua produk dan data mereka, kemudian mengirimkan itu ke zonos.quote.

Hello integration script

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

Anda dapat menambahkan nilai tambahan dari bidang item di bawah ini dan juga mengubah currencyCode menjadi mata uang default Anda.

Shopify dan BigCommerce

Jika Anda menggunakan Shopify atau BigCommerce, gunakan kode di bawah ini.

Shopify

BigCommerce

Jika Anda menggunakan Shopify sebagai platform Anda, kami memiliki skrip yang dapat Anda gunakan yang akan menarik data produk dari detail produk Shopify Anda.

Kode di bawah ini memiliki fungsi yang akan dijalankan di halaman produk dan halaman keranjang.

Hello skrip integrasi

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

Bidang kutipan

Bidang	Tipe data	Deskripsi
`items`	array DIBUTUHKAN	Daftar item yang akan dimasukkan dalam kutipan
`currencyCode`	string	Harga item akan ditampilkan dalam mata uang yang ditentukan oleh kode mata uang tiga karakter. Default: USD
`includedTaxRate`	number	Pajak item rate jika item termasuk pajak
`showDecimal`	bool	Mengaktifkan atau menonaktifkan tampilan nilai desimal pada mata uang yang dikonversi

Bidang item

Bidang	Tipe data	Deskripsi
`name`	string DIBUTUHKAN	Nama produk
`price`	number DIBUTUHKAN	Harga satuan dari satu produk
`quantity`	integer	Jumlah produk dalam keranjang. Default: 1
`image`	string	URL gambar produk
`url`	string	URL ke produk individual
`hsCode`	string	Kode Harmonisasi (kode HS) untuk produk Anda
`category`	string	Kategori produk di situs Anda
`country`	string	Kode ISO dua karakter dari negara asal produk ini
`customization`	string	Kustomisasi produk (misalnya ukuran, warna)
`description`	string	Deskripsi rinci dari produk
`sku`	string	UPC atau SKU dari produk

Saat Anda memberikan lebih banyak detail kepada Zonos tentang produk Anda, akurasi estimasi biasanya akan meningkat.

Kustomisasi Hello

Ubah lokasi bendera

KETERAMPILAN YANG DIBUTUHKAN : Keterampilan pengembang dasar

Secara default, bendera Zonos Hello akan muncul di sudut kanan bawah halaman Anda.

Di sini Anda akan menemukan beberapa informasi tentang cara mengubah lokasi bendera serta menyembunyikan elemen tertentu dari situs web Anda yang tidak ingin Anda tunjukkan kepada internasional.

Contoh: Menyembunyikan pengiriman gratis dari internasional; ini juga akan memungkinkan Anda untuk menyembunyikan Zonos Hello dari pelanggan domestik dan negara tertentu.

Jika lokasi dibiarkan kosong, kode akan menggunakan default.

Hello integration script

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

Untuk sudut kiri bawah:

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

Untuk sudut kiri atas dengan dialog informasi mengambang:

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

floating mengacu pada dialog informasi Hello yang mengambang di tengah halaman.
attached mengacu pada dialog informasi Hello yang terbuka di atas bendera.
floating lebih disukai saat menempatkan bendera di top.

Sembunyikan konten tertentu

KETERAMPILAN YANG DIBUTUHKAN : Keterampilan pengembang dasar

Kelas z-intl didasarkan pada negara domestik saat ini. Jika Hello diatur ke negara internasional, kelas z-intl akan bertindak sebagai kelas tersembunyi, menyembunyikan konten yang terkait dengan .z-intl.

Gunakan CSS berikut untuk menyembunyikan konten. Ganti .your-content dengan konten mengambang yang ingin Anda sembunyikan.
.z-intl .your-content { display: none; }

Sekarang Anda dapat menyembunyikan Hello dari pelanggan domestik Anda sehingga dialog lain terlihat kembali.

Hello skrip integrasi

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

Sembunyikan untuk negara tertentu

Tambahkan id #zonos yang digabungkan dengan kode negara yang juga berfungsi sebagai kelas CSS untuk negara tersebut ke dalam fungsi .z-intl { display: none; }.

Baris tersebut harus terlihat seperti ini:

Hello integration script

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

Nyalakan/matikan splash

KETERAMPILAN YANG DIBUTUHKAN : Keterampilan pengembang dasar

Splash mengacu pada pop-up dan pembesaran dari kotak dialog Zonos, yang berisi informasi tambahan mengenai kebijakan bea dan pajak spesifik negara mereka.\

Jika Anda ingin MENYALAKAN dan menampilkan splash Zonos Hello untuk kunjungan pertama pelanggan Anda:

Hello integration script

zonos.config({ showSplash: true });

Jika Anda ingin MENONAKTIFKAN splash Zonos Hello untuk kunjungan pertama pelanggan Anda:

Hello integration script

zonos.config({ showSplash: false });

Catatan: Setiap Zonos kustomisasi perlu berada di dalam tag script.

Pertanyaan yang sering diajukan

Saya bukan pengembang dan membutuhkan bantuan. Apa pilihan saya?

Jika Anda memiliki pertanyaan, silakan hubungi tim dukungan kami. Jika Anda tidak memiliki sumber daya untuk menyelesaikan integrasi dan membutuhkan bantuan, silakan hubungi tim Layanan Profesional kami.

Apakah halaman ini membantu?

Pertanyaan?

Hubungi kami.

Lihat Zonos

kebijakan dan perjanjian