Webflow

Intégrez vos graphiques Embases dans Webflow grâce au composant Embed natif, avec support du responsive, des Collections CMS et du domain whitelisting.

Composant Embed

Dans l'éditeur Webflow, commencez par ouvrir le panneau « Elements » en cliquant sur l'icône « + » dans la barre latérale gauche. Ce panneau liste tous les éléments disponibles pour votre page. Faites défiler jusqu'à la section « Components » (en bas de la liste) ou utilisez la barre de recherche en haut du panneau et tapez « Embed » pour trouver directement le composant.

Faites glisser le composant « Embed » depuis le panneau et déposez-le sur votre canvas à l'endroit précis où vous souhaitez afficher le graphique — entre deux sections, dans une colonne, ou dans une grille. Un éditeur HTML s'ouvre automatiquement dès que vous relâchez le composant sur le canvas. Cet éditeur accepte du HTML brut.

Dans l'éditeur HTML, collez le code iFrame Embases. Cliquez sur « Save & Close » en bas de l'éditeur pour confirmer. Le composant affiche désormais un aperçu du graphique sur le canvas. Notez que dans l'éditeur Webflow, l'aperçu peut être simplifié — le rendu complet n'est visible qu'après publication. Cliquez sur « Publish » en haut à droite de l'éditeur Webflow pour déployer les changements sur votre site.

<iframe
  src="https://embases.com/e/VOTRE_TOKEN"
  width="100%"
  height="420"
  frameborder="0"
  loading="lazy"
  title="Graphique Embases"
></iframe>

Astuce : Collez le code dans l'éditeur HTML du composant Embed et cliquez « Save & Close ». Publiez le site pour que les changements soient visibles en production.

Embed responsive

Par défaut, l'iFrame a une hauteur fixe définie par l'attribut height dans le code HTML. Cela peut poser des problèmes sur mobile où la largeur disponible est réduite — le graphique peut déborder ou apparaître trop petit. Pour créer un embed qui s'adapte automatiquement à la largeur de son conteneur tout en conservant un ratio d'aspect cohérent, utilisez la technique du wrapper avec padding-bottom.

Cette technique repose sur le fait que le padding-bottom en pourcentage est calculé par rapport à la largeur de l'élément parent, et non à sa hauteur. En plaçant l'iFrame en position absolue à l'intérieur d'un div avec padding-bottom, vous créez un bloc dont la hauteur est toujours proportionnelle à sa largeur. Adaptez la valeur de padding-bottom selon le ratio souhaité : 56.25% correspond au ratio 16:9, 42% correspond approximativement à une hauteur de 420px pour une largeur de 1000px.

Dans Webflow, après avoir inséré ce code dans le composant Embed, vous pouvez contrôler la largeur du wrapper via le panneau « Style » en sélectionnant le composant : définissez une largeur maximale (max-width) si nécessaire pour limiter la taille sur grand écran. Sur les breakpoints mobiles, le graphique s'adapte automatiquement sans configuration supplémentaire.

<div style="position: relative; padding-bottom: 42%; height: 0; overflow: hidden;">
  <iframe
    src="https://embases.com/e/VOTRE_TOKEN"
    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
    frameborder="0"
    loading="lazy"
    title="Graphique Embases"
  ></iframe>
</div>

CMS Collection (embed dynamique)

Si vous utilisez les Collections CMS de Webflow pour gérer du contenu dynamique (par exemple des pages produits, des études de cas ou des rapports), vous pouvez stocker le token ou l'URL complète de l'embed Embases dans un champ de la collection et le référencer dynamiquement dans le composant Embed.

Commencez par créer un champ « Texte brut » (Plain Text) dans votre Collection Webflow — appelez-le par exemple « embed-token » ou « embed-url ». Pour chaque entrée de la collection, renseignez le token Embases correspondant dans ce champ. Ensuite, dans votre Collection Template Page, insérez un composant Embed. Dans l'éditeur HTML du composant, écrivez le début du code iFrame jusqu'à l'attribut src="https://embases.com/e/", puis cliquez sur le bouton « Add field » (Ajouter un champ) qui apparaît en bas de l'éditeur. Sélectionnez le champ « embed-token » dans la liste des champs de la collection. Webflow insère automatiquement la variable de collection à l'endroit du curseur.

Pour chaque page générée à partir de la collection, Webflow remplace la variable par la valeur réelle du champ. Ainsi, chaque entrée de la collection affiche son propre graphique Embases de manière entièrement automatique.

Astuce : Cette technique est idéale pour des pages produits ou des rapports CMS où chaque page affiche un graphique différent provenant de la même collection Embases.

Domain Whitelisting

Si le Domain Whitelisting est activé sur votre embed dans Embases, vous devez ajouter les domaines Webflow correspondants à votre liste blanche. Le domaine exact dépend de la configuration de votre site Webflow.

Si votre site est hébergé sur le domaine par défaut Webflow (sans domaine personnalisé), le domaine est votre-projet.webflow.io — remplacez « votre-projet » par le slug de votre projet tel qu'il apparaît dans l'URL de l'éditeur Webflow. En prévisualisation dans l'éditeur Webflow (lorsque vous cliquez sur « Preview » sans publier), le domaine utilisé est webflow.io (sans sous-domaine) — ajoutez webflow.io à la liste si vous souhaitez tester en preview.

Si vous avez connecté un domaine personnalisé à votre site Webflow (par exemple www.monsite.com via les paramètres DNS de Webflow), ajoutez ce domaine personnalisé dans Embases. Notez que votre site peut être accessible via les deux domaines simultanément — le domaine .webflow.io et le domaine personnalisé — auquel cas vous devez ajouter les deux dans la liste blanche Embases pour que l'embed fonctionne dans tous les cas.

Étapes suivantes