intégrer l'application sur mon site web
Comment intégrer le widget Où partent mes dépenses
L'application "Où partent mes dépenses" est un widget qui s'intègre sur une page d'un site internet.
Attention, pour que votre widget fonctionne correctement, vous devez avoir renseigné correctement l'adresse du site hôte dans Paramétrage > Gestion des hôtes.
Après avoir paramétré l'affichage du widget dans l'interface d'administration il faut intégrer le widget dans le site.
Cette page détaille les étapes à réaliser pour afficher le widget dans une page web.
Étape 1 : Script
Le script contient le code nécéssaire au fonctionnement du widget. Il doit être injecté dans la page pour que le widget fonctionne correctement.
Ajouter une balise script dans le head de la page en remplacement le paramètres "environnement" par la valeur correspondant à votre contexte.
<script src="{environnement}/caprenov-web.min.js"></script>Le paramètre "environnement" accepte comme valeurs :
Production : https://web.cap-renov.fr
Test : https://caprenov-web-recette.pia-production.fr
Étape 2 : Widget
Ajouter la balise du widget dans la page, à l'endroit ou vous souhaitez que le widget s'affiche.
<caprenov-web></caprenov-web>Il est recommandé d'intégrer le widget dans une page sans contenu à gauche ou à droite dans un conteneur sans marge horizontales pour que le widget puisse utiliser 100% de la largeur de la page.
Étape 3 : Paramétrer le widget
Définir les paramètres du widget à utiliser.
Liste des paramètres :
Paramètre 1 : "widget-token" Indispensable pour permettre au widget de récupérer votre paramétrage dans le BackOffice.
Paramètre 2 : "sticky-header-selector", chaine de caractère de type sélecteur CSS. Permet de prendre en compte la hauteur du header si celui-ci est sticky. Indiquez l'id ou la classe CSS à utiliser pour permettre au widget de calculer la hauteur du header sticky.
Paramètre 3 : "on-finished-callback", nom d'une fonction déclarée sur le site hôte pour récupérer les données saisies par l'utilisateur. Cette fonction est appelée par le widget à l'arrivée sur la page bilan. Elle reçoit en paramètre un objet contenant les données de simulation. Les données de simulation contiennent les informations du logement saisie par l'utilisateur ainsi que les résultats affichées sur la page bilan.
Exemple
<caprenov-web widget-token="b58bcb04-b0d2-4758-b2fa-6bd23ce75809" sticky-header-selector="header.sticky" on-finished-callback="callbackFn"></caprenov-web>Exemple d'utilisation dans une page web
<head>
<script src="https://web.cap-renov.fr/caprenov-web.min.js" async></script>
</head>
<body>
<caprenov-web widget-token="b58bcb04-b0d2-4758-b2fa-6bd23ce75809" sticky-header-selector="#header" on-finished-callback="callbackFn"></caprenov-web>
</body>
<!-- Exemple de fonction callback -->
<script>
function callbackFn (simulation) {
/* Utilisation de la simulation, sauvegarde dans CRM, etc. */
}
</script>Mis à jour le : 21/05/2024
Merci !