Hello•

AccueilCommerce électronique mondial Intégration Installer

Installer l'héritage de Hello

Apprenez comment installer Hello sur le site web de votre boutique.

Si vous utilisez Shopify, BigCommerce, Magento, Miva ou X-Cart, veuillez consulter la page d'intégration du plugin correspondant.

Le script ci-dessous ajoutera le drapeau Zonos Hello à votre site, reconnaîtra le pays à partir duquel vos clients visitent, les saluera et leur fournira des informations générales sur les droits et taxes de leur pays (basiques).

Des fonctionnalités supplémentaires sont disponibles avec un minimum de développement (indiqué ci-dessous).

Ajouter Hello à votre site

Ajouter le script de Hello - basique

Ajouter ce script au code de votre site ajoutera le drapeau Zonos Hello à votre site web, reconnaîtra le pays à partir duquel vos clients visitent, les saluera et leur fournira des informations générales sur les droits et taxes de leur pays.

COMPÉTENCES REQUISES : Compétences web de base

Pour installer Hello, appliquez le script personnalisé contenant votre clé de site unique dans votre site web avant la balise de fermeture body.

Hello script d'intégration

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

Zonos Hello doit être chargé avant d'ajouter toute fonctionnalité supplémentaire. Veuillez inclure toutes les fonctionnalités supplémentaires après le script ci-dessus.

Vous n'avez pas encore de script ? ?Cliquez ici pour télécharger.

Générer une estimation des droits et taxes

COMPÉTENCES REQUISES : Compétences de base en développement

Lorsque cette fonctionnalité est activée, Hello peut fournir des estimations des droits et taxes lorsque qu'un produit est consulté ou ajouté au panier. Hello peut également afficher des devis complets des droits et taxes pour l'ensemble du panier lorsque la page est consultée.

Le devis des droits et taxes peut être affiché sur chaque page de produit ou sur votre page de produit principale, en fonction de la configuration de votre plateforme.

Pour ajouter le devis des droits et taxes, appliquez un script qui ressemble à celui indiqué ci-dessous. Les deux champs requis sont name et price.

Exemple : Ci-dessous se trouve un exemple de la façon dont le script apparaîtra et fonctionnera sur votre page.

Script d'intégration de 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',
});

Les scripts qui peuvent être utilisés devront être ajustés pour les faire fonctionner sur votre site. Assurez-vous que tous les scripts suivants que vous utilisez sont placés après le script initial Zonos Hello.

Si vous n'utilisez pas une plateforme, vous pouvez utiliser le script suivant pour récupérer dynamiquement les détails de votre produit. Ce script récupérera le premier produit disponible. Vous pouvez également ajuster ce script pour l'utiliser sur la page du panier de votre site. Vous devrez parcourir tous les produits et leurs données, puis les envoyer au zonos.quote.

Hello script d'intégration

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

Vous pouvez ajouter des valeurs supplémentaires à partir des champs de l'article ci-dessous et également modifier le currencyCode pour qu'il soit votre devise par défaut.

Shopify et BigCommerce

Si vous utilisez Shopify ou BigCommerce, utilisez le code ci-dessous.

Shopify

BigCommerce

Si vous utilisez Shopify comme plateforme, nous avons un script que vous pouvez utiliser pour extraire les données du produit de vos détails de produit Shopify.

Le code ci-dessous contient une fonction qui s'exécutera sur les pages de produit et la page de panier.

Hello script d'intégration

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

Champs de devis

Champ	Type de données	Description
`items`	tableau REQUIRED	Une liste d'articles à inclure dans le devis
`currencyCode`	chaîne	Les prix des articles s'afficheront dans la devise spécifiée par le code de devise à trois caractères. Par défaut : USD
`includedTaxRate`	nombre	Le taux de taxe sur l'article rate si l'article inclut une taxe
`showDecimal`	booléen	Active ou désactive l'affichage de la valeur décimale sur les devises converties

Champs d'article

Champ	Type de données	Description
`name`	chaîne REQUIRED	Le nom du produit
`price`	nombre REQUIRED	Prix unitaire d'un seul produit
`quantity`	entier	Le nombre de produits dans le panier. Par défaut : 1
`image`	chaîne	URL de l'image du produit
`url`	chaîne	URL vers le produit individuel
`hsCode`	chaîne	Le code harmonisé (code HS) pour votre produit
`category`	chaîne	La catégorie du produit sur votre site
`country`	chaîne	Code ISO à deux caractères du pays d'origine de ce produit
`customization`	chaîne	Personnalisation du produit (par exemple, taille, couleur)
`description`	chaîne	La description détaillée du produit
`sku`	chaîne	Le UPC ou SKU du produit

Au fur et à mesure que vous fournissez plus de détails à Zonos sur votre produit, l'exactitude de l'estimation sera généralement améliorée.

Personnaliser Hello

Changer l'emplacement du drapeau

COMPÉTENCES NÉCESSAIRES : Compétences de développeur de base

Par défaut, le drapeau de Zonos Hello apparaîtra dans le coin inférieur droit de votre page.

Ici, vous trouverez des informations sur la façon de changer l'emplacement du drapeau ainsi que de cacher certains éléments de votre site Web que vous ne souhaitez pas que les internationaux voient.

Exemple : Cacher la livraison gratuite des internationaux ; cela vous permettra également de cacher Zonos Hello des clients nationaux et de certains pays.

Si l'emplacement est laissé vide, le code utilisera la valeur par défaut.

Hello integration script

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

Pour le coin inférieur gauche :

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

Pour le coin supérieur gauche avec un dialogue d'information flottant :

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

flottant fait référence au Hello dialogue d'information qui flotte au centre de la page.
attaché fait référence au Hello dialogue d'information qui s'ouvre au-dessus du drapeau.
flottant est préféré lors du positionnement du drapeau en haut.

Masquer un contenu spécifique

COMPÉTENCES NÉCESSAIRES : Compétences de base en développement

La classe z-intl est basée sur le pays domestique actuel. Si Hello est défini sur un pays international, la classe z-intl agira comme une classe cachée, masquant le contenu auquel .z-intl est lié.

Utilisez le CSS suivant pour masquer le contenu. Remplacez .your-content par le contenu flottant que vous souhaitez masquer.
.z-intl .your-content { display: none; }

Maintenant, vous pouvez masquer Hello de vos clients domestiques afin que d'autres dialogues soient à nouveau visibles.

Hello script d'intégration

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

Masquer pour des pays spécifiques

Ajoutez l'identifiant #zonos combiné avec le code pays qui sert également de classe CSS pour ce pays à la fonction .z-intl { display: none; }.

La ligne devrait ressembler à ceci :

Hello script d'intégration

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

Activer/désactiver le splash

COMPÉTENCES NÉCESSAIRES : Compétences de base en développement

Le splash fait référence à la fenêtre contextuelle et à l'agrandissement de la boîte de dialogue Zonos, qui contient des informations supplémentaires concernant la politique spécifique de droits et de taxes de leur pays.\

Si vous souhaitez ACTIVER et afficher le splash Zonos Hello lors de la première visite de vos clients :

Hello script d'intégration

zonos.config({ showSplash: true });

Si vous souhaitez DÉSACTIVER l'écran de présentation Zonos Hello pour la première visite de vos clients :

Hello script d'intégration

zonos.config({ showSplash: false });

Note: Toutes les personnalisations de Zonos devront être à l'intérieur d'une balise script.

Questions fréquemment posées

Je ne suis pas un développeur et j'ai besoin d'aide. Quelles sont mes options ?

Si vous avez des questions, veuillez contacter notre équipe de support. Si vous n'avez pas les ressources pour terminer l'intégration et avez besoin d'aide, veuillez contacter notre équipe des Services Professionnels.

Cette page était-elle utile?

Des questions ?

Contactez-nous.

Voir Zonos

politiques et accords