Comment mettre en place le widget d'estimation CityScan ?

A travers ce guide, vous allez comprendre comment mettre en place le widget d'estimation CityScan. Ce widget permet d'offrir un service supplémentaire à vos visiteurs et capter des prospects à travers l'estimation d'un bien en se basant sur sa localisation et ses caractéristiques.

Mise en place préalable

Entrez en relation avec notre service contact@cityscan.fr ou via le formulaire de demande de démo

Nos gestionnaires parcoureront avec vous de nombreuses options de personnalisation :

  • Gérer les autorisations de publication : Nous associons une liste de sites webs autorisés (dont vos environnements de développement) pour limiter l'accès au service.
  • Personnaliser le widget : Une couleur principale et une couleur secondaire pour correspondre à votre marque.
  • Collecte de la donnée prospect : Nous vous envoyons un mail ou effectuons un appel API POST avec la donnée.
  • Conditions générales : Nous affichons sur le widget les dispositions juridiques que vous nous transmettez.
  • Gestion des étapes : Vous pouvez décider de faire valider les coordonnées du prospect avant qu'il obtienne le résultat de l'estimation.
  • Rapports finaux : Le widget peut proposer un rapport gratuit, un rapport payant, les deux, ou aucun rapport, en conclusion du processus d'estimation.
  • Contrôle du formulaire : La plupart des champs peuvent ne pas apparaître, épurez le widget selon votre stratégie.
  • Et plein d'autres options à découvrir avec votre interlocuteur CityScan.

Obtention de la clé de configuration publique

A la fin du processus, nous vous communiquons une clé publique clientKey à laquelle correspondra un widget qui vous est propre.

Intégrer le widget à son site

Rappel

Avant de poursuivre, vérifiez que le nom de domaine du site qui va héberger le widget a été déclaré auprès de CityScan. En effet le widget ne peut être intégré QUE dans un site enregistré auprès de CityScan. Si vous avez le moindre doute ou que vous souhaitez enregistrer de nouveaux sites, contactez le service client CityScan.

Exemple : Votre site web www.monsiteweb.fr a été enregistré chez CityScan au moment de la configuration de votre widget. Vous pouvez intégrer votre widget sur ce site mais pas sur www.monsite-d-annonce.fr

La clé de configuration (clientKey) est différente de la clé API (apiKey) qui permet d'administrer votre compte et consommation et qui ne doit jamais être révélée.

L'iframe

À l'endroit où vous souhaitez que votre widget apparaisse, intégrez le code suivant :

<iframe src="https://www.cityscan.fr/widget?clientKey=VOTRE_CLIENT_KEY" allow="geolocation"></iframe>

L'intégration

Par défaut, une iframe a une taille fixe. Or, ce widget peut faire apparaître des formulaires plus ou moins longs. Les boutons d'étapes étant situés tout en bas de la "vue", cela peut avoir pour conséquence un design disgracieux.


Widget mal intégré

Nous vous proposons donc de rajouter un id (exemple : mon-iframe-estimateur) à votre élément HTML

<iframe id="mon-iframe-estimateur" src="https://www.cityscan.fr/widget?clientKey=VOTRE_CLIENT_KEY" allow="geolocation"></iframe>

ainsi que le code javascript suivant, dimensionnant l'iframe en fonction d'un évènement javascript propagé par notre widget.

const estimatorIframe = document.getElementById('mon-iframe-estimateur');
if (estimatorIframe) {
  window.addEventListener('message', (event) => {
    if (event.origin === 'https://www.cityscan.fr' && event.data?.eventName === 'widget-estimation-height') {
      estimatorIframe.style.height = `${event.data.height}px`;
    }
  });
}

Le résultat est visible sur notre page de démonstration, avec les formulaires de l'estimateur qui paraissent totalement intégrés à la page.

Récupérer la donnée prospect

Par email

Vous pouvez décider de recevoir un mail dès qu'un prospect a été enregistré dans notre base via votre widget.

Email avec le prospect

Par API

Pour s'intégrer parfaitement à votre applicatif, vous pouvez nous fournir un URL sur laquelle nous effectuerons un appel POST avec les informations suivantes :

curl --location -g --request POST 'https://www.agence-integratrice.com/api/callbackProspect' \
--header 'Content-Type: application/json' \
--data-raw '{
   "clientKey":"LA_CLIENT_KEY",
   "subscriber":null,
   "prospect":{
      "id":101,
      "firstName":"Jane",
      "lastName":"Grey",
      "email":"doc@cityscan.fr",
      "phone":"0123456789",
      "company":null,
      "pro":false,
      "proActivity":null,
      "prospectType":2,
      "habitationType":null,
      "projectType":1,
      "address":null,
      "typeId":null,
      "created":"2022-01-07 11:11:15"
   },
   "evaluation":{
      "id":35168468,
      "apiKeyId":54874,
      "address":{
         "id":294478,
         "route":"73 rue lecourbe",
         "postalCode":"75015",
         "city":"Paris",
         "geoloc":{
            "id":151837,
            "lat":"48.843353",
            "lon":"2.305336",
            "source":"API"
         },
         "parcel":null
      },
      "extAddressId":null,
      "expirationDate":"2022-04-06 20:14:24",
      "status":1,
      "activation":"2022-01-06 20:14:24",
      "deactivation":null,
      "lastSeen":null,
      "metadata":null,
      "realty":{
         "id":332,
         "evaluationId":124857,
         "name":null,
         "data":{
            "floor":4,
            "elevator":true,
            "areaGardenPrivate":null,
            "areaGardenShared":null,
            "areaBalcony":null,
            "areaLoggia":null,
            "areaCellar":null,
            "parkingOpen":null,
            "areaParkingOpen":null,
            "parkingBoxed":1,
            "areaParkingBoxed":15,
            "buildingFloors":null,
            "condominiumLots":null,
            "condominiumStanding":null,
            "condominiumCondition":null,
            "condominiumFacade":null,
            "pool":null,
            "walls":null,
            "typeId":2,
            "lastSaleDate":null,
            "area":50,
            "areaOther":0,
            "areaTerrace":null,
            "rooms":2,
            "bedrooms":null,
            "bathrooms":null,
            "buildingConstruction":1976,
            "condition":3,
            "buildingDpe":null,
            "noise":null,
            "light":4,
            "orientation":2,
            "vista":null,
            "amenityProximity":null,
            "chargesPropertyTax":null,
            "chargesMaintenance":null,
            "occupation":null,
            "detaxation":null,
            "easement":null,
            "owner":null,
            "residence":null,
            "ponderations":[
               {
                  "field":"rooms",
                  "ponderation":"building",
                  "weight":1.06
               },
               {
                  "field":"buildingConstruction",
                  "ponderation":"surroundings",
                  "weight":1.02
               },
               {
                  "field":"condition",
                  "ponderation":"building",
                  "weight":0.98
               }
            ],
            "areaPonderations":[
               {
                  "field":"areaParkingBoxed",
                  "ponderation":"other_surface",
                  "weight":30,
                  "value":15,
                  "computed":4.5
               },
               {
                  "field":"area",
                  "ponderation":"surface",
                  "weight":100,
                  "value":50,
                  "computed":50
               },
               {
                  "field":"totalSurface",
                  "computed":54
               }
            ]
         },
         "description":null,
         "price":null,
         "priceStandard":585000,
         "priceLow":562000,
         "priceHigh":603000,
         "confidence":1,
         "realtyImages":[

         ],
         "created":"2022-01-27 10:14:24",
         "surfacePrice":11700
      }
   }
}'

Notez bien le format data-raw en json et reportez-vous aux annexes de documentation pour connaître le détail des propriétés des objets realty (bien immobilier) ou évaluation