Intégrer dans Bubble

Intégrez vos graphiques Embases dans vos apps Bubble via l'élément HTML natif.

Élément HTML

Dans l'éditeur Bubble, commencez par vous assurer d'être dans l'onglet « Design » (l'onglet principal de conception de l'interface). Dans la barre latérale gauche, cherchez la liste des éléments disponibles. Vous pouvez utiliser la barre de recherche en haut de cette liste et taper « HTML » pour trouver directement l'élément.

Faites glisser l'élément « HTML » depuis la liste et déposez-le sur votre page à l'endroit où vous souhaitez afficher le graphique. Bubble place l'élément sur la page avec une taille par défaut. L'élément HTML apparaît comme un bloc rectangulaire vide sur la page.

Double-cliquez sur l'élément pour ouvrir son panneau de propriétés. Dans ce panneau, vous verrez plusieurs onglets : « Appearance », « Layout », « Conditional » et « Workflows ». Assurez-vous d'être sur l'onglet « Appearance ». Cherchez le champ « HTML » dans ce panneau — c'est là que vous devez coller votre code. Collez le code iFrame Embases dans ce champ de texte. L'aperçu de l'élément sur la page peut prendre quelques secondes à se mettre à jour. Si vous ne voyez pas le graphique en mode édition, c'est normal — certains iFrames ne s'affichent qu'en mode preview ou en production.

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

Astuce : Dans Bubble, définissez la hauteur de l'élément HTML via les propriétés Layout (Height en pixels). La hauteur de l'iFrame dans le code HTML et la hauteur de l'élément Bubble doivent correspondre pour éviter les barres de défilement.

Affichage conditionnel

L'une des forces de Bubble est la possibilité de contrôler la visibilité et le comportement des éléments via des conditions logiques, sans code. Vous pouvez configurer votre élément HTML contenant l'embed Embases pour qu'il s'affiche uniquement dans certaines situations : uniquement pour les utilisateurs connectés, uniquement pour certains rôles d'utilisateurs, ou lorsque certaines données sont présentes.

Pour ajouter une condition à votre élément HTML, double-cliquez dessus pour ouvrir ses propriétés, puis cliquez sur l'onglet « Conditional ». Cliquez sur « Define another condition » pour créer une nouvelle règle. Dans le premier champ, définissez la condition en utilisant le constructeur de logique Bubble (par exemple : « When Current User is logged in »). Dans la section « Do » en dessous, choisissez l'action : sélectionnez « This element » puis configurez l'état souhaité (« is visible » → « yes » pour afficher, « no » pour masquer).

Vous pouvez combiner plusieurs conditions. Par exemple, affichez l'embed Embases uniquement quand l'utilisateur est connecté ET que son rôle est « admin ». Cette logique vous permet de créer des tableaux de bord Bubble sécurisés où les graphiques Embases ne sont visibles que pour les utilisateurs autorisés.

Astuce : Combinez les conditions Bubble avec les embeds privés Embases (URL tokenisée) pour un double niveau de sécurité : l'embed n'est pas affiché si l'utilisateur n'est pas connecté, et même s'il l'était, l'URL privée protège le chargement depuis d'autres domaines.

Responsive dans Bubble

Bubble gère le responsive via son moteur de layout intégré. Pour configurer correctement l'affichage de l'embed sur différentes tailles d'écran, sélectionnez l'élément HTML et ouvrez l'onglet « Layout » dans ses propriétés.

Dans la section de layout, cherchez le paramètre de largeur (Width). Pour que l'embed s'adapte automatiquement à la largeur de son conteneur, sélectionnez « Fill width » ou réglez la largeur en pourcentage plutôt qu'en pixels fixes. Pour la hauteur, définissez une valeur fixe en pixels (420px recommandé) — la hauteur en pourcentage ne fonctionne pas bien avec les iFrames sans conteneur parent de hauteur définie.

Dans votre code iFrame, conservez toujours width="100%" (largeur 100%) pour que l'iFrame suive la taille de l'élément HTML Bubble qui le contient. Quand Bubble redimensionne l'élément HTML selon le layout, l'iFrame s'adapte automatiquement à cette nouvelle largeur grâce à l'attribut 100%.

Pour tester le responsive dans Bubble, utilisez le mode « Responsive Preview » accessible depuis le bouton Preview de l'éditeur, puis redimensionnez la fenêtre du navigateur ou utilisez les outils développeur (F12 → Toggle device toolbar) pour simuler différentes tailles d'écran.

Domain Whitelisting

Si le Domain Whitelisting est activé sur votre embed Embases, vous devez ajouter le domaine de votre app Bubble dans la liste blanche. Le domaine à ajouter dépend de la configuration de votre application Bubble.

Pour les applications Bubble hébergées sur le domaine par défaut Bubble, votre app est accessible à l'adresse votre-app.bubbleapps.io — remplacez « votre-app » par le nom de votre application Bubble tel qu'il apparaît dans l'URL de l'éditeur. C'est ce domaine qu'il faut ajouter dans les paramètres de sécurité de votre embed Embases.

Si vous avez connecté un domaine personnalisé à votre application Bubble (par exemple www.votre-app.com), ajoutez ce domaine personnalisé dans Embases. Notez que pendant le développement dans l'éditeur Bubble, les pages sont chargées depuis un domaine de prévisualisation différent. Si vous testez l'embed depuis l'éditeur Bubble et qu'il ne s'affiche pas alors qu'il fonctionne en production, c'est probablement parce que le domaine de prévisualisation n'est pas dans votre liste blanche — ajoutez temporairement votre-app.bubbleapps.io pour couvrir les deux cas.

Étapes suivantes