Intégrer dans Squarespace

Intégrez vos graphiques Embases dans votre site Squarespace via un bloc de code HTML. Compatible avec tous les gabarits.

Bloc de code HTML

Squarespace propose un bloc de code natif qui accepte du HTML brut, vous permettant d'insérer un iFrame Embases directement dans vos pages. Ce bloc de code est disponible sur tous les gabarits Squarespace et ne nécessite aucun plugin ni extension.

Pour insérer ce bloc, ouvrez votre page Squarespace en mode édition en cliquant sur « Modifier la page » dans le menu de navigation du site. Une fois en mode édition, positionnez-vous à l'endroit où vous souhaitez insérer le graphique. Cliquez sur le bouton « + » qui apparaît quand vous survolez un espace vide entre les blocs existants — une liste de types de blocs s'ouvre. Cherchez et cliquez sur « Code » dans cette liste.

Un éditeur de code s'ouvre dans une fenêtre modale. Cet éditeur attend du HTML brut. Collez le code iFrame Embases dans cet éditeur. Vérifiez que l'option « Display Source » n'est pas cochée (sinon le code sera affiché en texte brut plutôt que rendu comme HTML). Cliquez sur « Appliquer » pour fermer l'éditeur et insérer le bloc sur la page. Le graphique Embases s'affiche immédiatement dans la page en mode édition. Cliquez sur « Enregistrer » puis sur « Publier » pour rendre les modifications visibles pour vos visiteurs.

<iframe
  src="https://embases.com/e/VOTRE_TOKEN"
  width="100%"
  height="400"
  frameborder="0"
  allowtransparency="true"
></iframe>

Astuce : Réglez la hauteur de l'iFrame selon votre graphique : 320px pour un graphique compact, 480px pour un graphique étendu. Squarespace adapte automatiquement la largeur à la colonne.

Placement dans une section

Squarespace organise le contenu en sections et en colonnes à l'intérieur de ces sections. Le positionnement précis de votre embed Embases dépend de la structure de mise en page que vous avez choisie pour votre page.

Pour une mise en page en une seule colonne (la plus courante pour les pages de contenu), ajoutez simplement le bloc Code à l'endroit souhaité dans la page — il prendra naturellement toute la largeur disponible de la section. Pour une mise en page multi-colonnes (par exemple un texte à gauche et un graphique à droite), accédez aux options de section en cliquant sur l'icône d'édition de la section. Ajoutez une colonne si nécessaire, puis insérez le bloc Code dans la colonne souhaitée.

Pour ajuster la largeur relative des colonnes dans une section, utilisez les options de layout de la section (cliquez sur la section → icône engrenage → onglet Layout). Vous pouvez définir des proportions 50/50, 60/40, 70/30, etc. Augmentez la proportion de la colonne contenant le graphique pour lui donner plus d'espace à l'écran.

Fluid Engine (éditeur nouvelle génération)

Le Fluid Engine est l'éditeur de nouvelle génération de Squarespace, disponible pour les gabarits compatibles (généralement les gabarits plus récents comme Brine, Bedford, York, etc.). Il offre une liberté de positionnement beaucoup plus grande que l'éditeur classique, avec la possibilité de placer et redimensionner librement les éléments sur une grille.

Dans le Fluid Engine, l'insertion du bloc Code se fait de la même façon : cliquez sur « + » puis sélectionnez « Code ». Collez votre iFrame Embases dans l'éditeur de code et cliquez sur « Appliquer ». La différence notable avec l'éditeur classique est que vous pouvez ensuite faire glisser les bords ou les coins du bloc Code pour le redimensionner librement — ajustez la largeur et la hauteur selon vos besoins en faisant glisser les poignées de redimensionnement visibles sur les bords du bloc sélectionné.

Le Fluid Engine vous permet également de positionner des éléments côte à côte sur la même ligne de grille, ce qui facilite la création de mises en page complexes avec plusieurs graphiques disposés horizontalement. Cependant, notez que les éléments peuvent se superposer dans le Fluid Engine — assurez-vous qu'aucun autre bloc ne recouvre votre iFrame, ce qui bloquerait les interactions (hover, clic) avec le graphique Embases.

Astuce : Dans le Fluid Engine, vous pouvez superposer des éléments. Veillez à ne pas placer d'autres blocs par-dessus votre iFrame, ce qui empêcherait les interactions (hover, clic).

Domain Whitelisting

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

Par défaut, tous les sites Squarespace sont accessibles via un sous-domaine squarespace.com au format votre-site.squarespace.com — remplacez « votre-site » par le nom de votre site tel qu'il apparaît dans l'URL quand vous l'ouvrez sans domaine personnalisé. 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 site Squarespace (par exemple www.votre-domaine.com ou votre-domaine.com), Squarespace redirige généralement les visiteurs vers ce domaine personnalisé. Ajoutez ce domaine personnalisé dans la liste blanche Embases. Si vous n'êtes pas certain du domaine exact utilisé, regardez l'URL dans votre navigateur quand vous visitez votre site depuis un onglet normal (non depuis l'éditeur Squarespace) — c'est l'URL que vos visiteurs voient et qui doit être dans votre liste blanche.

# Domaine Squarespace par défaut
votre-site.squarespace.com

# Domaine personnalisé
votre-domaine.com

Étapes suivantes