Sdk

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 promotionnelle Sezzle affiche les options de financement disponibles sur les pages de produits et de panier, encourageant les achats. Suivez les instructions d’installation ci-dessous pour ajouter le widget à votre site web.

Installation

Installation en un clic: De nombreuses plateformes leaders 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 contactezmerchantsupport@sezzle.compour obtenir de l’aide.

Personnalisation

Sezzle offre de nombreuses options de configuration pour adapter le widget aux besoins de votre site. Notre équipe d’ingénieurs est disponible pour assurer une intégration parfaite avec le design et les fonctionnalités de votre site web.

HTML requis

<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 votreTableau de bord marchand.

Configuration par le marchand

La configuration est requise avant d’invoquer le script du widget de prix.

`document.sezzleConfig`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": 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>

configGroups

object[]

default:"[{}]"

required

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.

targetXPath

string

required

ID, classe ou chemin vers l’élément de la page web où la valeur textuelle 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 commencent à zéro.

Par exemple, ‘#ProductSection/.product-price/SPAN-1’ ciblerait le 2ème élément ‘SPAN’ contenu dans les éléments qui contiennent la classe ‘product-price’, eux-mêmes contenus dans l’élément avec un ID ‘ProductSection’.

renderToPath

string

default:".."

Chemin depuistargetXPathvers l’élément après lequel le widget Sezzle doit être rendu.
Utilisez ’.’ pour un placement frère, ’../’ pour remonter aux parents, et les sélecteurs tag-index pour descendre. Même syntaxe quetargetXPath.

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

urlMatch

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

theme

string

default:"auto"

Met à jour la couleur du logo pour s’harmoniser avec différentes couleurs de fond. Si non spécifié, le widget tentera de détecter la couleur de fond et appliquera un logo contrastant.

Options disponibles :dark,light,black-flat,white-flat.

containerStyle

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.

textStyle

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.

logoStyle

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.

ignoredPriceElements

string[]

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

ignoredFormattedPriceText

string[]

default:"['Subtotal','Total:','Sold Out']"

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

hideClasses

string[]

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

Par exemple : [“#viabill-pricetag”,“.afterpay-paragraph”,“QUADPAYWIDGET-0”]

alignment

string

default:"auto"

Alignement du widget par rapport à l’élément parent.

Options disponibles :left,center,right,auto

alignmentSwitchMinWidth

number

default:"0"

Largeur d’écran en pixels en dessous de laquelle l’alignement passe àalignmentSwitchType. Point de rupture courant : 768px (pour mobile vs bureau).

alignmentSwitchType

string

default:"auto"

Alignement du widget à appliquer lorsque la largeur de la fenêtre est inférieure àalignmentSwitchMinWidth.

Options disponibles :left,center,right,auto

apDualInstall

boolean

default:"false"

Le logo d’Afterpay est ajouté au contenu du widget. Lorsqu’il est cliqué, la fenêtre modale du concurrent s’affichera.

klarnaDualInstall

boolean

default:"false"

Le logo de Klarna est ajouté au contenu du widget. Lorsqu’il est cliqué, la fenêtre modale du concurrent s’affichera.

minPrice

number

default:"0"

Prix minimum en centimes pour lequel Sezzle peut être sélectionné au moment du paiement. Si le prix àtargetXPathest 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 payer avec Sezzle en dessous de ce prix. Pour plus d’informations sur la définition d’un minimum de passerelle, contactez votre représentant du succès des marchands ou utilisez la section Contactez-nous du tableau de bord marchand Sezzle.

maxPrice

number

default:"250000"

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

language

string

default:"document.querySelector('html').lang"

Langue dans laquelle le texte du widget doit être rendu. 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

observeElements

object[]

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

Exemple simple

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

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

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

Rendu des widgets

Après avoir construit la configuration, il est temps de télécharger les widgets sur vos pages web ! Le SDK doit être appelé dans le HTML de la page web pour que les widgets soient rendus. Placez la configuration et le script du widget au bas du fichier de code pour la page HTML, et vous devriez être prêt !

Un extrait de code pré-rempli devrait être fourni dans la liste de contrôle de configuration de votre tableau de bord marchand Sezzle.

Lorsque vous utilisez cet extrait pour ajouter le script du widget à votre site, vous devez remplacer{merchant_id} avec l’ID Marchand Sezzle de 36 caractères trouvé dans les Paramètres d’entreprise de votre Tableau de bord Marchand Sezzle pour le magasin applicable. Veuillez ne pas réutiliser les ID sur plusieurs URL.

Le script avec l’ID marchand applicable doit être inclus après document.sezzleConfig est défini.

HTML nécessaire

<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 Tableau de bord Marchand.

Sezzle

Intégration Directe

Carte Virtuelle

Ressources

Paiement Express (Bêta)

Autre

Objectif

Aperçu

Installation

Personnalisation

HTML requis

Configuration par le marchand

`document.sezzleConfig`Options

Exemple simple

Rendu des widgets

HTML nécessaire

Sezzle

Intégration Directe

Carte Virtuelle

Ressources

Paiement Express (Bêta)

Autre

​Objectif

​Aperçu

​Installation

​Personnalisation

​HTML requis

​Configuration par le marchand

​document.sezzleConfigOptions

​Exemple simple

​Rendu des widgets

​HTML nécessaire

Objectif

Aperçu

Installation

Personnalisation

HTML requis

Configuration par le marchand

`document.sezzleConfig`Options

Exemple simple

Rendu des widgets

HTML nécessaire