Remarque : même si nos guides les plus populaires ont été traduits en français, certains guides sont uniquement disponibles en anglais.

Utilisation de la zone d'Injection de code

Vous pouvez ajouter du code et des scripts personnalisés à votre site à l'aide de la zone Injection de code dans Paramètres avancés.

L’injection de code est une fonctionnalité Premium disponible avec les forfaits Business et Commerce.

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 à un champ d’Injection de code. Si vous l'ajoutez à un champ d'Injection de code, entourez le code avec des tags <style></ style>.

Quand utiliser la zone d'Injection de code

Utilisez 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, rendez-vous sur Créer une page. Pour ajouter du code CSS personnalisé aux styles, utilisez l'Éditeur CSS personnalisé.

Étape 1 - Ouvrir la zone d'Injection de code

Dans le Menu principal, cliquez sur Paramètres, puis sur Avancé et enfin sur Injection de code.

Étape 2 - Ajouter du code HTML

Ajoutez un code HTML ou des scripts valides dans les champs Injection de code correspondant aux éléments suivants : en-tête, pied de page, page de verrouillage ou page de confirmation.

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

Screen_Shot_2019-01-16_at_1.01.09_PM.png

Le code ajouté ici est injecté avant le tag de clôture <body> sur chaque page de votre site.

Screen_Shot_2019-01-16_at_1.01.25_PM.png

Remarque : la zone Pied de Page est définie par votre template.

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, ajuster le style des polices ou incorporer votre logo.

Screen_Shot_2019-01-16_at_1.01.32_PM.png

Page de confirmation de commande

Le code ajouté ici est injecté dans la page de confirmation de commande s'affichant après le paiement d'un client, ce qui constitue une solution bien adaptée pour ajouter des programmes tiers de suivi et d'affiliation à votre boutique.

Six balises vous permettent d'insérer des informations client spécifiques :

  • {orderId} – L'identifiant unique 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 ayant été saisie dans le champ « Informations de Facturation »

Screen_Shot_2019-01-16_at_1.01.40_PM.png

Étape 3 - Enregistrer

Après l'ajout de votre code, cliquez sur Sauvegarder.

5.png

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é.

Injection de code dans un en-tête de page ajoute du code au tag <head> de cette page. Il ne s'affichera pas sur les pages d'accueil Index.

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.

  • Cette zone apparaîtra au-dessus ou au dessous du contenu de l'article en fonction de votre template.
  • Dans les templates qui disposent de la page Blog en grille/empilée, le code s’affiche sur la page de destination du blog et non dans chaque billet.
Remarque : un chargement Ajax peut empêcher du code CSS ajouté à un champ d'Injection de code de se charger correctement. Ajoutez plutôt du code CSS à l'l’Éditeur CSS.

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. Vous recevrez le message Les scripts ont été désactivés dans l’aperçu de votre site. Pour afficher votre code personnalisé, ouvrez une nouvelle fenêtre 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 à 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 auxquelles 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 adaptatif 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 :
Cet article vous a-t-il été utile ?
Utilisateurs qui ont trouvé cela utile : 138 sur 363
Utilisation de la zone d'Injection de code