Intégration Wix

Apprenez à insérer vos graphiques Embases dans un site Wix via le bloc HTML iFrame, à le redimensionner, et à configurer le Domain Whitelisting.

Outil HTML iFrame

Dans l'éditeur Wix, commencez par cliquer sur le bouton « + Ajouter des éléments » dans la barre latérale gauche de l'éditeur. Un panneau s'ouvre avec toutes les catégories d'éléments disponibles. Faites défiler jusqu'à la section « Intégrer » (ou « Embed » selon la langue de votre interface) et cliquez dessus pour l'ouvrir. Parmi les options proposées, cliquez sur « HTML iFrame ».

Un bloc HTML vide apparaît alors sur votre page à un emplacement par défaut. Cliquez sur ce bloc pour le sélectionner, puis cliquez sur le bouton « Entrer le code » (ou « Enter Code ») qui apparaît au centre du bloc ou dans la barre d'outils contextuelle en haut. Une fenêtre modale s'ouvre avec un éditeur de code.

Dans cet éditeur de code, collez le code iFrame Embases complet. Cliquez sur « Mettre à jour » (Update) pour valider et voir le graphique apparaître dans le bloc sur votre page. Si le graphique ne s'affiche pas immédiatement, vérifiez que l'URL est correcte et que votre embed est en mode Public dans le dashboard Embases. Une fois satisfait du résultat en prévisualisation, ne publiez pas encore — testez d'abord en cliquant sur « Aperçu » (Preview) en haut de l'éditeur Wix pour voir l'aspect final de votre page.

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

Astuce : Cliquez sur « Mettre à jour » après avoir collé votre code pour voir le graphique apparaître dans l'éditeur. Ne cliquez pas sur Publier à ce stade — prévisualisez d'abord.

Taille et position

Une fois le bloc HTML iFrame inséré sur votre page Wix, vous pouvez ajuster sa taille et sa position exactement comme n'importe quel autre élément Wix. Cliquez sur le bloc pour le sélectionner — des poignées de redimensionnement apparaissent sur les côtés, les coins et en bas du bloc.

Pour modifier la largeur, faites glisser les poignées latérales (gauche ou droite) horizontalement. Pour modifier la hauteur, faites glisser la poignée inférieure vers le haut ou le bas. Pour définir des valeurs précises, double-cliquez sur les indicateurs de taille qui apparaissent à côté du bloc, ou accédez au panneau « Paramètres de mise en page » dans la barre d'outils de droite. La hauteur recommandée pour un graphique Embases est de 420px, mais vous pouvez l'ajuster selon le type de graphique et votre mise en page.

Pour repositionner le bloc sur la page, cliquez-glissez-le vers l'emplacement souhaité. Le bloc HTML Wix se comporte comme n'importe quel élément Wix : vous pouvez l'ancrer à une section, l'aligner sur une grille, le placer dans une colonne via le panneau « Colonnes », ou l'épingler à l'écran pour un effet sticky. Sur mobile, accédez à la vue mobile dans l'éditeur (icône téléphone en haut) et redimensionnez le bloc indépendamment pour optimiser l'affichage responsive.

Astuce : Sur mobile, les blocs HTML Wix peuvent nécessiter une hauteur différente. Passez en vue mobile dans l'éditeur et redimensionnez le bloc séparément pour le responsive.

Wix Studio

Wix Studio est l'éditeur avancé de Wix, destiné aux professionnels et aux agences qui souhaitent un contrôle plus fin sur le design et le code. Si vous utilisez Wix Studio plutôt que l'éditeur Wix classique, le processus d'insertion d'un embed HTML est légèrement différent mais tout aussi simple.

Dans Wix Studio, ouvrez le panneau « Add elements » (icône + dans la barre latérale gauche). Naviguez jusqu'à la section « Embed » dans la liste des catégories. Vous y trouverez l'option « Custom embed » — cliquez dessus pour l'insérer sur votre page. L'éditeur de code HTML s'ouvre automatiquement. Collez le code iFrame Embases et cliquez sur « Apply » pour confirmer.

Un avantage de Wix Studio par rapport à l'éditeur classique est la possibilité d'ajouter du CSS personnalisé directement sur le conteneur de l'embed. Accédez au panneau « Inspector » à droite, puis à l'onglet « CSS » pour ajouter des règles de style. Vous pouvez par exemple définir un border-radius pour arrondir les coins du bloc, ou utiliser des media queries pour ajuster la hauteur de l'iFrame selon la taille d'écran — ce qui donne un contrôle responsive plus précis que dans l'éditeur classique.

Domain Whitelisting

Si le Domain Whitelisting est activé sur votre embed Embases, vous devez ajouter le domaine de votre site Wix à la liste blanche de l'embed. Le domaine à utiliser dépend de votre plan Wix et de la configuration de votre site.

Sur le plan gratuit Wix, votre site est accessible via une URL au format votre-nom.wixsite.com/nom-de-votre-site. C'est ce domaine complet (incluant le chemin /nom-de-votre-site) ou uniquement la partie votre-nom.wixsite.com que vous devez ajouter. Si vous avez souscrit à un plan payant Wix et connecté un domaine personnalisé (par exemple www.votre-domaine.com), ajoutez ce domaine personnalisé dans Embases.

Pendant la phase de développement et de prévisualisation dans l'éditeur Wix, le domaine utilisé est différent de celui de la production. Pour tester le fonctionnement de l'embed en mode prévisualisation, ajoutez également editor.wix.com ou le domaine de prévisualisation Wix dans votre liste blanche Embases. Si vous n'êtes pas sûr du domaine exact utilisé lors d'une prévisualisation qui échoue, ouvrez les outils de développement de votre navigateur (F12) et consultez l'onglet « Réseau » (Network) pour identifier les requêtes bloquées et voir depuis quel domaine elles proviennent.

Étapes suivantes