Intégrer le widget Lead Generator sur votre site web

Introduction

Sommaire

1. Configuration de base

2. Lead Generator V1

   a. Constructeur et paramètres 

   b. Tester via URL

3. Lead Generator V2

   a. Constructeur et paramètres

   b. Tester via URL

4. Conformité au RGPD et gestion du consentement

1. Configuration de base

Le moyen le plus simple de générer le code HTML correct est d’utiliser notre constructeur.

• Avec le constructeur, vous pouvez saisir la clé API fournie et configurer directement certains éléments de design du widget.

• L’outil génère alors automatiquement le code prêt à l’emploi, que vous pouvez copier-coller sur votre site web.

Si vous préférez créer le code manuellement, la configuration est disponible dans notre documentation API et est également liée pour les variantes respectives aux sections 2 et 3 de cet article.

2. Lead Generator V1

a. Constructeur et paramètres

Le constructeur pour notre Lead Generator V1 est disponible ci-dessous:  

=> https://fisher.pricehubble.com/fisher-constructor.html 

Si vous préférez configurer le code HTML manuellement, vous pouvez consulter la documentation suivante : Lead Generator V1. 

Le widget Lead Generator prend en charge plusieurs paramètres pour l’adapter à vos besoins. Pour la V1 :

• activeColor (1): la couleur choisie est appliquée à tous les éléments actifs tels que les contours des champs et les curseurs, là où une action ou une sélection de l’utilisateur est attendue.

• buttonColor (2) : la couleur choisie est appliquée à tous les boutons du formulaire.

• textColor (3) : la couleur choisie est appliquée à tous les éléments de texte tels que les titres de champs.

• resizable (4) : contrôle si le widget ajuste automatiquement sa hauteur et sa largeur pour s’adapter au conteneur.
  Si cette option n’est pas cochée, le widget conserve une taille fixe et peut ne pas s’adapter correctement aux différentes tailles d’écran ou de conteneur.

• lang (5) : le widget est dans une langue spécifique (ex. : de, fr, en) ; si aucune langue n'est sélectionnée, alors la langue s’adapte dynamiquement aux paramètres du navigateur.

• scrollTopOffset (6) : définit la distance par rapport au haut de la page à laquelle le widget doit être positionné lorsque la page défile.
  Utile si une barre de navigation fixe (sticky) recouvre une partie du widget. Par exemple, si votre barre de navigation fait 50 px de haut, définissez scrollTopOffset: 50 pour que le widget reste toujours visible en dessous de celle-ci.

• custom (7) : permet de transmettre des informations supplémentaires à chaque soumission du formulaire du widget.
  Cette valeur est incluse dans l’e-mail de notification, ce qui permet de suivre l’origine d’une demande. Par exemple, si le widget est intégré sur plusieurs sites web, vous pouvez définir custom: 'www.source-du-lead.com' pour identifier le site à l’origine de la demande.

• gaTrackingId (8) : permet de transférer certains événements du widget vers votre compte Google Analytics.
  Pour activer ce suivi, un ID de mesure GA4 valide doit être inclus dans la configuration.

• iframe border (9) : définit si la bordure de l’iframe est visible ou non.

b. Tester via URL

Vous pouvez prévisualiser rapidement le Lead Generator Widget dans votre navigateur afin de voir le rendu du formulaire à l’aide d’une URL de test.

• Étape 1

URL de base : https://fisher.pricehubble.com/?api-key={{your_API_key}}

=> Remplacez {{your_API_key}} par votre clé API fournie par PriceHubble.

• Étape 2

Pour tester le widget dans une langue spécifique au lieu de la langue par défaut du navigateur, ajoutez le paramètre lang :

Exemple : https://fisher.pricehubble.com/?api-key={{your_API_key}}&lang=fr

=> lang=fr définit la langue en français.

⚠️ Attention : cette URL de test permet uniquement de prévisualiser le formulaire. Elle ne met pas à jour le widget intégré sur votre site web.

L’utilisation de cette URL est un moyen pratique de vérifier le rendu des différentes étapes du formulaire ainsi que des libellés, avant son intégration en production.

3. Lead Generator V2

a. Constructeur et paramètres

Début du formulaire avec des titres génériques : 

Configuration avec des titres personnalisés : 

b. Tester via URL

Vous pouvez tester le Lead Generator Widget directement dans votre navigateur en ajoutant des paramètres de configuration à l’URL du widget.

Il s’agit d’un moyen rapide de voir comment différents réglages influencent l’apparence et le comportement du widget, sans modifier le code du site en production.

• Étape 1

URL de base : https://fisher-v2.pricehubble.com/?api-key={{your_API_key}}

Remplacez {{your_API_key}} par votre clé API fournie par PriceHubble.

• Étape 2

Pour tester le widget dans une langue spécifique au lieu de la langue par défaut du navigateur, ajoutez le paramètre lang :

Exemple :
https://fisher-v2.pricehubble.com/?api-key={{your_API_key}}&lang=fr

lang=fr définit la langue en français.

⚠️ Attention : cette URL de test permet uniquement de prévisualiser le formulaire. Elle ne met pas à jour le widget intégré sur votre propre site web.

L’utilisation de cette URL est un moyen pratique de vérifier le parcours du widget, les libellés et les différentes étapes du formulaire avant son intégration en production.

4. Conformité au RGPD et gestion du consentement

Afin de respecter la réglementation RGPD, l’activation des outils d’analytique n’est autorisée qu’après l’obtention du consentement de l’utilisateur. Le paramètre consentGranted contrôle si le widget est autorisé à envoyer des données analytiques à des services tiers (comme Google Analytics) lors de son initialisation.

• true → le tracking est autorisé immédiatement si l’utilisateur a déjà donné son consentement.
  Le consentement utilisateur est, par exemple, accordé via une fenêtre « Autoriser le suivi » lors de l’entrée sur le site.
  Il s’agit du paramétrage par défaut.

• false → le tracking est bloqué au départ. Une fois que l’utilisateur accepte le suivi, il est nécessaire d’appeler la fonction
  FisherWidget.grantConsent() pour activer l’analytique.
  Pour cette approche, vous trouverez plus d’informations ici :  Lead Generator - GDPR Configuration.

Le paramètre consentGranted peut être contrôlé de deux manières :

• via la case à cocher GDPR Consent granted dans les constructeurs

• via le paramètre consentGranted directement dans l’extrait de code HTML