Intégrer dans Carrd

Widget Embed

Le widget Embed de Carrd vous permet d'insérer du HTML personnalisé, y compris des iFrames, directement dans votre site. Avant de commencer, vérifiez que vous disposez d'un plan payant Carrd (Pro Standard ou supérieur) — le widget Embed n'est pas disponible sur le plan gratuit et son absence ne sera pas signalée clairement dans l'interface.

Dans l'éditeur Carrd, commencez par cliquer sur le bouton « + » pour ajouter un élément à votre page. Ce bouton est généralement visible en bas de l'écran ou apparaît quand vous survolez la page. Dans la liste des éléments disponibles, cherchez et cliquez sur « Embed ». Une fenêtre de configuration du widget Embed s'ouvre.

Dans cette fenêtre de configuration, vous devez choisir le type de contenu à intégrer. Sélectionnez l'option « Code » (et non « URL ») — le type URL est conçu pour des embeds oEmbed standards, tandis que le type Code accepte du HTML brut incluant les iFrames. Si l'option « Iframe-friendly » est visible dans la fenêtre de configuration, cochez-la pour indiquer à Carrd que votre code contient un iFrame.

Collez votre code iFrame Embases dans la zone de saisie de code. Cliquez sur « Done » pour fermer la fenêtre et appliquer le widget à la page. Le graphique Embases devrait apparaître à l'emplacement du widget dans l'éditeur. Cliquez sur « Publish » dans la barre supérieure pour rendre les changements visibles en production.

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

Taille et positionnement

Une fois le widget Embed inséré sur votre page Carrd, vous pouvez ajuster sa taille et son positionnement via le panneau de propriétés du widget. Cliquez sur le widget Embed pour le sélectionner — un panneau de propriétés s'ouvre sur le côté droit de l'éditeur (ou en bas selon la configuration de votre interface Carrd).

Dans ce panneau, cherchez les champs de taille. Pour la largeur (Width), réglez-la sur 100% pour que le widget s'étende sur toute la largeur disponible de la page ou de la section. Pour la hauteur (Height), entrez une valeur en pixels correspondant à la hauteur souhaitée pour votre graphique — 420px est une valeur recommandée pour la plupart des graphiques Embases, mais vous pouvez ajuster selon vos besoins.

Carrd organise les sites principalement en colonnes verticales empilées. Le widget Embed se positionne comme n'importe quel autre élément dans cet empilement. Si vous souhaitez que le graphique s'affiche à côté d'un autre contenu (texte, image), utilisez la fonctionnalité de colonnes de Carrd (si disponible sur votre plan) ou ajustez manuellement les marges des éléments adjacents.

Sites one-page

Carrd est spécifiquement conçu pour les sites one-page : toute la navigation se fait en scrollant verticalement sur une seule et même page. Cette architecture est parfaitement adaptée pour créer des micro-sites de présentation de données ou des tableaux de bord publics avec plusieurs graphiques Embases.

Pour créer un tableau de bord avec plusieurs graphiques, ajoutez plusieurs widgets Embed successifs sur votre page. Chaque widget affiche un graphique Embases différent, correspondant à une métrique ou un ensemble de données différent. Utilisez des éléments de séparation (dividers) ou des sections avec des couleurs de fond différentes pour structurer visuellement votre tableau de bord et rendre la navigation par scroll intuitive.

Vous pouvez également ajouter des textes d'introduction ou de légende avant ou après chaque widget Embed en utilisant les éléments de texte de Carrd. La combinaison titre + graphique + texte explicatif est efficace pour des rapports de données destinés à un public non technique qui consulte votre site one-page.

Domain Whitelisting

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

Sur le plan Carrd gratuit et les plans payants sans domaine personnalisé configuré, votre site est accessible à l'adresse votre-site.carrd.co — remplacez « votre-site » par le slug que vous avez choisi lors de la création du site. C'est ce domaine qu'il faut ajouter dans les paramètres de sécurité de l'embed Embases.

Si vous avez souscrit au plan Pro Plus ou Pro Developer de Carrd et avez connecté un domaine personnalisé (par exemple www.monsite.com), ajoutez votre domaine personnalisé dans la liste blanche Embases. Si votre site Carrd est accessible via les deux domaines simultanément (le domaine .carrd.co et votre domaine personnalisé), ajoutez les deux dans Embases pour que l'embed se charge correctement depuis n'importe lequel des deux domaines.