Documents iroko.eu (B2C)

Documents publics destinés aux épargnants : les derniers bulletins trimestriels mis en avant, puis une recherche, des filtres par fonds et par catégorie, et les documents rangés par catégorie. Même contenu que /documents/epargnants, sans le titre ni l'illustration de la page.

Principes d'intégration

  • Snippet en deux parties : l'<iframe> et la ligne <script src> qui charge /embed/documents.js, tous les deux dans le même élément Embed Webflow. Le script est servi par opendata : ses évolutions arrivent avec nos déploiements, sans rien recoller dans Webflow. Il remplace l'ancien petit script d'écoute postMessage à coller en entier.
  • Hauteur automatique : elle s'ajuste au contenu via postMessage, y compris à chaque filtrage — masquer des documents fait passer la liste de plusieurs milliers de pixels à quelques centaines. Il n'y a pas de paramètre ?height=, la hauteur est toujours exacte. Le height="1200" du snippet n'est qu'une valeur d'amorçage, remplacée dès le premier chargement.
  • Bouton « Rechercher ou filtrer » sur mobile : sous 1024 px, dès que la recherche et les filtres sont remontés hors de l'écran, le script affiche un bouton flottant en bas de l'écran (avec le nombre de critères actifs). Un appui fait remonter la page jusqu'aux filtres, juste sous la navbar fixe de Webflow, mesurée automatiquement. Il se cache au-dessus du footer, et passe sous les bandeaux cookies et les bulles de chat.
  • Fond transparent : l'embed ne peint aucun fond, le fond de votre section Webflow traverse l'iframe. Seuls les champs de formulaire gardent leur fond opaque.
  • Largeur : width="100%", sans largeur maximale — c'est le conteneur Webflow qui décide. À partir de 1024 px, les catégories passent en colonne à gauche de la liste ; en dessous, elles forment une rangée de boutons au-dessus.
  • Pré-filtrage : ajoutez ?fonds= et/ou ?categorie= à l'URL de l'iframe pour l'ouvrir déjà filtrée, par exemple /embed/documents/epargnants?fonds=zen sur la page Iroko Zen. Fonds : zen, atlas, iroko. Catégories : legal, commercial, guide, rapport_annuel, esg, bt, other. L'épargnant peut ensuite changer de filtre.
  • Derniers bulletins : le dernier bulletin trimestriel d'Iroko Zen et d'Iroko Atlas est épinglé en haut, automatiquement ; il reste aussi dans sa catégorie. Dans chaque catégorie, seuls les documents clés restent visibles (DIC et note d'information, derniers rapports annuels, ESG et bulletins) ; les autres sont repliés derrière une ligne « Tout afficher ».
  • Liens : « Consulter » ouvre la version web d'un document quand elle existe (bulletins trimestriels), dans l'onglet courant, en faisant naviguer la page hôte et non l'iframe ; sinon le PDF, dans un nouvel onglet. « Télécharger » enregistre le PDF via /api/documents/[id]/download, car S3 sert les PDF pour affichage et non pour téléchargement.

Aperçu et code d'intégration

URL complète : /embed/documents/epargnants

Code à copier‑coller :