Snippet front guide

How to integrate the snippet at the front code

Presentation

Example implementation code to display the data returned from the Scalexpert API after formatting.

Languages ​​used: HTML, CSS, vanilla JS. Using HTML5 templates

To implement this example, you need to call/include the templates, assets (css and js) in the page where you want to display the insert.

Installation

You need to include the file or file content scalexpert-template.htmlin the desired page. If you want, you can move the calls of the different assets to integrate it into your solution ( scalexpert.jsand scalexpert.css).

Two implementation methods are possible:

• with data transformation from the back (this method allow you to customize content of the widget but require more complexity to implement)

• with data returned from the raw scalexpert API (the easiest way to implement)

A-Implementation method with data “formatted” by your solution

Configuration

1. Once all the necessary elements (template, css and js) are on your page, you need to create a hook point in your page to display your insert.

For example

<div class="scalexpert-example"></div>

2. Call the component creation in JavaScript

<script type="application/javascript"> 
    (document.addEventListener("DOMContentLoaded", () => { 
        let Snippet = new Scalexpert(); 
    } )); 
</script>

3. Configuration / paramètres

Adding the component “settings”, here the “anchor” (JavaScript selector), where the component should be displayed:

Snippet.setSettings({ 
    anchor: '.scalexpert-example' 
});

You also need to pass in parameters (FRONT Documentation | 6. Configuration Variables Details) the various previously formatted elements coming from the Scalexpert API (Documentation BACK ), everything will be passed into a table "simulations"containing the objects of the different simulations, for example:

simulations: [
    {
        title: 'Payez en 3 fois sans frais avec votre carte bancaire',
        shortDescriptionLegal: '',
        informationIconUrl: 'https://scalexpert.hml.societegenerale.com/sites/default/files/2024-02/visual_information_icon.svg',
        logoUrl: 'https://scalexpert.hml.societegenerale.com/sites/default/files/2024-02/e_financing_visual_logo_FR.svg',
        displayLogo: true,
        duration: 3,
        additionalInformation: "<p>Le paiement en 3 fois par carte bancaire est une solution de paiement qui vous permet d'échelonner le règlement de votre commande en 3 mensualités débitées sur le compte associé à votre carte bancaire.<br> Exemple : pour un achat de 600 € payé en 3 fois, vous réglez 3 échéances de 200€. Montant du financement : 600 €. TAEG FIXE: 0%. Taux débiteur fixe : 0%. Frais:0€. Montant total dû : 600€. Le prélèvement des échéances s'étale sur une durée de 90 jours maximum à compter de la date d'achat*.</p><div class='scalexpert_subtitle'>Comment ça marche ?</div><ol> <li>Ajoutez le produit à votre panier, finalisez votre achat puis validez votre panier.</li> <li>Au moment du paiement, choississez de payer en 3X avec une carte bancaire.</li> <li>Renseignez les informations demandées. Si besoin, procédez à l'authentification 3D secure, selon la méthode mise en place par votre banque. Obtenez une réponse immédiate de notre partenaire FRANFINANCE.<br>C'est terminé ! </li></ol>",
        legalText: "<div class='scalexpert_subtitle'>Conditions d'acceptation</div><p>*Offre réservée aux personnes physiques majeures titulaires (résidant en France métropolitaine et DROM/COM) d’une carte bancaire valable au moins 3 mois après la date de conclusion du contrat de paiement échelonné et dont les utilisations ne sont pas soumises à une demande d’autorisation systématique (notamment les cartes Visa Electron et Maestro, pour des montants compris entre 100 € et 4000 €).<br>Sous réserve d’acceptation de l’offre de paiement échelonné par Franfinance – 719 807 406 RCS Nanterre – N°ORIAS 07 008 346 (www.orias.fr). Vous bénéficiez du délai légal de rétractation de 14 jours à compter de la date d’acceptation du contrat de paiement échelonné. Conditions au 31/08/2023.</p>",
        infoShortDetailPayment: '<span class="scalexpert-bold">soit <span class="scalexpert-highlight">594,33 € / mois</span></span>',
        infoLongDetailPayment: 'soit <span class="scalexpert-highlight">3 prélèvements</span> de <span class="scalexpert-highlight">594,33 €</span>',
        installmentsItems: [
            '<span>Montant total dû</span><span>1 783,00 €</span>',
            '<span>Aujourd\'hui</span><span>594,33 €</span>',
            '<span>2ème prélèvement</span><span>594,33 €</span>',
            '<span>3ème prélèvement</span><span>594,34 € </span>'
        ],
        installmentsMentions: [
            'Montant du financement : 1 783,00 €.',
            'TAEG FIXE : 0%.',
            'Frais : 0,00 €.',
            'Montant total dû : 1 783,00 €.'
        ]
    }
]

4. Display the simulator

To start generating and displaying the component, you will need to do:

Snippet.display();

5. Complete code of the example

<link rel="stylesheet" href="scalexpert.css">
<script src="scalexpert.js"></script>
<div class="scalexpert-example"></div>
<template id="scalexpert">
    <div data-scalexpertjs="content"></div>
</template>
<template id="scalexpert-solution">
    <div class="scalexpert-solution scalexpertjs-solution"
         data-scalexpertjs="solutionid"
    >
        <div class="scalexpert-solution-top">
            <span data-scalexpertjs="title"></span>
            <img class="scalexpert-solution-informationicon"
                 data-scalexpertjs="icon"
                 src=""
                 alt="Information"
                 width="16"
                 height="16"
                 data-modal="openModal"
                 data-idmodal=""
            >
            <img class="scalexpert-solution-logo"
                 data-scalexpertjs="logo"
                 src=""
                 alt=""
            >
        </div>
        <div data-scalexpertjs="content"></div>
        <div class="scalexpert-solution-shortDescriptionLegal"
             data-scalexpertjs="shortDescriptionLegal"
        >
        </div>
    </div>
</template>
<template id="scalexpert-list">
    <div class="scalexpert-list">
        <ul class="scalexpert-list-content"
            data-scalexpertjs="content"
        ></ul>
        <div data-scalexpertjs="infoShortDetailPayment"></div>
    </div>
</template>
<template id="scalexpert-list-item">
    <li class="scalexpert-list-item"
        data-scalexpertjs="item"
        data-current="false"
        data-id=""
    ></li>
</template>
<template id="scalexpert-modal">
    <div id=""
         class="scalexpert-modal"
         data-scalexpertjs="solutiongroupid"
         aria-hidden="true"
         data-display="false"
         data-modal
    >
        <div class="scalexpert-modal-content"
             role="document"
        >
            <div data-scalexpertjs="content"></div>
        </div>
        <div class="scalexpert-modal-overlay"
             data-scalexpertjs="modaloverlay"
        ></div>
    </div>
</template>
<template id="scalexpert-modal-solution">
    <div class="scalexpert-modal-solution scalexpertjs-solution"
         data-scalexpertjs="solutionid"
    >
        <div class="scalexpert-modal-header">
            <div class="scalexpert-modal-title"
                 data-scalexpertjs="title"
            ></div>
            <button type="button"
                    class="scalexpert-modal-close"
                    aria-label="Fermer"
                    data-scalexpertjs="close"
            >
                    X
            </button>
        </div>
        <div class="scalexpert-modal-body">
            <div class="scalexpert-modal-mainContent">
                <div class="scalexpert-modal-mainContent-left"
                     data-scalexpertjs="additionalInformation"
                ></div>
                <div class="scalexpert-modal-mainContent-right">
                    <div class="scalexpert-modal-mainContent-right-content">
                        <div class="scalexpert-modal-mainContent-right-top">
                            Simulez votre paiement
                            <img class=""
                                 data-scalexpertjs="logo"
                                 src=""
                                 alt=""
                            >
                        </div>
                        <ul data-scalexpertjs="content"></ul>
                        <div data-scalexpertjs="infoLongDetailPayment"></div>
                        <div class="scalexpert-installments-content"
                             data-scalexpertjs="installments"
                        ></div>
                        <div class="scalexpert-installments-mentions"
                             data-scalexpertjs="mentions"
                        ></div>
                    </div>
                </div>
            </div>
            <div data-scalexpertjs="legalText"></div>
        </div>
    </div>
</template>
<template id="scalexpert-installments-item">
    <div class="scalexpert-installments-item"
         data-scalexpertjs="item"
    ></div>
</template>
<template id="scalexpert-installments-mention">
    <span class="scalexpert-installments-mention"
         data-scalexpertjs="item"
    ></span>
</template>
<script type="application/javascript">
    (document.addEventListener("DOMContentLoaded", () => {
            let Snippet = new Scalexpert();
            Snippet.setSettings({
                anchor: '.scalexpert-example',
                simulations: [
                    {
                        title: 'Payez en 3 fois sans frais avec votre carte bancaire',
                        shortDescriptionLegal: '',
                        informationIconUrl: 'https://scalexpert.hml.societegenerale.com/sites/default/files/2024-02/visual_information_icon.svg',
                        logoUrl: 'https://scalexpert.hml.societegenerale.com/sites/default/files/2024-02/e_financing_visual_logo_FR.svg',
                        displayLogo: true,
                        duration: 3,
                        additionalInformation: "<p>Le paiement en 3 fois par carte bancaire est une solution de paiement qui vous permet d'échelonner le règlement de votre commande en 3 mensualités débitées sur le compte associé à votre carte bancaire.<br> Exemple : pour un achat de 600 € payé en 3 fois, vous réglez 3 échéances de 200€. Montant du financement : 600 €. TAEG FIXE: 0%. Taux débiteur fixe : 0%. Frais:0€. Montant total dû : 600€. Le prélèvement des échéances s'étale sur une durée de 90 jours maximum à compter de la date d'achat*.</p><div class='scalexpert_subtitle'>Comment ça marche ?</div><ol> <li>Ajoutez le produit à votre panier, finalisez votre achat puis validez votre panier.</li> <li>Au moment du paiement, choississez de payer en 3X avec une carte bancaire.</li> <li>Renseignez les informations demandées. Si besoin, procédez à l'authentification 3D secure, selon la méthode mise en place par votre banque. Obtenez une réponse immédiate de notre partenaire FRANFINANCE.<br>C'est terminé ! </li></ol>",
                        legalText: "<div class='scalexpert_subtitle'>Conditions d'acceptation</div><p>*Offre réservée aux personnes physiques majeures titulaires (résidant en France métropolitaine et DROM/COM) d’une carte bancaire valable au moins 3 mois après la date de conclusion du contrat de paiement échelonné et dont les utilisations ne sont pas soumises à une demande d’autorisation systématique (notamment les cartes Visa Electron et Maestro, pour des montants compris entre 100 € et 4000 €).<br>Sous réserve d’acceptation de l’offre de paiement échelonné par Franfinance – 719 807 406 RCS Nanterre – N°ORIAS 07 008 346 (www.orias.fr). Vous bénéficiez du délai légal de rétractation de 14 jours à compter de la date d’acceptation du contrat de paiement échelonné. Conditions au 31/08/2023.</p>",
                        infoShortDetailPayment: '<span class="scalexpert-bold">soit <span class="scalexpert-highlight">594,33 € / mois</span></span>',
                        infoLongDetailPayment: 'soit <span class="scalexpert-highlight">3 prélèvements</span> de <span class="scalexpert-highlight">594,33 €</span>',
                        installmentsItems: [
                            '<span>Montant total dû</span><span>1 783,00 €</span>',
                            '<span>Aujourd\'hui</span><span>594,33 €</span>',
                            '<span>2ème prélèvement</span><span>594,33 €</span>',
                            '<span>3ème prélèvement</span><span>594,34 € </span>'
                        ],
                        installmentsMentions: [
                            'Montant du financement : 1 783,00 €.',
                            'TAEG FIXE : 0%.',
                            'Frais : 0,00 €.',
                            'Montant total dû : 1 783,00 €.'
                        ]
                    }
                ]
            });
            Snippet.display();
        }
    ));
</script>

2. Configuration Variables Details

Variable	Type	Description	Affichage encart	Affichage modal / popin
title	string/HTML	Titre de la solution de paiment “Payez en 3 fois sans frais avec votre carte bancaire“
shortDescriptionLegal	string/HTML	Information courte à afficher sur l’encart, par exemple : “Un crédit vous engage et doit être remboursé. Vérifiez vos capacités de remboursement avant de vous engager.”
informationIconUrl	string/URL	Url de l’icone d’information, qui permet l’ouverture de la modale/popin contenant les détails de la simulation
logoUrl	string/URL	Url du logo de la solution, utilisé et affiché si la variable displayLogo est à true
displayLogo	boolean	Permet d’afficher ou non le logo de la solution
duration	int	Définie le nombre d'échéances (x3, x4, etc.)
additionalInformation	string/HTML	Contenu HTML de la partie gauche de la modale / popin, description de la solution
legalText	string/HTML	Texte pour les mentions légales, conditions d’acceptation
infoShortDetailPayment	string/HTML	Court détail des mensualités du financement ”soit X € / mois”
infoLongDetailPayment	string/HTML	Informations détaillées des mensualités du financement ”soit X prélèvements de X €”
installmentsItems	Array [string/HTML]	Liste des différentes échéances ”Aujourd'hui X €” ”2ème prélèvement X €”
installmentsMentions	Array [string/HTML]	Liste des informations du financement ”Montant du financement : X €. TAEG FIXE : X%.”

Box with variable names

Modal / Popin with variable namesriables

B- Implementation method with data returned from the raw Scalexpert API.

1. Configuration / settings

Adding the component's “data”, here the “anchor” (JavaScript selector), where the component should be displayed:

Snippet.setDatas({
  anchor: '.scalexpert-example'
});

Now you need to pass the raw data from the Eligibility and Simulations API responses

Documentation API Eligibility et Simulations e-Financing API | Scalexpert API Docs

financedAmount: float,          // Donnée de l'API Solution
buyerBillingCountry: string,    // Donnée de l'API Solution
solutions: Array[]              // Donnée de l'API Eligibility
solutionSimulations: Array[],   // Donnée de l'API Solution

2. Display

To start generating and displaying the component, you will need to do:

Snippet.display();

<link rel="stylesheet" href="scalexpert.css">
<script src="scalexpert.js"></script>

<div class="scalexpert-example"></div>

<template id="scalexpert">
    <div data-scalexpertjs="content"></div>
</template>

<template id="scalexpert-solution">
    <div class="scalexpert-solution scalexpertjs-solution"
         data-scalexpertjs="solutionid"
    >
        <div class="scalexpert-solution-top">
            <span data-scalexpertjs="title"></span>
            <img class="scalexpert-solution-informationicon"
                 data-scalexpertjs="icon"
                 src=""
                 alt="Information"
                 width="16"
                 height="16"
                 data-modal="openModal"
                 data-idmodal=""
            >
            <img class="scalexpert-solution-logo"
                 data-scalexpertjs="logo"
                 src=""
                 alt=""
            >
        </div>

        <div data-scalexpertjs="content"></div>

        <div class="scalexpert-solution-shortDescriptionLegal"
             data-scalexpertjs="shortDescriptionLegal"
        >
        </div>
    </div>
</template>

<template id="scalexpert-list">
    <div class="scalexpert-list">
        <ul class="scalexpert-list-content"
            data-scalexpertjs="content"
        ></ul>
        <div data-scalexpertjs="infoShortDetailPayment"></div>
    </div>
</template>

<template id="scalexpert-list-item">
    <li class="scalexpert-list-item"
        data-scalexpertjs="item"
        data-current="false"
        data-id=""
    ></li>
</template>

<template id="scalexpert-modal">
    <div id=""
         class="scalexpert-modal"
         data-scalexpertjs="solutiongroupid"
         aria-hidden="true"
         data-display="false"
         data-modal
    >
        <div class="scalexpert-modal-content"
             role="document"
        >
            <div data-scalexpertjs="content"></div>
        </div>
        <div class="scalexpert-modal-overlay"
             data-scalexpertjs="modaloverlay"
        ></div>
    </div>
</template>

<template id="scalexpert-modal-solution">
    <div class="scalexpert-modal-solution scalexpertjs-solution"
         data-scalexpertjs="solutionid"
    >
        <div class="scalexpert-modal-header">
            <div class="scalexpert-modal-title"
                 data-scalexpertjs="title"
            ></div>
            <button type="button"
                    class="scalexpert-modal-close"
                    aria-label="Fermer"
                    data-scalexpertjs="close"
            >
                    X
            </button>
        </div>
        <div class="scalexpert-modal-body">
            <div class="scalexpert-modal-mainContent">
                <div class="scalexpert-modal-mainContent-left"
                     data-scalexpertjs="additionalInformation"
                ></div>

                <div class="scalexpert-modal-mainContent-right">
                    <div class="scalexpert-modal-mainContent-right-content">
                        <div class="scalexpert-modal-mainContent-right-top">
                            Simulez votre paiement

                            <img class=""
                                 data-scalexpertjs="logo"
                                 src=""
                                 alt=""
                            >
                        </div>

                        <ul data-scalexpertjs="content"></ul>
                        <div data-scalexpertjs="infoLongDetailPayment"></div>
                        <div class="scalexpert-installments-content"
                             data-scalexpertjs="installments"
                        ></div>
                        <div class="scalexpert-installments-mentions"
                             data-scalexpertjs="mentions"
                        ></div>
                    </div>
                </div>
            </div>

            <div data-scalexpertjs="legalText"></div>
        </div>
    </div>
</template>

<template id="scalexpert-installments-item">
    <div class="scalexpert-installments-item"
         data-scalexpertjs="item"
    ></div>
</template>

<template id="scalexpert-installments-mention">
    <span class="scalexpert-installments-mention"
         data-scalexpertjs="item"
    ></span>
</template>

<script type="application/javascript">
    (document.addEventListener("DOMContentLoaded", () => {
          let Snippet = new Scalexpert();

          Snippet.setDatas({
              anchor: '.scalexpert-example',
              financedAmount: 2543.36,
              buyerBillingCountry: "FR",
              solutions: [
                  {
                    solutionCode: "SCFRSP-4XTS",
                    familyCode: "SC",
                    marketCode: "FR",
                    conditions: "TS",
                    communicationKit: {
                      solutionCode: "SCFRSP-4XTS",
                      visualTitle: '<div class="scalexpert_title">Payez en 4 fois sans frais avec votre carte bancaire</div>',
                      visualDescription: null,
                      visualInformationIcon: "https://scalexpert.hml.societegenerale.com/sites/default/files/2024-02/visual_information_icon.svg",
                      visualAdditionalInformation: '<p>Le paiement en 4 fois par carte bancaire est une solution de paiement qui vous permet d\'échelonner le règlement de votre commande en 4 mensualités débitées sur le compte associé à votre carte bancaire.<br>Exemple : pour un achat de 800 € payé en 4 fois, vous réglez 4 échéances de 200€. Montant du financement : 800€. taeg fixe: 0%. taux débiteur fixe : 0%. frais:0€. montant total dû : 800€. Le prélèvement des échéances s\'étale sur une durée de 90 jours maximum à compter de la date d\'achat*.</p><div class="scalexpert_subtitle">Comment ça marche ?</div><ol> <li>Ajoutez le produit à votre panier, finalisez votre achat puis validez votre panier.</li> <li>Au moment du paiement, choississez de payer en 4x avec une carte bancaire.</li> <li>Renseignez les informations demandées. Si besoin, procédez à l\'authentification 3d secure, selon la méthode mise en place par votre banque. Obtenez une réponse immédiate de notre partenaire franfinance.<br>C\'est terminé ! </li></ol>',
                      visualLegalText: '<div class="scalexpert_subtitle">Conditions d\'acceptation</div><p>*Offre réservée aux personnes physiques majeures titulaires (résidant en France métropolitaine et DROM/COM) d’une carte bancaire valable au moins 3 mois après la date de conclusion du contrat de paiement échelonné et dont les utilisations ne sont pas soumises à une demande d’autorisation systématique (notamment les cartes Visa Electron et Maestro, pour des montants compris entre 100 € et 4000 €).<br>Sous réserve d’acceptation de l’offre de paiement échelonné par Franfinance – 719 807 406 RCS Nanterre – N°ORIAS 07 008 346 (www.orias.fr). Vous bénéficiez du délai légal de rétractation de 14 jours à compter de la date d’acceptation du contrat de paiement échelonné. Conditions au 31/08/2023.</p>',
                      visualTableImage: null,
                      visualLogo: "https://scalexpert.hml.societegenerale.com/sites/default/files/2024-02/e_financing_visual_logo_FR.svg",
                      visualInformationNoticeURL: null,
                      visualProductTermsURL: null
                    }
                  },
                  {
                    solutionCode: "SCFRLT-TXPS",
                    familyCode: "SC",
                    marketCode: "FR",
                    conditions: null,
                    communicationKit: {
                      solutionCode: "SCFRLT-TXPS",
                      visualTitle: '<div class="scalexpert_title">Etalez votre paiement avec un crédit</div>',
                      visualDescription: '<div class="scalexpert_important">Un crédit vous engage et doit être remboursé. Vérifiez vos capacités de remboursement avant de vous engager.</div>',
                      visualInformationIcon: "https://scalexpert.hml.societegenerale.com/sites/default/files/2024-02/visual_information_icon.svg",
                      visualAdditionalInformation: '<div class="scalexpert_subtitle">Comment ça marche ?</div><ol> <li>Ajoutez le produit à votre panier et finalisez votre achat. Validez votre panier</li> <li>Au moment du paiement, choisissez d\'étaler votre paiement avec un crédit.</li> <li>Renseignez les informations demandées, munissez-vous de votre pièce d\'identité et signez électroniquement votre contrat de financement. Obtenez une réponse immédiate de notre partenaire FRANFINANCE. <br>C\'est terminé! </li></ol>',
                      visualLegalText: 'Mentions légales<br><div class="scalexpert_important">Un crédit vous engage et doit être remboursé. Vérifiez vos capacités de remboursement avant de vous engager.</div><br>Offre de crédit valable sous réserve d’acceptation du crédit affecté par FRANFINANCE (SA au capital de 31.357.776,00 euros - 719 807 406 RCS Nanterre - 53 rue du Port, CS 90201, 92724 Nanterre Cedex - France -, Intermédiaire en assurance inscrit l’ORIAS N° 07 008 346 - www.orias.fr). Assurances souscrites auprès de SOGECAP et SOGESSUR, entreprises régies par le Code des Assurances. FRANFINANCE, SOGECAP et SOGESSUR sont des filiales du Groupe SOCIETE GENERALE. Vous disposez d’un délai de rétractation de 14 jours à compter de la date de signature du contrat de crédit. Conditions au 01/05/2024.',
                      visualTableImage: null,
                      visualLogo: "https://scalexpert.hml.societegenerale.com/sites/default/files/2024-02/e_financing_visual_logo_FR.svg",
                      visualInformationNoticeURL: null,
                      visualProductTermsURL: null
                    }
                  },
              ],
              solutionSimulations: [
                  {
                    solutionCode: "SCFRSP-4XTS",
                    simulations: [
                      {
                        duration: 4,
                        effectiveAnnualPercentageRate: 0,
                        nominalPercentageRate: 0,
                        totalCost: 0,
                        dueTotalAmount: 2543.36,
                        feesAmount: 0,
                        installments: [
                          {
                            number: 1,
                            amount: 635.84
                          },
                          {
                            number: 2,
                            amount: 635.84
                          },
                          {
                            number: 3,
                            amount: 635.84
                          },
                          {
                            number: 4,
                            amount: 635.84
                          }
                        ]
                      }
                    ]
                  },
                  {
                    solutionCode: "SCFRLT-TXPS",
                    simulations: [
                      {
                        duration: 6,
                        effectiveAnnualPercentageRate: 5.12,
                        nominalPercentageRate: 5,
                        totalCost: 37.18,
                        dueTotalAmount: 2580.54,
                        feesAmount: 0,
                        installments: [
                          {
                            number: 1,
                            amount: 430.09
                          }
                        ]
                      },
                      {
                        duration: 12,
                        effectiveAnnualPercentageRate: 5.12,
                        nominalPercentageRate: 5,
                        totalCost: 69.4,
                        dueTotalAmount: 2612.76,
                        feesAmount: 0,
                        installments: [
                          {
                            number: 1,
                            amount: 217.73
                          }
                        ]
                      },
                      {
                        duration: 18,
                        effectiveAnnualPercentageRate: 5.12,
                        nominalPercentageRate: 5,
                        totalCost: 101.74,
                        dueTotalAmount: 2645.1,
                        feesAmount: 0,
                        installments: [
                          {
                            number: 1,
                            amount: 146.95
                          }
                        ]
                      },
                      {
                        duration: 24,
                        effectiveAnnualPercentageRate: 5.12,
                        nominalPercentageRate: 5,
                        totalCost: 134.56,
                        dueTotalAmount: 2677.92,
                        feesAmount: 0,
                        installments: [
                          {
                            number: 1,
                            amount: 111.58
                          }
                        ]
                      }
                    ]
                  }
              ]      
          });
          
          Snippet.display();
      }
    ));
</script>

4. Configuration Variables Details

Variable	Type	Description
financedAmount	float	Data from the Solution API Amount to be financed. Example:3943.36
buyerBillingCountry	string	Donnée en provenance de l’API Solution Country of the buyer (FR for France or DE for Germany). Example: "FR"
solutions	Array[Objects{}]	Data from the Eligibility ProductsAndServicesResponse API
solutionSimulations	Array[Objects{}]	Data from Solution API List of simulation results grouped by solutionCode.

5. Notes

Unlike the first method, here we cannot choose to show or hide the solution logo displayLogo, this information is not available in the API data. You can do it for all solutions, this setting displayLogoin the function prepareDataof the JavaScript file. If you want to do it only for certain solutions, you will have to modify and adapt the code.

C. Customization

1. Templates

The different templates are modifiable, however it is mandatory to keep the correspondence of the ids of the templates used in the JavaScript part . The attributes data-scalexpertjsare used in the JavaScript, so it is strongly recommended to keep these attributes as well as the classes scalexpertjs-* also useful in the JavaScript part. Everything that is layout, DOM structure, classes and various attributes ( except the attributes data-scalexpertjsand classesscalexpertjs-* ) is modifiable, within the limit of common sense to keep the operation and logic of the associated JavaScript.

2. CSS

The CSS is fully editable or can be easily overridden to match your integration.

3. Debug

There is a part to help you debug, if needed, in your browser console. In the class Scalexpertin the constructoryou just need to add this to display the different logs made available.

this.devMode = {
 active: true, 
 label: '== Scalexpert == ', 
 isEmpty: ' is empty or not exist ?' 
 };

Different logs will be displayed, the different “solution ids” generated (for display), different information, the number of components in the page, simulation, solution title, events, if some variables are not found or empty, if the desired anchor is not found, etc.

Example of possible logs

4. Metric information

Loading is done asynchronously, loading in JavaScript, and waiting for the APIs to return. Depending on the location chosen on your site, asynchronous loading can cause an unexpected layout change, in this case it is strongly recommended to plan the place of the element in your page, in order to comply with the standard of standards (w3c, CLS), before loading. Be careful for certain cases the simulation is not eligible (price, condition), the component will therefore not be displayed, to be taken into account so as not to reserve the space in this case.

5. Accessibility information

The code provided in this Snippet complies with the RGAA accessibility standard, however in a more global site and page context, adaptations will need to be made (example: keyboard navigation).

After integrating the solution, we advise you to check the accessibility compliance of the page (tab navigation, screen reader, contrast, etc.). General accessibility improvement framework - RGAA