> ## Documentation Index
> Fetch the complete documentation index at: https://docs.sezzle.com/llms.txt
> Use this file to discover all available pages before exploring further.

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

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

## Installation

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

* [Package NPM](#npm-implementation)
* [Extrait de code (indépendant de la plateforme)](#html-implementation)
* [Extrait de code (Shopify)](#shopify-implementation)

### Implémentation NPM

<Note>
  Si votre site Web est construit avec React, veuillez consulter le package et la documentation [ici](https://www.npmjs.com/package/@sezzle/sezzle-react-widget).
</Note>

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 :

```html theme={"system"}
<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

<Note>
  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.
</Note>

1. Créez un nouveau fichier Javascript dans le code de votre site à l'endroit approprié
2. Copiez et collez [ce code minifié](https://github.com/sezzle/static-widgets/blob/production/dist/bundle.js) dans le fichier nouvellement créé
3. Importez le nouveau fichier dans la ou les pages où le widget Sezzle sera ajouté

   ```html theme={"system"}
   <script src="../scripts/sezzle-static-widget.js"></script>
   ```
4. 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

   ```html theme={"system"}
   <div id="sezzle-widget"></div>
   ```
5. 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

   ```html theme={"system"}
   <script>
       var renderSezzle = new AwesomeSezzle({
           amount: `${yourPriceVariableHere}`,
       });
       renderSezzle.init();
   </script>
   ```
6. 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

1. Connectez-vous à l'administration de votre boutique Shopify
2. Cliquez sur `Online Store` > `Themes`
3. À côté du thème que vous souhaitez modifier, cliquez sur `Actions`, puis sélectionnez `Edit Code`
4. Sous le `Assets` dossier, cliquez sur `Add a new asset`
5. 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`
6. Copiez le code depuis le [fichier du référentiel](https://github.com/sezzle/static-widgets/blob/production/dist/bundle.js) et collez-le dans ce nouveau fichier, puis cliquez sur `Save`
7. 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

   ```html theme={"system"}
   <!-- 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 -->
   ```
8. 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

   ```html theme={"system"}
   <!-- 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.

<Tabs>
  <Tab title="Modèle">
    ```html expandable theme={"system"}
    <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>
    ```
  </Tab>

  <Tab title="Exemple">
    ```html theme={"system"}
    <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>
    ```
  </Tab>

  <Tab title="Options">
    <ParamField body="amount" type="string" required>
      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 }}'`
    </ParamField>

    <ParamField body="renderElement" default="sezzle-widget" type="string">
      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é.
    </ParamField>

    <ParamField body="numberOfPayments" default="5" type="number">
      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
    </ParamField>

    <ParamField body="theme" default="light" type="string">
      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`
    </ParamField>

    <ParamField body="maxWidth" default="400" type="number">
      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.
    </ParamField>

    <ParamField body="marginTop" default="0" type="number">
      Espace au-dessus du widget en pixels.
    </ParamField>

    <ParamField body="marginBottom" default="0" type="number">
      Espace en dessous du widget en pixels.
    </ParamField>

    <ParamField body="marginLeft" default="0" type="number">
      Espace à gauche du widget en pixels.
    </ParamField>

    <ParamField body="marginRight" default="0" type="number">
      Espace à droite du widget en pixels.
    </ParamField>

    <ParamField body="alignment" default="left" type="string">
      Alignement du widget par rapport à l'élément parent.

      Options disponibles : `left`,`center`, `right`, `auto`.
    </ParamField>

    <ParamField body="alignmentSwitchMinWidth" default="760" type="number">
      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`.
    </ParamField>

    <ParamField body="alignmentSwitchType" default="auto" type="string">
      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`.
    </ParamField>

    <ParamField body="textColor" default="#111" type="string">
      Couleur du texte du widget. Accepte tous les formats de couleur CSS : hex, rgb(), hsl(),
      etc.
    </ParamField>

    <ParamField body="fontFamily" default="inherit" type="string">
      Famille de polices du texte du widget.
    </ParamField>

    <ParamField body="fontSize" default="12" type="number">
      Taille de police du texte du widget en pixels. Entrez uniquement des chiffres — n'incluez pas
      d'unités comme `px`!
    </ParamField>

    <ParamField body="fontWeight" default="300" type="number">
      Graisse du texte du widget. 100 est le plus léger, 900 est le plus gras.
    </ParamField>

    <ParamField body="widgetType" default="product-page" type="string">
      Spécifie la catégorie de page sur laquelle le widget est affiché.
      Options disponibles : `product-page`, `product-preview`, `cart`.
    </ParamField>

    <ParamField body="fixedHeight" default="0" type="number">
      Définit la valeur CSS de la hauteur fixe.
    </ParamField>

    <ParamField body="logoSize" default="1.0" type="number">
      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.
    </ParamField>

    <ParamField body="logoStyle" default="{}" type="object">
      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.
    </ParamField>

    <ParamField body="language" default="document.querySelector('html').lang" type="string">
      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`.
    </ParamField>

    <ParamField body="parseMode" default="default" type="string">
      Permet au prix des versements du widget de se calculer et de se formater correctement pour les devises étrangères.

      Options disponibles : `default`, `comma`.
    </ParamField>

    <ParamField body="merchantLocale" default="North America" type="string">
      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`.
    </ParamField>
  </Tab>
</Tabs>

## 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 :

```javascript theme={"system"}
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.

```javascript theme={"system"}
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.

```javascript theme={"system"}
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.

```javascript theme={"system"}
document.body.insertBefore(
    renderSezzle.getElementToRender(),
    document.getElementById("price").nextElementSibling
);
```