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 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 [email protected] pour 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énierie est disponible pour assurer une intégration harmonieuse 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 votre Merchant Dashboard.

Configuration par le marchand

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

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

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.

Afficher attributs enfants

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 l’ID ‘ProductSection’.

renderToPath

string

default:".."

Chemin depuis targetXPath vers 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 que targetXPath.

Par exemple, ’../../BUTTON-0’ irait au grand-parent de l’élément 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 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.

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.

Afficher attributs enfants

someCSSProperty

string

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

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.

Afficher attributs enfants

someCSSProperty

string

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

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.

Afficher attributs enfants

someCSSProperty

string

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

Afficher attributs enfants

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

initialAction

function

La fonction reçoit deux paramètres. Le premier est l’élément associé selon 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.

ignoredPriceElements

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 à prix régulier.

ignoredFormattedPriceText

string[]

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

Chaînes de texte dans targetXPath à 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é le 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 plus étroite que 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é lors du paiement. Si le prix à 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 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 Merchant Success ou utilisez la section Contactez-nous du Sezzle Merchant Dashboard.

maxPrice

number

default:"250000"

Prix maximum en centimes pour lequel le widget doit être rendu. Si le prix à targetXPath est 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.

Afficher attributs enfants

element

string

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

eventType

string

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

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>

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 Sezzle Merchant Dashboard. 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 la boutique 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 de votre Tableau de bord Marchand.

Sezzle

Intégration Directe

Carte Virtuelle

Ressources

Paiement Express

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

Autre

​Objectif

​Aperçu

​Installation

​Personnalisation

​HTML requis

​Configuration par le marchand

​document.sezzleConfig Options

​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