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

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

<img src="https://mintcdn.com/sezzle/1Opexsp6kjiJMfMG/image.png?fit=max&auto=format&n=1Opexsp6kjiJMfMG&q=85&s=5cadb38b5c598e5d07286dcc3023c360" alt="Attachment(1) Pn" width="1920" height="1051" data-path="image.png" />

## 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](https://docs.sezzle.com/docs/plugins/).
* **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 [merchantsupport@sezzle.com](mailto:merchantsupport@sezzle.com) pour obtenir de l'aide.

### Script du widget de messagerie sur site (requis)

Ce qui suit importe le fichier Javascript nécessaire au rendu du widget de messagerie sur site, ainsi que tous les paramètres de compte enregistrés. Placez ce script au bas du fichier de code de la page HTML où le widget doit s'afficher.

```html theme={"system"}
<script src="https://widget.sezzle.com/v1/javascript/price-widget?uuid={merchant_id}"></script>
```

<Tip>
  Remplacez `{merchant_id}` par votre valeur de 36 caractères provenant de votre [Merchant Dashboard](https://dashboard.sezzle.com/merchant/settings/business).

  Un extrait de code pré-rempli devrait être fourni dans la liste de contrôle de configuration de votre Sezzle Merchant Dashboard.
</Tip>

### Personnalisation

Sezzle propose de nombreuses options de configuration pour adapter le widget de messagerie sur site aux besoins de votre site. Notre équipe d'ingénierie est disponible pour assurer une intégration transparente avec le design et les fonctionnalités de votre site web. Contactez [merchantsupport@sezzle.com](mailto:merchantsupport@sezzle.com) pour obtenir de l'aide, ou suivez la section suivante pour configurer le widget vous-même.

#### Configuration du marchand

Les marchands peuvent choisir de gérer leur configuration en interne. Si votre configuration locale est remplacée par une valeur différente, veuillez contacter le support marchand de Sezzle pour supprimer la substitution enregistrée.

<Warning>
  Le script de configuration ci-dessous doit apparaître dans le code *avant* le script du widget dans la section précédente.
</Warning>

## `document.sezzleConfig` Options

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

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

  <Tab title="Options">
    <ParamField body="configGroups" default="[{}]" type="object[]" 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.

      <Expandable>
        <ParamField body="targetXPath" type="string" required>
          ID, classe ou chemin vers l'élément de la page web où la valeur 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 sont basés sur zéro.

          <Note>
            ex. '#ProductSection/.product-price/SPAN-1' ciblerait le 2e élément 'SPAN' contenu dans les éléments qui contiennent la classe 'product-price', eux-mêmes contenus dans l'élément ayant l'ID 'ProductSection'.
          </Note>
        </ParamField>

        <ParamField body="renderToPath" default=".." type="string">
          Chemin depuis `targetXPath` vers l'élément après lequel le widget Sezzle doit être rendu.\
          Utilisez '.' pour un placement en tant que frère, '../' pour remonter aux parents, et les sélecteurs balise-index pour descendre. Même syntaxe que `targetXPath`.

          <Note>
            ex. '../../BUTTON-0' irait à l'élément grand-parent du targetXPath et placerait le widget après le premier bouton trouvé dans ce conteneur.
          </Note>
        </ParamField>

        <ParamField body="urlMatch" type="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'.
        </ParamField>

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

        <ParamField body="containerStyle" type="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.

          <Expandable>
            <ParamField body="someCSSProperty" type="string">
              La clé doit être la propriété CSS que vous souhaitez définir, en camelCase, la valeur doit être de type string
            </ParamField>
          </Expandable>
        </ParamField>

        <ParamField body="textStyle" type="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.

          <Expandable>
            <ParamField body="someCSSProperty" type="string">
              La clé doit être la propriété CSS que vous souhaitez définir, en camelCase, la valeur doit être de type string
            </ParamField>
          </Expandable>
        </ParamField>

        <ParamField body="logoStyle" type="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.

          <Expandable>
            <ParamField body="someCSSProperty" type="string">
              La clé doit être la propriété CSS que vous souhaitez définir, en camelCase, la valeur doit être de type string
            </ParamField>
          </Expandable>
        </ParamField>

        <ParamField body="relatedElementActions" type="object[]">
          <Expandable>
            <ParamField body="relatedPath" type="string">
              Le chemin depuis le targetXPath vers l'élément observable
            </ParamField>

            <ParamField body="initialAction" type="function">
              La fonction reçoit deux paramètres. Le premier est l'élément associé par `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.
            </ParamField>
          </Expandable>
        </ParamField>

        <ParamField body="ignoredPriceElements" type="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 les articles au prix normal.
        </ParamField>

        <ParamField body="ignoredFormattedPriceText" default="['Subtotal','Total:','Sold Out']" type="string[]">
          Chaînes de texte dans `targetXPath` à ignorer lors de la détection du prix et du rendu du widget.
        </ParamField>

        <ParamField body="hideClasses" type="string[]">
          XPath des éléments qui doivent être masqués lorsque le widget de Sezzle est affiché.\
          Malgré son nom, cette configuration accepte un tableau de XPaths.

          <Note>
            ex. \["#viabill-pricetag",".afterpay-paragraph","QUADPAYWIDGET-0"]
          </Note>
        </ParamField>

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

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

        <ParamField body="alignmentSwitchMinWidth" default="0" type="number">
          Largeur d'écran en pixels en dessous de laquelle l'alignement bascule vers `alignmentSwitchType`. Point de rupture courant : 768px (pour les appareils mobiles vs bureau).
        </ParamField>

        <ParamField body="alignmentSwitchType" default="auto" type="string">
          Alignement du widget à appliquer lorsque la largeur de la fenêtre est inférieure à `alignmentSwitchMinWidth`.

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

    <ParamField body="apDualInstall" default="false" type="boolean">
      Le logo d'Afterpay est ajouté au contenu du widget. Lorsqu'on clique dessus, la fenêtre modale du concurrent s'affiche.
    </ParamField>

    <ParamField path="klarnaDualInstall" default="false" type="boolean">
      Le logo de Klarna est ajouté au contenu du widget. Lorsqu'on clique dessus, la fenêtre modale du concurrent s'affiche.
    </ParamField>

    <ParamField body="minPrice" default="0" type="number">
      Prix minimum en centimes pour lequel Sezzle peut être sélectionné lors du paiement. Si le prix au `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 passer à la caisse 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.
    </ParamField>

    <ParamField body="maxPrice" default="250000" type="number">
      Prix maximum en centimes pour lequel le widget doit être affiché. Si le prix au `targetXPath` est supérieur à ce nombre, le widget ne s'affichera pas sur la page.
    </ParamField>

    <ParamField body="language" default="document.querySelector('html').lang" type="string">
      Langue dans laquelle le texte du widget doit être affiché. 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`
    </ParamField>

    <ParamField body="observeElements" type="object[]">
      Peut attacher des écouteurs d'événements aux éléments DOM et réinitialiser le widget.

      <Expandable>
        <ParamField body="element" type="string">
          L'identifiant ou la classe de l'élément à observer
        </ParamField>

        <ParamField body="eventType" type="string">
          Le type d'événement à observer, lors duquel le widget sera restitué
        </ParamField>
      </Expandable>
    </ParamField>
  </Tab>
</Tabs>

#### Exemple simple

<Tabs>
  <Tab title="Modèle">
    ```html theme={"system"}
    <script type="text/javascript">
        document.sezzleConfig = {
            configGroups: [
                {
                    targetXPath: string,
                },
            ],
        };
    </script>
    ```
  </Tab>

  <Tab title="Exemple">
    ```html theme={"system"}
    <script type="text/javascript">
        document.sezzleConfig = {
            configGroups: [
                {
                    targetXPath: "#ProductPrice/.money",
                },
            ],
        };
    </script>
    ```
  </Tab>
</Tabs>

## FAQs

<AccordionGroup>
  <Accordion title="Le widget aura-t-il un impact sur les performances de mon site ?">
    Le SDK du widget est rapide et léger, et il n'a pas été démontré qu'il impacte directement les performances du site. De plus, il est conçu pour se charger en dernier afin de ne pas interrompre l'expérience utilisateur. Si les performances du site sont déjà lentes, cela peut entraîner l'apparition "tardive" du widget. Effectuez un [test de performance du site](https://pagespeed.web.dev/) avant et après l'installation pour confirmer, en veillant à examiner le rapport détaillé, et pas seulement le score global.
  </Accordion>

  <Accordion title="Le widget a-t-il un coût supplémentaire ?">
    Le widget en lui-même n'engendre aucun coût. En fait, disposer de widgets est une condition préalable à certains de nos avantages marchands.
  </Accordion>
</AccordionGroup>