Installationsanleitung

2 Min. · Einfach

BackToMe auf Individueller Shop installieren.

Folgen Sie dem Weg für Individueller Shop, fügen Sie Ihr Tag ein und prüfen Sie anschließend die Erkennung. Fügen Sie einfach eine Zeile in das <head>-Tag Ihres Shops ein.

Mein Tag abrufen Schritte ansehen

Installation

Vor dem Kopieren des Tags.

Prüfen Sie die erforderlichen Zugänge und verwenden Sie danach den für Ihre Plattform angegebenen Ort.

Voraussetzungen

Ein Bearbeitungszugang zum Quellcode Ihres Shops (FTP, Git oder integrierter Editor)
Eine gemeinsame Layout-Datei (header.html, base.html, _document.tsx usw.) oder ein Templating, das das <head>-Tag automatisch auf allen Seiten einbindet
Falls Sie eine CSP (Content Security Policy) haben, die Berechtigungen zum Ausführen von Skripten von https://backtome.fr

Einfügeort in Individueller Shop

Vor dem schließenden </head> des HTML, das auf allen Seiten ausgeliefert wird, auf denen Käufe möglich sind

01Identifizieren Sie die für alle Seiten gemeinsame Layout-Datei (statisches HTML: footer.html ist nicht die richtige, es ist eine Hauptlayout-Datei vom Typ base.html)
02Lokalisieren Sie das Tag </head>
03Fügen Sie das Tag direkt vor diesem Tag ein
04Für eine SPA-Website (React, Vue, Svelte, Angular) verwenden Sie den nativen Mechanismus des Frameworks zum Einbinden in <head>, siehe Fallstricke unten
05Deployen Sie und prüfen Sie in einem privaten Tab, dass das Tag im HTML-Quelltext erscheint

BackToMe-Tag kopieren

Ersetzen Sie IHRE_ID durch die Shop-Kennung aus Ihrem Konto.

Speichern und veröffentlichen

Die Änderung muss in der Version veröffentlicht sein, die Ihre Kunden tatsächlich sehen.

Tag zum Einfügen in den <head>

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

Auf Dauer

Was den Button von einem maßgeschneiderten Shop entfernt

Ein Update oder Theme-Wechsel kann ein zuvor funktionierendes Skript entfernen.

Ein Deployment, das die Vorlage ohne das Tag neu baut.
Eine bei einem Sicherheitsdurchgang verschärfte Content-Security-Policy.
Ein Frontend-Relaunch oder ein Wechsel zu serverseitigem Rendering, der das Tag nicht erneut einfügt.

BackToMe verfolgt das letzte empfangene Signal

Das Dashboard zeigt die letzte Erkennung des Tags. Wenn der Button verschwindet, haben Sie einen genauen Ausgangspunkt für die Shop-Prüfung.

Prüfung

Prüfen Sie den veröffentlichten Shop.

Verlassen Sie sich nicht nur auf die Bestätigung des Editors. Öffnen Sie die öffentliche Website und prüfen Sie, was wirklich geladen wird.

Erwartetes Ergebnis

Der Status wechselt in BackToMe zu Erkannt und der Button erscheint im öffentlichen Shop.

01Öffnen Sie ein privates Fenster.
02Laden Sie eine öffentliche Shop-Seite.
03Prüfen Sie Position und Beschriftung des Buttons.
04Öffnen Sie das Formular, ohne einen echten Widerruf abzusenden.

Nach dem Klick

Jeder Widerruf wird zu einem prüfbaren Vorgang.

BackToMe erfasst den Widerruf, sendet die Empfangsbestätigung und bewahrt die Angaben für die Bearbeitung auf. Das Zertifikat nennt genau, was geprüft werden kann.

Zertifikat verstehen

Fehlerbehebung

Die häufigsten Blockaden.

Jede Antwort lässt sich schließen und mit der Tastatur bedienen.

SPA-Websites: Einbindung über das Framework, nicht in index.html

In einem React-Projekt (Next.js, CRA), Vue (Nuxt), Svelte (SvelteKit): nicht die ausgelieferte finale index.html ändern, sondern den Mechanismus des Frameworks nutzen. Next.js: layout.tsx oder _document.tsx. Nuxt: nuxt.config.ts (head.script). SvelteKit: app.html. Sonst ist das Skript beim ersten Laden korrekt vorhanden, kann aber bei clientseitigen Navigationen verloren gehen.

Zu restriktive CSP

Wenn Ihr Shop einen strengen Content-Security-Policy-Header hat (oft auf Unternehmensseiten), stellen Sie sicher, dass die folgenden Direktiven backtome.fr erlauben: script-src 'self' https://backtome.fr ; connect-src 'self' https://backtome.fr https://*.supabase.co. Andernfalls blockiert der Browser den Button stillschweigend.

Shops mit einem Build-Step

Wenn Ihr Shop gebaut wird (Hugo, Jekyll, Astro, Eleventy usw.), fügen Sie das Tag in das Layout-Template oder über eine globale Variable ein, bauen und deployen Sie dann erneut. Das HTML direkt im Ordner dist/ zu ändern übersteht den nächsten Build nicht.

WordPress ohne WooCommerce (Mitgliedschaften, Kurse, Spenden)

Sie verkaufen Abos über MemberPress, Kurse über LearnDash oder Tutor LMS, Spenden über Give oder jede andere Monetarisierungs-Erweiterung außer WooCommerce? Die Pflicht zum Widerrufsbutton gilt genauso, sobald ein Verkauf an einen Verbraucher in der EU stattfindet. Der Installationsmechanismus ist identisch mit dem WooCommerce-Leitfaden: Nutzen Sie ein Plugin zur Header-Verwaltung (WPCode, Insert Headers and Footers) und fügen Sie das Tag in den Header-Bereich ein. Keine Abhängigkeit von WooCommerce nötig, der Button ist universell.

Kostenpflichtige Newsletter (Substack, Ghost, Beehiiv, ConvertKit Commerce)

Substack und einige kostenpflichtige Newsletter-Plattformen erlauben kein freies Einbinden von JavaScript in den <head> der öffentlichen Seiten (das HTML ist gesperrt). In diesem Fall kann BackToMe nicht direkt auf der Plattform installiert werden. Lösungen: (1) einen Link zu einer anderswo gehosteten Widerrufsseite hinzufügen (ein individueller Shop oder eine Subdomain, die Sie kontrollieren), (2) den Widerruf gemäß der EU-Pflicht per E-Mail entgegennehmen und diesen Reklamationsweg in Ihren AGB nennen. Ghost und Beehiiv erlauben das Einbinden von Custom Code über ihre Settings, das Tag funktioniert dort also.

Standalone-Seiten (Carrd, Linktree, einfache Page-Builder)

Carrd Pro, einige kostenlose Page-Builder und die Bio-Link-Plattformen (Linktree, Beacons) geben keinen Zugriff auf <head>. Läuft Ihre kommerzielle Tätigkeit ausschließlich über diese Seiten, müssen Sie eine konforme Widerrufsseite anderswo hosten und von Ihren Links dorthin verweisen. Speziell bei Carrd Pro ist das Einbinden von Custom Code verfügbar und der Button funktioniert.

Der Button erscheint nach der Veröffentlichung nicht

Öffnen Sie den Individueller Shop-Shop in einem privaten Fenster. Prüfen Sie danach das veröffentlichte Theme, die Tag-Kennung und den Einfügeort im head.

Der Status bleibt auf Nicht erkannt

Das Tag meldet sich, wenn eine öffentliche Seite es lädt. Besuchen Sie den veröffentlichten Shop in einem privaten Fenster und aktualisieren Sie danach den Status in BackToMe.

Das Formular öffnet sich nicht

Testen Sie ohne Browser-Erweiterungen. Prüfen Sie außerdem die CSP-Richtlinie und Werkzeuge, die externe Skripte blockieren.

Kann mein Entwickler die Installation übernehmen?

Ja. Senden Sie das Tag und diese Anleitung. Für das Einfügen der Zeile ist kein Zugang zu Ihrem Konto erforderlich.

Offizielle Dokumentation von Individueller Shop

MDN, Element <head>MDN, Content Security Policy

Noch blockiert? Kontaktieren Sie uns mit Shop-URL und Screenshot.

Andere Plattformen

Alle Anleitungen ansehen

Eine Eigenentwicklung braucht eine einzige Zeile.

7 Tage kostenlos testen