Aller au contenu principal

Guide d’installation

BO

2 min · Facile

Installer BackToMe sur Boutique sur mesure.

Suivez le chemin propre à Boutique sur mesure, collez votre tag puis contrôlez sa détection. Collez simplement une ligne dans la balise <head> de votre boutique.

Installation

Avant de copier le tag.

Vérifiez les accès nécessaires, puis utilisez l’emplacement indiqué pour votre plateforme.

Prérequis

  • Un accès en édition au code source de votre boutique (FTP, Git, ou éditeur intégré)
  • Un fichier de layout commun (header.html, base.html, _document.tsx, etc.) ou un templating qui injecte automatiquement la balise <head> sur toutes les pages
  • Si vous avez une CSP (Content Security Policy), les autorisations pour exécuter des scripts depuis https://backtome.fr

Emplacement dans Boutique sur mesure

Avant la fermeture </head> du HTML servi sur toutes les pages où des achats peuvent se faire

  1. 01Identifiez le fichier de layout commun à toutes les pages (HTML statique : footer.html n’est pas le bon, c’est un layout principal type base.html)
  2. 02Localisez la balise </head>
  3. 03Collez le tag juste avant cette balise
  4. 04Pour un site SPA (React, Vue, Svelte, Angular), utilisez le mécanisme natif d’injection dans <head> du framework, voir pièges ci-dessous
  5. 05Déployez et vérifiez sur un onglet privé que le tag apparaît dans le source HTML

Copiez votre tag BackToMe

Remplacez VOTRE_ID par l’identifiant de la boutique affiché dans votre compte.

Enregistrez et publiez

La modification doit être publiée sur la version réellement visible par vos clients.

Tag à copier dans la balise <head>

<script async src="https://backtome.fr/widget.js" data-site="VOTRE_ID"></script>

Dans la durée

Ce qui retire le bouton d’une boutique sur mesure

Une mise à jour ou un changement de thème peut retirer un script qui fonctionnait jusque-là.

  • Un déploiement qui reconstruit le gabarit sans la balise.
  • Une politique de sécurité du contenu durcie lors d’une passe de sécurité.
  • Une refonte du front, ou un passage à un rendu côté serveur qui ne réinjecte pas le tag.

BackToMe surveille le dernier signal reçu

Le tableau de bord indique la dernière détection du tag. Si le bouton disparaît, vous disposez d’un point de départ précis pour contrôler la boutique.

Vérification

Contrôlez la boutique publiée.

Ne vous arrêtez pas au message de l’éditeur. Ouvrez le site public et vérifiez ce qui est réellement chargé.

Résultat attendu

Le statut passe à Détecté dans BackToMe et le bouton apparaît sur la boutique publique.

  1. 01Ouvrez une fenêtre privée.
  2. 02Chargez une page publique de la boutique.
  3. 03Vérifiez la position et le libellé du bouton.
  4. 04Ouvrez le formulaire sans envoyer de demande réelle.

Après le clic

Chaque demande rejoint un dossier vérifiable.

BackToMe enregistre la demande, envoie l’accusé de réception et conserve les éléments nécessaires au suivi. Le certificat indique précisément ce qui peut être contrôlé.

Comprendre le certificat

Dépannage

Les blocages les plus courants.

Les réponses restent fermables et utilisables au clavier.
Sites SPA : injection via le framework, pas dans index.html
Sur un projet React (Next.js, CRA), Vue (Nuxt), Svelte (SvelteKit) : ne pas modifier le index.html final servi, mais utiliser le mécanisme du framework. Next.js : layout.tsx ou _document.tsx. Nuxt : nuxt.config.ts (head.script). SvelteKit : app.html. Sinon le script est correctement présent au premier chargement mais peut être perdu lors des navigations client-side.
CSP trop restrictive
Si votre boutique a un header Content-Security-Policy strict (souvent le cas sur les sites d’entreprise), assurez-vous que les directives suivantes autorisent backtome.fr : script-src 'self' https://backtome.fr ; connect-src 'self' https://backtome.fr https://*.supabase.co. Sans ça, le navigateur bloque le bouton silencieusement.
Boutiques avec un build step
Si votre boutique est buildée (Hugo, Jekyll, Astro, Eleventy, etc.), ajoutez le tag dans le template de layout ou via une variable globale, puis rebuildez et redéployez. Modifier le HTML directement dans le dossier dist/ ne survivra pas au prochain build.
WordPress sans WooCommerce (memberships, formations, donations)
Vous vendez des abonnements via MemberPress, des formations via LearnDash ou Tutor LMS, des dons via Give, ou tout autre extension de monétisation autre que WooCommerce ? L’obligation de bouton de rétractation s’applique pareil dès qu’il y a vente à un consommateur dans l’UE. Le mécanisme d’installation est identique au guide WooCommerce : passez par un plugin de gestion d’en-tête (WPCode, Insert Headers and Footers) et collez le tag dans la zone Header. Aucune dépendance à WooCommerce nécessaire, le bouton est universel.
Newsletters payantes (Substack, Ghost, Beehiiv, ConvertKit Commerce)
Substack et certaines plateformes de newsletter payante n’autorisent pas l’injection libre de JavaScript dans le <head> des pages publiques (le HTML est verrouillé). Dans ce cas, BackToMe ne peut pas être installé directement sur la plateforme. Solutions : (1) ajouter un lien vers une page de rétractation hébergée ailleurs (une boutique sur mesure ou un sous-domaine que vous contrôlez), (2) envoyer la rétractation par e-mail conformément à l’obligation UE, en mentionnant cette voie de réclamation dans vos CGV. Ghost et Beehiiv permettent l’injection custom via leurs settings, donc le tag fonctionne dessus.
Pages standalone (Carrd, Linktree, page builders simples)
Carrd Pro, certains page builders gratuits et les plateformes de bio-link (Linktree, Beacons) ne donnent pas accès à <head>. Si votre activité commerciale passe uniquement par ces pages, vous devez héberger une page de rétractation conforme ailleurs et y renvoyer depuis vos liens. Pour Carrd Pro spécifiquement, l’injection de code custom est disponible et le bouton fonctionne.
Le bouton n’apparaît pas après la publication
Ouvrez la boutique Boutique sur mesure en navigation privée. Vérifiez ensuite le thème publié, l’identifiant du tag et son emplacement dans le head.
Le statut reste sur Non détecté
Le tag se signale lorsqu’une page publique le charge. Visitez la boutique publiée dans une fenêtre privée, puis actualisez le statut dans BackToMe.
Le formulaire ne s’ouvre pas
Testez sans extension de navigateur. Vérifiez aussi la politique CSP et les outils qui bloquent les scripts tiers.
Puis-je transmettre l’installation à mon développeur ?
Oui. Envoyez-lui le tag et ce guide. Il n’a pas besoin d’accéder à votre compte pour ajouter la ligne au site.

Documentation officielle Boutique sur mesure

Toujours bloqué ? Contactez-nous avec l’URL de la boutique et une capture d’écran.

Une boutique sur mesure n’a besoin que d’une ligne.