Framer

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

Insérer un élément Embed

Dans le canvas Framer, il existe deux façons d'insérer un bloc Embed. La première : appuyez sur la touche I de votre clavier pour ouvrir le panneau d'insertion (Insert panel) sur le côté gauche de l'interface. Dans ce panneau, tapez « Embed » dans la barre de recherche en haut — l'élément Embed apparaît dans les résultats sous la section « Components » ou « Basic ». Cliquez-glissez-le depuis le panneau jusqu'à l'emplacement souhaité sur le canvas.

La seconde façon : utilisez le menu « Insert » dans la barre de navigation supérieure de Framer, puis naviguez jusqu'à l'élément Embed. Une fois l'élément Embed déposé sur le canvas, il apparaît comme un bloc vide avec un message indiquant qu'il faut ajouter du HTML. Sélectionnez l'élément Embed en cliquant dessus — le panneau de propriétés s'ouvre à droite de l'interface.

Dans le panneau de droite, cherchez l'onglet ou le champ « HTML » (ou « Code »). Collez le code iFrame Embases dans ce champ. L'aperçu sur le canvas se met à jour automatiquement et affiche le graphique. Si l'aperçu reste vide, assurez-vous que l'URL de l'embed est correcte et que l'embed Embases est en mode Public.

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

Astuce : Dans Framer, définissez la hauteur de l'élément Embed en pixels dans le panneau Properties (droite) pour garantir une taille cohérente sur tous les écrans.

Dimensionnement et responsive

Framer gère le responsive via un système de breakpoints et de contraintes de layout, différent des builders no-code traditionnels. Pour configurer correctement la taille de votre bloc Embed, sélectionnez-le sur le canvas puis ouvrez le panneau « Properties » à droite.

Dans la section « Layout » de ce panneau, définissez le champ « Width » sur « Fill » (remplir) pour que le bloc occupe automatiquement toute la largeur de son conteneur parent. Pour la hauteur (« Height »), entrez une valeur fixe en pixels — 420px est recommandé pour la plupart des graphiques Embases. Ne mettez pas « Fill » pour la hauteur, car un iFrame avec height=100% sans contrainte de hauteur parent ne s'affichera pas correctement.

Pour adapter l'affichage sur mobile, utilisez les contrôles de breakpoints en haut du canvas Framer (les icônes d'écrans pour Desktop, Tablet, Mobile). Sélectionnez le breakpoint Mobile, puis modifiez la hauteur de votre bloc Embed dans ce contexte. Framer sauvegarde ces valeurs séparément pour chaque breakpoint. Une hauteur de 280-320px est souvent plus adaptée sur mobile pour un graphique Embases.

Interactions et animations

L'une des forces de Framer est son moteur d'animations et d'interactions avancé. Vous pouvez appliquer des effets d'apparition à votre bloc Embed pour le rendre plus dynamique à l'écran. Sélectionnez le bloc Embed sur le canvas, puis ouvrez le panneau « Interactions » dans la barre de droite (icône éclair ou onglet Animate selon la version de Framer).

Dans ce panneau, cliquez sur « + Add » pour ajouter une interaction. Choisissez le déclencheur « While In View » (lors que l'élément est visible dans le viewport) ou « Appear On Scroll » pour déclencher l'animation quand l'utilisateur scrolle jusqu'au graphique. Sélectionnez un effet parmi les préréglages disponibles : « Fade », « Slide Up », « Scale » etc. Configurez la durée et le délai selon vos préférences.

Important : ces animations s'appliquent au conteneur du bloc Embed, pas au contenu de l'iFrame lui-même. Le graphique Embases continue de se charger normalement pendant que l'animation du conteneur s'exécute. Pour améliorer les performances, activez l'attribut loading="lazy" dans votre code iFrame — le graphique Embases ne commencera à se charger que lorsque l'utilisateur scrollera jusqu'à lui, évitant de ralentir le chargement initial de la page.

Astuce : Si l'embed met du temps à charger, c'est normal : le graphique est rendu côté serveur Embases au premier chargement. Les chargements suivants sont plus rapides grâce au cache du navigateur.

Domain Whitelisting

Si le Domain Whitelisting est activé sur votre embed Embases, vous devez ajouter le domaine depuis lequel votre site Framer est accessible dans la liste blanche de l'embed.

En production sur le domaine par défaut Framer (sans domaine personnalisé), votre site est accessible à l'adresse votre-projet.framer.website — c'est ce domaine qu'il faut ajouter dans Embases. Si vous avez connecté un domaine personnalisé à votre site Framer (par exemple www.monsite.com via les DNS Settings de Framer), ajoutez votre domaine personnalisé dans la liste blanche.

Lors des tests en mode Preview dans Framer (le bouton Preview en haut à droite de l'éditeur), le domaine utilisé pour charger la page peut être différent de celui de la production. Si l'embed ne s'affiche pas en preview mais fonctionne en production, vérifiez depuis quel domaine Framer charge la preview (consultez l'onglet Network des outils de développement du navigateur avec F12). Ajoutez temporairement ce domaine à votre liste blanche Embases pour vos tests.

Étapes suivantes