Aller au contenu principal

Widget SDK

Objectif

Augmentez la valeur moyenne des commandes et augmentez les conversions!

Le widget de messagerie promotionnelle Sezzle informe facilement les acheteurs du financement disponible lors de leur navigation.

Suivez la documentation ci-dessous pour installer le widget Sezzle sur vos pages de produits et de panier.

Beaucoup de nos meilleures plates-formes disposent d'une installation en un clic dans l'application. Si l'installation en un clic n'est pas disponible pour votre plate-forme ou ne semble pas compatible avec votre thème, vous pouvez soit suivre les instructions d'installation manuelle ci-dessous, soit contacter merchantsupport@sezzle.com.

L'installation du widget de messagerie promotionnelle Sezzle nécessite deux composants : la "configuration" et le "script".

Comment ça fonctionne

Lorsque la page se charge, le script contactera le serveur de widgets pour obtenir le Javascript et les détails de configuration. Si une configuration n'est pas trouvée sur le serveur, il recherchera une configuration locale.

Si votre site dispose d'une vitrine autre que Shopify, veuillez installer le script avant de demander de l'aide.

Configuration des widgets

Configuration de base

<script type="text/javascript">
document.sezzleConfig = {
"configGroups": [
{
"targetXPath": "VOTRE IDENTIFIANT ICI"
}
]
}
</script>

Configuration supplémentaire

<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,
"minPrice": 0,
"maxPrice": 250000,
"observeElements": [
{
"eventType": "click",
"element": ".options-selector"
}
]
}
</script>

L'objet document.sezzleConfig acceptera les clés suivantes, dont le but et l'utilisation sont décrits ci-dessous :

configGroups (Groupes de configuration, obligatoires)

Objectif : permet plusieurs configurations pour un magasin afin de s'adapter à différents types de pages, mises en page ou applications. Type : tableau d'objets Défaut: [] Détails supplémentaires : les clés disponibles pour une utilisation dans configGroups sont décrites plus loin dans ce document.

apDualInstall (afterpay double installation,facultatif)

Objectif : le logo d'Afterpay est ajouté au contenu du widget. Lorsque vous cliquez dessus, le modal du concurrent s'affichera. Type : booléen Par défaut : false (faux)

minPrice (prix minimum, facultatif)

Objectif : Prix minimum en centimes pour lequel Sezzle peut être sélectionné lors du paiement. Si le prix sur targetXPath est inférieur à ce nombre, le widget s'affichera avec une note indiquant le prix minimum éligible requis. Type : numéro Par défaut : 0 Détails supplémentaires : 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'une passerelle minimale, contactez votre représentant Merchant Success ou utilisez la section Contactez-nous du tableau de bord Sezzle Merchant.

maxPrice (prix maximum, facultatif)

Objectif : Prix maximum en centimes pour lequel le widget doit être rendu. Si le prix sur targetXPath est supérieur à ce nombre, le widget ne s'affichera pas sur la page. Type : numéro Par défaut : 250000

language (langue, facultatif)

Objectif : Langue dans laquelle le texte du widget doit être rendu. Type : chaîne Options : 'en', 'fr', 'es' Par défaut : document.querySelector('html').lang Détails supplémentaires : Actuellement, SezzleJS ne prend en charge que en, fr et es. Si la langue spécifiée n'est pas prise en charge, la traduction sera par défaut l'anglais.

observeElements (observer les éléments, facultatif)

Objectif : Peut attacher des écouteurs d'événements à l'élément DOM et réinitialiser le widget. Type : tableau d'objets Détails supplémentaires : chaque objet doit avoir une clé element (élément) avec une valeur de chaîne contenant un identifiant ou une classe et un eventType (type d'événement) valide tel que click (clic)

Groupes de configuration

Chaque objet du tableau configGroups acceptera les clés suivantes, dont le but et l'utilisation sont décrits ci-dessous :

targetXPath (chemin X cible, obligatoire)

Objectif : ID, classe ou chemin d'accès à l'élément de la page Web où la valeur du texte du prix du produit sera détectée. Type : chaîne Défaut: '' Détails supplémentaires : pour indiquer un chemin, tous les sous-chemins doivent être séparés par le caractère /. Les identifiants doivent être précédés du caractère #. Les cours devaient être précédés d'un caractère .. Les noms de balises doivent être suivis de l’index applicable. Le format d'un nom de balise est le suivant : tagName-Index (par exemple SPAN-2). Les index sont de base zéro, de sorte que le premier élément du type spécifié dans l'élément parent se trouve à l'index 0.

renderToPath (rendre vers le chemin, facultatif)

Objectif : chemin depuis targetXPath vers l'élément de la page Web après lequel le widget Sezzle doit être rendu. Type : chaîne Défaut: '..' Détails supplémentaires: . placera le widget comme élément frère suivant de l'élément cible. Pour déplacer le widget vers un conteneur parent, utilisez ../ pour chaque niveau parent. Vous pouvez ensuite parcourir vers le bas en utilisant l'ID, la classe, l'index de balise ou les pseudo-sélecteurs. Comme avec targetXPath, ajoutez les identifiants avec #, les classes avec . et ajoutez les noms de balises avec l'index (tagName-Index). Ajoutez les pseudo-sélecteurs avec ::. Il est recommandé de garder le renderToPath aussi simple que possible pour maximiser la compatibilité.

urlMatch (URL correspondante, facultatif)

Objectif : Mot spécifique apparaissant dans l’url des pages où la configuration du widget doit être appliquée. Type : chaîne Défaut: '' Détails supplémentaires : les valeurs typiques sont 'product' ou 'cart', selon le cas.

theme (thème, facultatif)

Objectif : Met à jour la couleur du logo pour la coordonner et la contraster avec les différentes couleurs d'arrière-plan des sites Web. Type : chaîne Options : dark (sombre), light (clair), black-flat (noir mat), white-flat (blanc mat) Défaut: '' Détails supplémentaires : si le thème n'est pas spécifié, le widget tentera de détecter la couleur d'arrière-plan et d'appliquer le logo contrasté approprié. Utilisez light ou black-flat pour les arrière-plans clairs et dark ou white-flat pour les arrière-plans sombres.

containerStyle (Style de conteneur, facultatif)

Objectif : style personnalisé à appliquer au conteneur de widgets Sezzle. Type : objet Défaut: Détails supplémentaires : l'objet acceptera n'importe quel style CSS au format JSON. Les clés doivent être entourées de '', données en casDeChameau au lieu de cas-de-kebab, et séparées de la clé suivante par une virgule au lieu d'un point-virgule.

textStyle (Style de texte, facultatif)

Objectif : style personnalisé à appliquer au texte Sezzle dans le widget. Type : objet Défaut: Détails supplémentaires : l'objet acceptera n'importe quel style CSS au format JSON. Les clés doivent être entourées de '', données en casDeChameau au lieu de cas-de-kebab, et séparées de la clé suivante par une virgule au lieu d'un point-virgule.

logoStyle (Style de logo, facultatif)

Objectif : style personnalisé à appliquer au logo Sezzle dans le widget. Type : objet Défaut: Détails supplémentaires : l'objet acceptera n'importe quel style CSS au format JSON. Les clés doivent être entourées de '', données en casDeChameau au lieu de cas-de-kebab, et séparées de la clé suivante par une virgule au lieu d'un point-virgule.

relatedElementActions (Actions d'élément associées, facultatif)

Objectif : Fonctions liées au widget Sezzle. Écoutez les modifications sur la page Web après le chargement du widget Sezzle. Type : tableau d'objets Défaut: [] Détails supplémentaires : chaque objet du tableau a trois clés disponibles : relatedPath (Chemin associé), qui cible un élément par rapport au targetXPath (de la même manière que renderToPath) ; action ; et initialAction (Action initiale), avec des paramètres prédéfinis correspondant à l'élément relatedPath et au widget actuel qui exécute la fonction fournie pendant le rendu du widget

ignoredPriceElements (Éléments de prix ignorés, facultatif)

Objectif : Diriger que les éléments enfants de targetXPath soient ignorés lors de la détection du prix et du rendu du widget. Type : tableau de chaînes Défaut: [] Détails supplémentaires : ignoredPriceElements peut être utilisé pour résoudre les variations targetXPath entre les articles en vente et les articles à prix régulier. Dans ce cas, targetXPath doit pointer vers l'élément parent entourant l'ancien et le nouveau prix, puis ignoredPriceElements spécifiera l'ancien élément de prix/à comparer. Comme avec targetXPath, ajoutez les identifiants avec #, les classes avec . et ajoutez les noms de balises avec l'index (tagName-Index).

ignoredFormattedPriceText (ignoré Texte de prix formaté, facultatif)

Objectif : Les chaînes de texte dans targetXPath doivent être ignorées lors de la détection du prix et du rendu du widget. Type : tableau de chaînes Par défaut : ['Subtotal', 'Total:', 'Sold Out']

hideClasses (masquer les classes, facultatif)

Objectif : XPath des éléments qui doivent être masqués lorsque le widget de Sezzle est affiché. Ceci est utile pour masquer un produit similaire à Sezzle qui n'est pas disponible dans un pays où Sezzle est présent. Type : tableau de chaînes Défaut: [] Détails supplémentaires : malgré ce que son nom suggère, cette option de configuration accepte un tableau de XPaths. Comme avec targetXPath, ajoutez les identifiants avec #, les classes avec . et ajoutez les noms de balises avec l'index (tagName-Index).

alignment (alignement, facultatif)

Objectif : Alignement du widget par rapport à l'élément parent. Type : chaîne Options : left (gauche), center (centre), right (droite), auto Par défaut : auto

alignmentSwitchMinWidth (Largeur minimale du commutateur d'alignement, facultatif)

Objectif : largeur d'écran en pixels en dessous de laquelle l'alignement passe à alignmentSwitchType au lieu de alignment. Type : numéro Par défaut : 0 Détails supplémentaires : le point d'arrêt le plus courant est 768 (ordinateur de poche ou ordinateur de bureau). alignmentSwitchMinWidth n'est généralement nécessaire que lorsque l'alignement n'est pas automatique.

alignmentSwitchType (Type de commutateur d'alignement, facultatif)

Objectif : Alignement du widget par rapport à l'élément parent à appliquer lorsque la largeur de la fenêtre d'affichage est plus étroite que alignmentSwitchMinWidth. Type : chaîne Options : left (gauche), center (centre), right (droite), auto Par défaut : auto

Téléchargement des widgets

Le script avec l'ID marchand applicable doit être inclus après la définition de document.sezzleConfig.

<script src="https://widget.sezzle.com/v1/javascript/price-widget?uuid=VOTRE ID MARCHAND ICI"></script>

Après avoir créé la configuration, il est temps de télécharger les widgets sur vos pages Web ! Le SDK doit être appelé dans le code 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 de la page HTML, et vous devriez être prêt !

Un extrait pré-rempli doit être fourni dans votre liste de contrôle de configuration du tableau de bord Sezzle Merchant. S'il n'est pas disponible, vous pouvez commencer avec l'extrait suivant :

Lorsque vous utilisez cet extrait pour ajouter le script de widget à votre site, vous devez remplacer VOTRE ID MARCHAND ICI par l'ID marchand Sezzle à 36 caractères trouvé dans les paramètres professionnels de votre tableau de bord marchand Sezzle pour le magasin concerné. Veuillez ne pas réutiliser les identifiants sur plusieurs URL.