Widget de messagerie sur site

Objectif

Augmentez les conversions et la valeur moyenne des commandes en présentant les options de financement de Sezzle aux acheteurs lorsqu’ils naviguent sur votre site.

Aperçu

Le widget de messagerie sur site de Sezzle affiche les options de financement disponibles sur les pages produit et panier, encourageant ainsi les achats. Suivez les instructions d’installation ci-dessous pour ajouter le widget à votre site web.

Installation

Installation en un clic: De nombreuses plateformes de premier plan offrent une installation en un clic avec Sezzle. Vérifiez la compatibilité avec votre plateforme.
Installation manuelle: Si l’installation en un clic n’est pas disponible ou incompatible avec votre thème, consultez le guide d’installation manuelle ou contactez merchantsupport@sezzle.com pour obtenir de l’aide.

Ce qui suit importe le fichier Javascript nécessaire au rendu du widget de messagerie sur site, ainsi que tous les paramètres de compte enregistrés. Placez ce script au bas du fichier de code de la page HTML où le widget doit s’afficher.

<script src="https://widget.sezzle.com/v1/javascript/price-widget?uuid={merchant_id}"></script>

Remplacez {merchant_id} par votre valeur de 36 caractères provenant de votre Merchant Dashboard.Un extrait de code pré-rempli devrait être fourni dans la liste de contrôle de configuration de votre Sezzle Merchant Dashboard.

Personnalisation

Sezzle propose de nombreuses options de configuration pour adapter le widget de messagerie sur site aux besoins de votre site. Notre équipe d’ingénierie est disponible pour assurer une intégration transparente avec le design et les fonctionnalités de votre site web. Contactez merchantsupport@sezzle.com pour obtenir de l’aide, ou suivez la section suivante pour configurer le widget vous-même.

Configuration du marchand

Les marchands peuvent choisir de gérer leur configuration en interne. Si votre configuration locale est remplacée par une valeur différente, veuillez contacter le support marchand de Sezzle pour supprimer la substitution enregistrée.

Le script de configuration ci-dessous doit apparaître dans le code avant le script du widget dans la section précédente.

`document.sezzleConfig` Options

Modèle
Exemple
Options

<script type="text/javascript">
    document.sezzleConfig = {
      configGroups: [
        {
          "targetXPath": string,
          "renderToPath": string,
          "urlMatch": string,
          "theme": string,
          "ignoredPriceElements": [string],
          "ignoredFormattedPriceText": [string],
          "alignment": string,
          "alignmentSwitchMinWidth": number,
          "alignmentSwitchType": string,
          "containerStyle": {
            "property": string,
          },
          "textStyle": {
            "property": string,
          },
          "logoStyle": {
            "property": string,
          },
          "hideClasses": [string],
          "relatedElementActions": [{
            "relatedPath": string,
            "initialAction": function(r,w){}
          }]
        }
      ],
      "language": string,
      "apDualInstall": boolean,
	  "klarnaDualInstall": boolean,
      "minPrice": number,
      "maxPrice": number,
      "observeElements": [
        {
          "eventType": string,
          "element": string
        }
      ]
    }
</script>

<script type="text/javascript">
    document.sezzleConfig = {
      configGroups: [
        {
          "targetXPath": ".price",
          "renderToPath": "..",
          "urlMatch": "product",
          "theme": "auto",
          "ignoredPriceElements": ["DEL","STRIKE"],
          "ignoredFormattedPriceText": ["Subtotal", "Total:", "Sold Out"],
          "alignment": "inherit",
          "alignmentSwitchMinWidth": 0,
          "alignmentSwitchType": "inherit",
          "containerStyle": {
            "marginTop": "0px",
            "marginBottom": "0px",
            "marginRight": "0px",
            "marginLeft": "0px"
          },
          "textStyle": {
            "color": "inherit",
            "fontFamily": "inherit",
            "fontSize": "14px",
            "fontWeight": 500,
            "lineHeight": "13px",
            "maxWidth": "480px"
          },
          "logoStyle": {
            "transform": "scale(1)",
            "transformOrigin": "center",
            "margin": "0px"
          },
          "hideClasses": [],
          "relatedElementActions": [{
            "relatedPath": "..",
            "initialAction": function(r,w){
              if(r.className.indexOf('compare') > -1){
                w.style.display = "none"
              }
            }
          }]
        }
      ],
      "language": document.querySelector("html").lang || "en",
      "apDualInstall": false,
      "klarnaDualInstall": false,
      "minPrice": 0,
      "maxPrice": 250000,
      "observeElements": [
        {
          "eventType": "click",
          "element": ".options-selector"
        }
      ]
    }
</script>

object[]

défaut:"[{}]"

requis

Permet plusieurs configurations pour un même magasin afin de s’adapter à différents types de pages, mises en page ou applications. Consultez toutes les options disponibles pour la personnalisation.

Afficher attributs enfants

string

requis

ID, classe ou chemin vers l’élément de la page web où la valeur du prix du produit sera détectée.
Pour indiquer un chemin, les sous-chemins sont séparés par ’/’, les ID sont précédés de ’#’, les classes par ’.’, et les noms de balises sont suffixés par un index (tagName-Index). Les index sont basés sur zéro.

ex. ‘#ProductSection/.product-price/SPAN-1’ ciblerait le 2e élément ‘SPAN’ contenu dans les éléments qui contiennent la classe ‘product-price’, eux-mêmes contenus dans l’élément ayant l’ID ‘ProductSection’.

string

défaut:".."

Chemin depuis targetXPath vers l’élément après lequel le widget Sezzle doit être rendu.
Utilisez ’.’ pour un placement en tant que frère, ’../’ pour remonter aux parents, et les sélecteurs balise-index pour descendre. Même syntaxe que targetXPath.

ex. ’../../BUTTON-0’ irait à l’élément grand-parent du targetXPath et placerait le widget après le premier bouton trouvé dans ce conteneur.

string

Mot spécifique apparaissant dans l’URL des pages où la configuration du widget doit s’appliquer. Les valeurs typiques sont ‘product’ ou ‘cart’.

string

défaut:"auto"

Met à jour la couleur du logo pour s’harmoniser avec différentes couleurs d’arrière-plan. Si non spécifié, le widget tentera de détecter la couleur d’arrière-plan et d’appliquer un logo contrasté.Options disponibles : dark, light, black-flat, white-flat.

object

Style personnalisé à appliquer au conteneur du widget Sezzle. Accepte du CSS au format JSON. Les clés doivent utiliser le camelCase, être entourées de guillemets et séparées par des virgules.

Afficher attributs enfants

string

La clé doit être la propriété CSS que vous souhaitez définir, en camelCase, la valeur doit être de type string

object

Style personnalisé à appliquer au texte Sezzle dans le widget. Accepte du CSS au format JSON. Les clés doivent utiliser le camelCase, être entourées de guillemets et séparées par des virgules.

Afficher attributs enfants

string

La clé doit être la propriété CSS que vous souhaitez définir, en camelCase, la valeur doit être de type string

object

Style personnalisé à appliquer au logo Sezzle dans le widget. Accepte du CSS au format JSON. Les clés doivent utiliser le camelCase, être entourées de guillemets et séparées par des virgules.

Afficher attributs enfants

string

La clé doit être la propriété CSS que vous souhaitez définir, en camelCase, la valeur doit être de type string

Afficher attributs enfants

Le chemin depuis le targetXPath vers l’élément observable

function

La fonction reçoit deux paramètres. Le premier est l’élément associé par relatedPath, le second est le widget qui correspond à cet élément targetXPath. Écrivez une fonction personnalisée pour vérifier la condition sur relatedPath, puis effectuez une action sur le widget.

string[]

Éléments enfants directs de targetXPath à ignorer lors de la détection du prix. Utile pour gérer les variations entre les articles en solde et les articles au prix normal.

string[]

défaut:"['Subtotal','Total:','Sold Out']"

Chaînes de texte dans targetXPath à ignorer lors de la détection du prix et du rendu du widget.

string[]

XPath des éléments qui doivent être masqués lorsque le widget de Sezzle est affiché.
Malgré son nom, cette configuration accepte un tableau de XPaths.

ex. [“#viabill-pricetag”,“.afterpay-paragraph”,“QUADPAYWIDGET-0”]

string

défaut:"auto"

Alignement du widget par rapport à l’élément parent.Options disponibles : left, center, right, auto

number

défaut:"0"

Largeur d’écran en pixels en dessous de laquelle l’alignement bascule vers alignmentSwitchType. Point de rupture courant : 768px (pour les appareils mobiles vs bureau).

string

défaut:"auto"

Alignement du widget à appliquer lorsque la largeur de la fenêtre est inférieure à alignmentSwitchMinWidth.Options disponibles : left, center, right, auto

boolean

défaut:"false"

Le logo d’Afterpay est ajouté au contenu du widget. Lorsqu’on clique dessus, la fenêtre modale du concurrent s’affiche.

boolean

défaut:"false"

Le logo de Klarna est ajouté au contenu du widget. Lorsqu’on clique dessus, la fenêtre modale du concurrent s’affiche.

number

défaut:"0"

Prix minimum en centimes pour lequel Sezzle peut être sélectionné lors du paiement. Si le prix au targetXPath est inférieur à ce nombre, le widget s’affichera avec une note indiquant le prix minimum éligible requis. Cette configuration n’empêche pas un client de passer à la caisse avec Sezzle en dessous de ce prix. Pour plus d’informations sur la définition d’un minimum de passerelle, contactez votre représentant Merchant Success ou utilisez la section Contactez-nous du Sezzle Merchant Dashboard.

number

défaut:"250000"

Prix maximum en centimes pour lequel le widget doit être affiché. Si le prix au targetXPath est supérieur à ce nombre, le widget ne s’affichera pas sur la page.

string

défaut:"document.querySelector('html').lang"

Langue dans laquelle le texte du widget doit être affiché. Si la langue spécifiée n’est pas prise en charge, la traduction sera par défaut en anglais.Options disponibles : left, center, right, auto

object[]

Peut attacher des écouteurs d’événements aux éléments DOM et réinitialiser le widget.

Afficher attributs enfants

string

L’identifiant ou la classe de l’élément à observer

string

Le type d’événement à observer, lors duquel le widget sera restitué

Exemple simple

Modèle
Exemple

<script type="text/javascript">
    document.sezzleConfig = {
        configGroups: [
            {
                targetXPath: string,
            },
        ],
    };
</script>

<script type="text/javascript">
    document.sezzleConfig = {
        configGroups: [
            {
                targetXPath: "#ProductPrice/.money",
            },
        ],
    };
</script>

FAQs

Le widget aura-t-il un impact sur les performances de mon site ?

Le SDK du widget est rapide et léger, et il n’a pas été démontré qu’il impacte directement les performances du site. De plus, il est conçu pour se charger en dernier afin de ne pas interrompre l’expérience utilisateur. Si les performances du site sont déjà lentes, cela peut entraîner l’apparition “tardive” du widget. Effectuez un test de performance du site avant et après l’installation pour confirmer, en veillant à examiner le rapport détaillé, et pas seulement le score global.

Le widget a-t-il un coût supplémentaire ?

Sezzle

Intégration Directe

Carte Virtuelle

Ressources

Paiement Express

SDKs Mobiles

Autre

Widget de messagerie sur site

Objectif

Aperçu

Installation

Script du widget de messagerie sur site (requis)

Personnalisation

Configuration du marchand

`document.sezzleConfig` Options

Exemple simple

FAQs

​Objectif

​Aperçu

​Installation

​Script du widget de messagerie sur site (requis)

​Personnalisation

​Configuration du marchand

​document.sezzleConfig Options

​Exemple simple

​FAQs

Objectif

Aperçu

Installation

Script du widget de messagerie sur site (requis)

Personnalisation

Configuration du marchand

`document.sezzleConfig` Options

Exemple simple

FAQs