Widget de messagerie sur site statique

Le widget statique de messagerie sur site permet aux marchands d’intégrer le widget promotionnel Sezzle dans leur site Web sans communication directe avec les serveurs de Sezzle. Tout le code du widget, les configurations personnalisées, les images et les feuilles de style sont hébergés localement dans le thème de la boutique du marchand. Cette approche offre :

Temps de chargement plus rapides
- L’hébergement local réduit la dépendance aux serveurs externes.
Plus grand contrôle
- Les marchands ont pleine autorité sur l’apparence et le comportement du widget, car l’équipe Sezzle ne peut pas le modifier.

Ce contrôle local signifie que les marchands sont responsables de toute mise à jour ou modification du widget.

Installation

Sélectionnez l’implémentation qui correspond à vos besoins :

Package NPM
Extrait de code (indépendant de la plateforme)
Extrait de code (Shopify)

Implémentation NPM

Si votre site Web est construit avec React, veuillez consulter le package et la documentation ici.

Avec npm : npm install @sezzle/sezzle-static-widget@latest Dans votre page produit, ajoutez l’extrait de code suivant à l’endroit où vous souhaitez que le widget s’affiche, en mettant à jour le chemin vers node_modules selon votre structure de fichiers :

<script
    type="text/javascript"
    src="../node_modules/@sezzle/sezzle-static-widget/dist/bundle.js"
></script>
<script>
    const renderSezzle = new AwesomeSezzle({
        amount: `${yourPriceVariableHere}`,
    });
    renderSezzle.init();
</script>

Utilisez les options de configuration ci-dessous pour personnaliser l’apparence du widget de messagerie sur site selon vos souhaits.

Implémentation HTML

L’implémentation varie considérablement selon la plateforme, le thème, etc. Vous trouverez ci-dessous un aperçu général du processus. Les extraits de code ci-dessous sont des exemples et peuvent nécessiter des modifications pour s’adapter à votre site. Pour les marchands Shopify, veuillez passer à la section suivante.

Créez un nouveau fichier Javascript dans le code de votre site à l’endroit approprié
Copiez et collez ce code minifié dans le fichier nouvellement créé
Importez le nouveau fichier dans la ou les pages où le widget Sezzle sera ajouté
```
<script src="../scripts/sezzle-static-widget.js"></script>
```
Créez un élément de remplacement à l’endroit où le widget Sezzle doit s’afficher sur la ou les pages, généralement sous l’élément conteneur de prix
```
<div id="sezzle-widget"></div>
```
Ajoutez le script suivant sous l’élément de remplacement, en mettant à jour la valeur du montant pour refléter votre variable de prix qui affiche le prix actuel du produit ou le total du panier selon le cas
```
<script>
    var renderSezzle = new AwesomeSezzle({
        amount: `${yourPriceVariableHere}`,
    });
    renderSezzle.init();
</script>
```
Prévisualisez vos modifications pour confirmer que le widget s’affiche correctement dans chacun des scénarios suivants
- Utilisez les options de configuration ci-dessous pour personnaliser l’apparence du widget selon vos souhaits :
  - Prix normal
  - Prix soldé
  - Sélection de variante
  - Bureau
  - Mobile

Implémentation Shopify

Connectez-vous à l’administration de votre boutique Shopify
Cliquez sur Online Store > Themes
À côté du thème que vous souhaitez modifier, cliquez sur Actions, puis sélectionnez Edit Code
Sous le Assets dossier, cliquez sur Add a new asset
Sur l’onglet Create a Blank File, nommez le fichier sezzle-static-widget et sélectionnez .js comme type de fichier, puis cliquez sur Add Asset
Copiez le code depuis le fichier du référentiel et collez-le dans ce nouveau fichier, puis cliquez sur Save

Ajoutez les lignes de code suivantes à l’endroit où le widget doit s’afficher sur la page produit dans templates/product.liquid ou sections/product-template.liquid selon le cas

<!-- Sezzle Static Widget -->
<div id="sezzle-widget"></div>
{{ 'sezzle-static-widget.js' | asset_url | script_tag }}
<script>
    var renderSezzle = new AwesomeSezzle({
        amount: "{{ product.selected_or_first_available_variant.price | money }}",
    });
    renderSezzle.init();
    document.onchange = function () {
        var newPrice =
            "{{product.selected_or_first_available_variant.price | money}}";
        renderSezzle.alterPrice(newPrice);
    };
</script>
<!-- End Sezzle Static On-Site Messaging Widget -->

Ajoutez les lignes de code suivantes à l’endroit où le widget doit s’afficher sur la page panier dans templates/cart.liquid ou sections/cart-template.liquid selon le cas

<!-- Sezzle Static On-Site Messaging Widget -->
<div id="sezzle-widget"></div>
{{ 'sezzle-static-widget.js' | asset_url | script_tag }}
<script>
    var renderSezzle = new AwesomeSezzle({
        amount: "{{ cart.total_price | money }}",
        alignment: "right",
    });
    renderSezzle.init();
</script>
<!-- End Sezzle Static On-Site Messaging Widget -->

Personnalisation de la configuration

Une fois que le widget de messagerie sur site s’affiche, des configurations supplémentaires peuvent être ajoutées à AwesomeSezzle pour modifier l’apparence. Vous trouverez ci-dessous un exemple présentant toutes les options. Cependant, amount est la seule valeur obligatoire.

Modèle
Exemple
Options

<script>
    var renderSezzle = new AwesomeSezzle({
        amount: string,
        renderElement: string,
        numberOfPayments: number,
        theme: string,
        modalTheme: string,
        maxWidth: number,
        marginTop: number,
        marginBottom: number,
        marginLeft: number,
        marginRight: number,
        alignment: string,
        alignmentSwitchMinWidth: number,
        alignmentSwitchType: string,
        textColor: string,
        fontFamily: string,
        fontSize: number,
        fontWeight: number,
        widgetType: string,
        fixedHeight: number,
        logoSize: number,
        logoStyle: object,
        language: string,
        parseMode: string,
        merchantLocale: string,
        ineligibleWidgetTemplate: string,
        minPrice: number,
        maxPrice: number,
    });
    renderSezzle.init();
</script>

<script>
    var renderSezzle = new AwesomeSezzle({
        amount: "{{ product.selected_or_first_available_variant.price | money }}",
        renderElement: "new-sezzle-widget-container-id",
        numberOfPayments: 5,
        theme: "light",
        modalTheme: "color",
        maxWidth: 400,
        marginTop: 0,
        marginBottom: 0,
        marginLeft: 0,
        marginRight: 0,
        alignment: "left",
        alignmentSwitchMinWidth: 576,
        alignmentSwitchType: "center",
        textColor: "#111",
        fontFamily: "Comfortaa, sans-serif",
        fontSize: 12,
        fontWeight: 400,
        widgetType: "product-page",
        fixedHeight: 0,
        logoSize: 1.0,
        logoStyle: {},
        language: "en",
        parseMode: "default",
        merchantLocale: "North America",
        ineligibleWidgetTemplate:
            "%%logo%% Pay in 4 interest-free payments on purchases $35-$2,500. %%info%%",
        minPrice: 3500, // Amount in cents
        maxPrice: 250000, // Amount in cents
    });
    renderSezzle.init();
</script>

amount

string

requis

Le montant du prix cible, au format dollar.
Fournissez la variable de prix du produit sous forme de littéral de gabarit.
Exemple Shopify Liquid : '{{ product.selected_or_first_available_variant.price | money }}'

renderElement

string

défaut:"sezzle-widget"

Fournissez le nom d’ID ou le tableau de noms d’ID correspondant aux éléments de remplacement du widget où le widget doit être affiché.

numberOfPayments

number

défaut:"5"

Nombre de versements par lesquels l’acheteur paiera le total, calcule le montant des versements. Le paiement en 4 fois et le paiement en 5 fois sont tous deux disponibles à la caisse. La fenêtre modale Paiement en 5 fois reflète les deux plans, tandis que la fenêtre modale Paiement en 4 fois ne reflétera que 4 versements.Options disponibles : 4, 5

theme

string

défaut:"light"

Met à jour la couleur du logo pour s’harmoniser et contraster avec les différentes couleurs d’arrière-plan des sites Web. Si theme n’est pas spécifié, le widget tentera de détecter la couleur d’arrière-plan et d’appliquer le logo contrastant approprié. Utilisez “light” ou “black-flat” pour les arrière-plans clairs, et “dark” ou “white-flat” pour les arrière-plans sombres.Options disponibles : dark, light, black-flat, white-flat

maxWidth

number

défaut:"400"

Largeur maximale de l’élément widget en pixels. Réglez sur 200 pour afficher le widget joliment sur 2 lignes, ou 120 pour 3 lignes.

marginTop

number

défaut:"0"

Espace au-dessus du widget en pixels.

marginBottom

number

défaut:"0"

Espace en dessous du widget en pixels.

marginLeft

number

défaut:"0"

Espace à gauche du widget en pixels.

marginRight

number

défaut:"0"

Espace à droite du widget en pixels.

alignment

string

défaut:"left"

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

alignmentSwitchMinWidth

number

défaut:"760"

Largeur d’écran en pixels en dessous de laquelle l’alignement bascule vers alignmentSwitchType au lieu de alignment. Le point de rupture le plus courant est 768 (portable vs bureau). alignmentSwitchMinWidth n’est généralement nécessaire que lorsque l’alignement n’est pas défini sur auto.

alignmentSwitchType

string

défaut:"auto"

Alignement du widget par rapport à l’élément parent à appliquer lorsque la largeur de la fenêtre d’affichage est inférieure à alignmentSwitchMinWidth.Options disponibles : left,center, right, auto.

textColor

string

défaut:"#111"

Couleur du texte du widget. Accepte tous les formats de couleur CSS : hex, rgb(), hsl(), etc.

fontFamily

string

défaut:"inherit"

Famille de polices du texte du widget.

fontSize

number

défaut:"12"

Taille de police du texte du widget en pixels. Entrez uniquement des chiffres — n’incluez pas d’unités comme px!

fontWeight

number

défaut:"300"

Graisse du texte du widget. 100 est le plus léger, 900 est le plus gras.

Spécifie la catégorie de page sur laquelle le widget est affiché. Options disponibles : product-page, product-preview, cart.

fixedHeight

number

défaut:"0"

Définit la valeur CSS de la hauteur fixe.

logoSize

number

défaut:"1.0"

Ratio de mise à l’échelle du logo Sezzle. L’espace occupé par le logo entre le texte du widget et le lien/icône Plus d’informations est déterminé par la taille de la police.

logoStyle

object

défaut:"{}"

Style personnalisé à appliquer au logo Sezzle dans le widget. L’objet accepte tout style CSS au format JSON. Les clés doivent être en camelCase.

language

string

défaut:"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 : en, fr, es, de.

parseMode

string

défaut:"default"

Permet au prix des versements du widget de se calculer et de se formater correctement pour les devises étrangères.Options disponibles : default, comma.

merchantLocale

string

défaut:"North America"

Permet au widget d’afficher les détails du programme corrects, selon que le marchand est inscrit via Sezzle Amérique du Nord ou Sezzle Europe.Options disponibles : North America, Europe.

Méthodes

Les fonctions suivantes sont intégrées dans le widget de messagerie sur site statique et sont prêtes à être utilisées pour l’installation de votre widget de messagerie sur site. Ajoutez simplement l’extrait de code applicable à votre code de page web, en mettant à jour l’écouteur d’événements et les variables selon les besoins.

`alterPrice(newPrice)`

Modifie le prix sur le widget. Créez un écouteur d’événements après renderSezzle.init() qui invoque cette fonction où newPrice est la nouvelle valeur de prix de la variante sélectionnée. Exemple :

document.onchange = function () {
    var newPrice = "${yourPriceVariableHere}";
    renderSezzle.alterPrice(newPrice);
};

`renderModalByfunction()`

Ouvre le modal Sezzle par une fonction. Créez un écouteur d’événements qui invoque cette fonction si l’emplacement de l’événement est autre que l’icône d’information.

var clickElement = document.querySelector("#yourClickableElementIdHere");
clickElement.addEventListener("click", function () {
    renderSezzle.renderModalByfunction();
});

`isMobileBrowser()`

Retourne true sur un navigateur mobile. Utilisez cet événement pour afficher ou masquer le widget à différents emplacements de la page selon le type d’appareil.

document.onreadystatechange = function () {
    if (renderSezzle.isMobileBrowser()) {
        document.getElementById("sezzle-widget-mobile").style.display = "block";
        document.getElementById("sezzle-widget").style.display = "none";
    } else {
        document.getElementById("sezzle-widget").style.display = "block";
        document.getElementById("sezzle-widget-mobile").style.display = "none";
    }
};

`getElementToRender()`

Retourne l’élément où le widget sera rendu. Créez un écouteur d’événements qui invoque cette fonction si le widget doit apparaître lorsque l’événement se produit.

document.body.insertBefore(
    renderSezzle.getElementToRender(),
    document.getElementById("price").nextElementSibling
);

Sezzle

Intégration Directe

Carte Virtuelle

Ressources

Paiement Express

SDKs Mobiles

Autre

Widget de messagerie sur site statique

Installation

Implémentation NPM

Implémentation HTML

Implémentation Shopify

Personnalisation de la configuration

Méthodes

`alterPrice(newPrice)`

`renderModalByfunction()`

`isMobileBrowser()`

`getElementToRender()`

Sezzle

Intégration Directe

Carte Virtuelle

Ressources

Paiement Express

SDKs Mobiles

Autre

Documentation Index

​Installation

​Implémentation NPM

​Implémentation HTML

​Implémentation Shopify

​Personnalisation de la configuration

​Méthodes

​alterPrice(newPrice)

​renderModalByfunction()

​isMobileBrowser()

​getElementToRender()

Installation

Implémentation NPM

Implémentation HTML

Implémentation Shopify

Personnalisation de la configuration

Méthodes

`alterPrice(newPrice)`

`renderModalByfunction()`

`isMobileBrowser()`

`getElementToRender()`