Insérez du code HTML ou des scripts personnalisés dans les pages de votre site.
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é.
L’injection de code est une fonctionnalité premium disponible avec les forfaits Business, Commerce, Professionnel et Premium.
Regarder une vidéo
Avant de commencer
- Si vous ajoutez du code à l’injection de code, nous pourrons éventuellement vous demander de le désactiver lorsque vous apporterez des modifications à votre site.
- Pour ajouter du code JavaScript à un champ d’injection de code, entourez le code avec des tags <script></script>.
- Nous vous recommandons d’ajouter du code CSS à l’Éditeur CSS personnalisé et non à l’injection de code. Si vous l’ajoutez à une injection de code, entourez le code avec des tags <style></style>.
- La zone de pied de page est définie par le template et la version de votre site.
- Un chargement Ajax peut empêcher du code CSS ajouté à l’injection de code de se charger correctement. Ajoutez plutôt du code CSS à l’Éditeur CSS.
- Les pages de paiement ne prennent pas en charge le code.
Ajouter du code à l’injection de code
Pour ajouter du code personnalisé à l’injection de code :
- Ouvrez le panneau Outils de développement.
- Cliquez sur Injection de code.
- 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.
- Après avoir ajouté votre code, cliquez sur Enregistrer.
En-tête
Le code ajouté ici est injecté dans le tag <head> sur chaque page de votre site.
Pied de Page
Le code ajouté ici est injecté avant le tag de fermeture </body> sur chaque page de votre site.
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.
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 :
- Copiez le code dans le champ de la page Confirmation de commande.
- Collez-le dans le champ de la page Statut de la commande.
- Cliquez sur Enregistrer.
- 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 :
- Survolez la page dans le panneau Pages.
- Cliquez sur l’icône
. - Cliquez ensuite sur Avancé.
Page Header Code Injection (Injection de Code dans un En-tête de Page) ajoute du code au tag <head> 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 :
- Déclenchez son affichage en saisissant /safe à la fin de votre URL de modification sécurisée, puis appuyez sur Entrée.
- 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.
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 :
- Découvrez les bonnes pratiques pour ajouter un code personnalisé.
- Consultez notre guide général sur les personnalisations tierces.
- Rendez-vous sur le forum Squarespace, notre communauté qui regroupe clients et développeurs.
- Trouvez un expert Squarespace qui vous aidera à créer du code personnalisé pour votre site.
- Découvrez nos forfaits Premium et Enterprise et développez une solution davantage personnalisée pour votre activité.