Utiliser l’injection de code

Insérez du code HTML ou des scripts personnalisés dans les pages de votre site.

Dernière mise à jour le 3 février 2025

Vous pouvez utiliser l’injection de code pour ajouter du code HTML et des scripts afin d’améliorer certaines parties de votre site. Il peut s’agir par exemple de services de messagerie instantanée, de la vérification de domaine pour des services personnalisés de messagerie électronique ou d’outils d’analyse et de statistiques pour votre site.

La zone d’Injection de code n’est pas conçue pour ajouter du contenu ou des styles. Pour ajouter du contenu à votre site, consultez l’article Notions de base sur les pages et le contenu. Pour ajouter du code CSS personnalisé afin de modifier le style, utilisez l’Éditeur CSS personnalisé.

Accéder à cette fonctionnalité

L’Injection de code est disponible avec les forfaits Core, Plus, Avancé, Business, Commerce Basique et Commerce Avancé. Pour en savoir plus, consultez l’article Choisir le forfait Squarespace qu’il vous faut.

Regarder une vidéo

Avant de commencer

Ajouter du code à l’injection de code

Pour ajouter du code personnalisé à l’injection de code :

  1. Ouvrez le panneau Injection de code.
  2. Ajoutez du code HTML ou des scripts valides dans les champs Injection de code appropriés pour l’en-tête, le pied de page, la page de verrouillage, la page de confirmation de commande ou la page Statut de la commande.
  3. Après avoir ajouté votre code, cliquez sur Enregistrer.

En-tête

Le code ajouté ici est injecté dans le tag sur chaque page de votre site.

Pied de Page

Le code ajouté ici est injecté avant le tag de fermeture  sur chaque page de votre site.

Intégrer votre code injecté à la bannière de cookies

Si vous ajoutez des intégrations tierces à votre site par injection de code (par exemple, Google Ads), ce code peut déposer des cookies sur les navigateurs des visiteurs. En activant la bannière de cookies sur votre site, vous pouvez ensuite utiliser l’injection de code pour modifier le comportement de ces intégrations tierces, en fonction du consentement du visiteur.

Vos visiteurs peuvent indiquer leurs choix de consentement si vous suivez les étapes suivantes :

  1. Activez votre bannière de cookies en ouvrant le panneau Cookies et données visiteur et en activant l’option Bannière de cookies.
  2. Sélectionnez le type de bannière de cookies Acceptation et refus, qui affiche deux boutons personnalisables permettant aux clients d’accepter ou de refuser les cookies de votre site.
  3. Cliquez sur Enregistrer.
  4. Ajoutez le code nécessaire. Consultez l’exemple ci-dessous pour en savoir plus.

En prenant Google Ads comme exemple, si vous avez ajouté Google Ads à votre site par injection de code, consultez cette publication sur le forum pour obtenir un exemple du code que vous pouvez ajouter pour intégrer votre code Google Ads à la bannière de cookies.

Si vous utilisez Google Analytics via notre intégration officielle, il n’est pas nécessaire d’ajouter du code dans ce champ. Après avoir enregistré votre ID de mesure, activez votre bannière de cookies.

Remarque

Le mode Consentement est une fonctionnalité fournie par Google. Pour en savoir plus, consultez la documentation de Google. De plus, les modifications de code personnalisé ne sont pas prises en charge par notre assistance. Contactez Google Ads si vous avez besoin d’aide en matière de configuration ou pour résoudre un problème.

Page de verrouillage

L’écran de verrouillage s’affiche lorsqu’une page ou un site est protégé(e) par un mot de passe de site ou de page. Le code injecté ici s’affiche au-dessus du champ Mot de passe de l’écran de verrouillage.

Bien qu’il soit possible d’ajouter du code dans ce champ, nous vous recommandons d’utiliser plutôt le panneau Écran de verrouillage pour créer votre page de verrouillage. Vous pourrez ainsi notamment ajouter une image d’arrière-plan ou un diaporama, changer le style des polices et incorporer votre logo.

Page de confirmation de commande

Le code ajouté ici est injecté dans la page Confirmation de commande qui s’affiche après qu’un client a procédé au paiement avec une carte-cadeau, une adhésion et un abonnement.

Il existe six tags que vous pouvez utiliser pour insérer des informations spécifiques au client. Si un achat est divisé parce qu’il contient plusieurs profils de traitement, les détails s’afficheront pour chaque commande lors de l’achat.

  • {orderId} – Le numéro de la commande confirmée
  • {orderSubtotal} – Le sous-total de la commande confirmée
  • {orderSubtotalCents} – Le sous-total de la commande confirmée, en cents
  • {orderGrandTotal} – Le montant global de la commande confirmée
  • {orderGrandTotalCents} – Le montant global de la commande confirmée, en cents
  • {customerEmailAddress} – L'adresse e-mail du client, telle que celui-ci l'a renseignée dans le champ « Votre e-mail » lors de la validation de commande

Page Statut de la commande

Le code ajouté ici est injecté dans la page Statut de la commande, qui s’affiche pour confirmer aux clients le paiement des produits physiques ou à télécharger ou des services qu’ils viennent de commander. Les clients peuvent également revenir sur cette page ultérieurement pour vérifier le statut de leur commande. 

Il existe six tags que vous pouvez utiliser pour insérer des informations spécifiques au client. Si un achat est divisé parce qu’il contient plusieurs profils de traitement, les détails s’afficheront pour chaque commande lors de l’achat.

  • {orderId} – Le numéro de la commande confirmée
  • {orderSubtotal} – Le sous-total de la commande confirmée
  • {orderSubtotalCents} – Le sous-total de la commande confirmée, en cents
  • {orderGrandTotal} – Le montant global de la commande confirmée
  • {orderGrandTotalCents} – Le montant global de la commande confirmée, en cents
  • {customerEmailAddress} – L'adresse e-mail du client, telle que celui-ci l'a renseignée dans le champ « Votre e-mail » lors de la validation de commande

Les clients peuvent consulter la page Statut de la commande plusieurs fois, ce qui peut déclencher plusieurs fois des scripts de suivi. Pour éviter de compter deux fois le même client avec les scripts de suivi, placez ceux que vous souhaitez exécuter uniquement lors de la première visite sur la page Statut de la commande après le paiement entre les tags {.if firstPageView} et {.end}.Par exemple :

{.if firstPageView}

Ajoutez les scripts de suivi que vous souhaitez exécuter uniquement après le paiement ici

{.end}

Ajoutez les scripts que vous souhaitez exécuter à chaque visite ici

Déplacer le code personnalisé de la page de confirmation de commande

Nous avons mis à jour la page Confirmation de commande pour les produits physiques et numériques et les services. Les clients qui achètent ces types de produits accèdent à une page qui affiche le statut de la commande et ses détails, et qui permet de créer un compte client.

Si cette bannière s’affiche dans le panneau Injection de code, cela signifie que vous avez injecté du code à la page « Confirmation de commande » initiale et que cette mise à jour n’a pas été appliquée à votre site. 

MigrateOrderConfirmationCode.png

Pour appliquer cette mise à jour à votre site et rediriger les acheteurs vers la nouvelle page Confirmation de commande après leur commande de produits numériques, physiques et de services : 

  1. Copiez le code dans le champ de la page Confirmation de commande. 
  2. Collez-le dans le champ de la page Statut de la commande. 
  3. Cliquez sur Enregistrer
  4. Cliquez sur J’ai migré mon code personnalisé.

Tant que vous n’aurez pas suivi ces étapes, tous les acheteurs accèderont à la page Confirmation de commande initiale une fois tous leurs achats payés.

Injection de code sur une page spécifique

Vous pouvez également injecter du code dans une page spécifique :

  1. Survolez la page dans le panneau Pages.
  2. Cliquez sur l’icône .
  3. Cliquez ensuite sur Avancé.

Page Header Code Injection (Injection de Code dans un En-tête de Page) ajoute du code au tag de cette page.

Dans les paramètres de la page Blog, l’Injection de code pour chaque élément des billets de blog permet d’ajouter du code à chaque billet de blog.

L’affichage de l’injection de code dépend de la version de votre site.

Important :

  • Nous vous déconseillons d’utiliser du code HTML dans l’injection de code dans un en-tête de page. Si vous le faites, le code n’apparaîtra pas si vous désactivez la transparence de l’en-tête de votre site.
  • L’injection de code pour chaque élément des billets de blog apparaît en dessous du contenu des publications.

Important :

  • L’injection de code n’apparaîtra pas sur les pages de destination Index.
  • L’injection de code pour chaque élément des billets de blog apparaît au-dessus ou en dessous du contenu des billets en fonction de votre template.
  • Dans les templates qui disposent de la page Blog grille/liste, le code s’affiche sur la page de destination du blog et non dans chaque publication.

Désactiver les scripts dans l’aperçu

Le code personnalisé peut vous empêcher de modifier votre site de façon sécurisée. Lorsque nous vous aidons à résoudre les problèmes, nous pouvons vous demander de désactiver les scripts dans l’aperçu. Dans ce cas, vous ne verrez pas votre code personnalisé quand vous serez connecté(e), mais cela n’affectera pas l’affichage de votre site pour les visiteurs.

En cas d’interférence du code, vous verrez s’afficher ce message en bas de votre site :

Erreur lors du chargement de l'aperçu de votre site. Cette erreur est souvent causée par l'injection de code.

Pour apporter vos modifications en toute sécurité, cliquez sur l’option Désactiver les scripts dans l’aperçu en bas de votre site. Le message Les scripts ont été désactivés dans l’aperçu de votre site s’affiche alors. Pour afficher votre code personnalisé, ouvrez une nouvelle fenêtre de navigation privée dans votre navigateur et entrez l’URL de votre page.

Si le message de désactivation des scripts n’apparaît pas automatiquement :

  1. Déclenchez son affichage en saisissant /safe après /config à la fin de votre URL de modification sécurisée, puis appuyez sur Entrée.
  2. Si cette solution ne fonctionne pas, vérifiez les zones dans lesquelles vous avez ajouté du code personnalisé pour le supprimer temporairement pendant le dépannage.

Une fois votre code désactivé, le message Activer les scripts dans l’aperçu ? peut s’afficher. Nous vous déconseillons de cliquer dessus, car il peut vous empêcher de prévisualiser, de modifier ou de lancer votre site lorsque vous êtes connecté(e). Il est impossible de masquer ce message, mais vous le verrez uniquement lorsque vous serez connecté(e). Vos visiteurs ne le voient pas.

Remarque

Les modifications de code personnalisé ne sont pas prises en charge par notre service d’assistance. Nous ne sommes pas en mesure de vous aider ni pour leur configuration ni pour leur dépannage. En outre, si vous utilisez une solution basée sur du code, nous ne pouvons garantir sa fonctionnalité ni son entière compatibilité avec Squarespace, c’est-à-dire son fonctionnement avec notre design réactif et plus particulièrement son affichage sur les appareils mobiles, ainsi que son fonctionnement sur l’ensemble des templates. Le code personnalisé peut également causer des problèmes d’affichage lors des futures mises à jour de notre plateforme. À défaut de pouvoir vous assister pour ces éventuels problèmes, nous vous recommandons les ressources suivantes :

Footer Image
  • Obtenir de l’aide de notre communauté

  • Obtenez de l’aide sur les personnalisations avancées auprès de notre communauté.

  • Trouver un Squarespace Expert

  • Démarquez-vous en ligne avec l’aide d’un designer ou d’un développeur expérimenté.