Parc immobilier iroko.eu

Actifs des SCPI Iroko en grille ou sur une carte interactive, avec recherche, filtres par SCPI, pays et typologie, et tri. Un clic sur un actif ouvre sa fiche dans un panneau, sans quitter la page. Même contenu que /parc-immobilier, sans le titre de la page.

Principes d'intégration

  • Un seul élément Embed Webflow contient l'<iframe> et une ligne <script src>. Le script est indispensable : c'est lui qui charge l'iframe et ouvre les fiches. Il est hébergé par opendata : ses évolutions arrivent avec chaque déploiement, sans rien recoller dans Webflow.
  • Fiche d'un actif : un clic sur une carte ouvre sa fiche (photos, informations clés, description, gérant, localisation) dans un panneau par-dessus la page, depuis la droite sur ordinateur et en plein écran sur mobile. L'URL reste celle de la page Webflow, avec ?actif=… ajouté : le bouton retour ferme la fiche, le lien se partage et rouvre la fiche. Elle se ferme aussi avec ×, Échap ou un clic à côté.
  • Sur iroko.eu (et son staging Webflow) : à partir de 768 px de large, là où le panneau s'ouvrirait sur le côté, un clic ouvre la page actif du site (/actif?id=…) dans le même onglet, à la place du panneau. Sur mobile, la fiche reste en plein écran. Un lien avec ?actif=… ouvert sur ordinateur mène aussi à la page actif. Les autres sites gardent le panneau.
  • Hauteur automatique : elle suit le contenu via postMessage, à chaque recherche, filtre ou « Afficher plus ». Le height du snippet n'est qu'une valeur d'amorçage.
  • Liens partageables : les filtres sont recopiés dans l'URL de la page Webflow (?pays=espagne&scpi=iroko-zen), et une URL ainsi filtrée rouvre l'embed avec les mêmes filtres. Les autres paramètres de la page (UTM…) sont conservés.
  • Vue carte : le bouton « Carte » affiche tous les actifs filtrés sur une carte (MapLibre, fonds OpenFreeMap issus d'OpenStreetMap : open source, sans clé ni cookie), regroupés par zone selon le zoom. Son code n'est chargé qu'au premier clic, la grille reste donc aussi légère. ?vue=carte ouvre l'embed directement sur la carte. Dans la page, la molette et le glisser à un doigt continuent de faire défiler la page : on zoome avec Ctrl/⌘ + molette, les boutons +/−, ou à deux doigts.
  • Fond transparent : l'embed ne peint aucun fond, le fond de la section Webflow traverse l'iframe.
  • Largeur : width="100%", sans largeur maximale — c'est le conteneur Webflow qui décide. Le nombre de colonnes suit la place disponible : une seule sur mobile, puis des cartes de 240 à 372 px de large, jamais plus.
  • Données : l'embed est généré au déploiement du site opendata (photos optimisées une fois pour toutes). Un nouvel actif ajouté dans Supabase apparaît au déploiement suivant. Sur la carte, il faut que ses bâtiments aient une latitude et une longitude (colonne assets) ; sinon une note sous la carte le signale.

Aperçu et code d'intégration

URL complète : /embed/parc-immobilier/actifs

Code à copier‑coller :