ProofPass in deine Website einbinden: WordPress, Shopify, Wix und mehr

Zwei Wege: iframe oder Script

Der iframe ist ein Rahmen, der die Suche von proofpass.eu lädt. Er funktioniert überall, wo HTML erlaubt ist, und braucht kein JavaScript auf deiner Seite.

Das Script setzt denselben Rahmen an die Stelle, an der es steht. In den Paketen Basis und Start setzt es außerdem den Link „Bereitgestellt über ProofPass“ direkt in deine Seite, nicht in den Rahmen. Manche Systeme entfernen Script-Tags aus Textfeldern. Dann nimmst du den iframe.

Beide Codes enthalten deinen Kurznamen. Kopiere sie aus dem Dashboard, nicht aus diesem Beitrag.

• iframe: läuft überall, kein JavaScript nötig
• Script: Rahmen und Link in deiner Seite, wird von manchen Editoren entfernt

Die Sprache des Widgets

Das Script spricht die Sprache der Seite, in der es steht: Auf einer polnischen Seite erscheinen Suchfeld, Beschriftungen und Hinweise auf Polnisch, und Dokumente in dieser Sprache stehen vorne. Es liest dazu die Sprachangabe deiner Seite, ohne Einstellung im Dashboard. Fehlt sie, nimmt es die Browsersprache, danach die Sprache deiner Herstellerseite.

Beim iframe steht die Sprache am Ende der Adresse, zum Beispiel /pl. Beim Script legst du sie mit data-lang="pl" fest. Produktnamen und Kategorien übersetzt das Widget nicht, sie erscheinen so, wie du sie angelegt hast. Ein Dokument gibt es nur in den Sprachen, die du hochgeladen hast.

WordPress

Öffne die Seite im Block-Editor und füge den Block „Individuelles HTML“ ein. Kopiere den Code hinein und speichere die Seite.

• Seite öffnen, Block hinzufügen, „Individuelles HTML“ wählen
• Code einfügen
• Vorschau prüfen, veröffentlichen

WooCommerce

WooCommerce läuft auf WordPress. Für eine eigene Seite „Datenblätter“ gilt dieselbe Anleitung wie oben. Auf der Produktseite fügst du den Code in einen HTML-Bereich der Beschreibung ein, je nach Theme in den Editor im Tab „Text“ oder in einen HTML-Block.

Wix

Im Wix-Editor fügst du über „Hinzufügen“ ein Element „Einbetten“ hinzu und wählst „HTML einbetten“. Dort trägst du den Code ein. Ziehe das Element auf die gewünschte Größe. Wix zeigt eingebetteten Code im Editor teils erst in der Vorschau.

Jimdo

Füge einen Inhaltsbereich vom Typ „Widget / HTML“ ein und trage den Code dort ein. Die genaue Bezeichnung hängt von deinem Jimdo-Tarif und der Version ab.

Shopify

Für eine eigene Seite öffnest du im Shopify-Adminbereich die Seitenverwaltung, schaltest den Editor auf die HTML-Ansicht und fügst den Code ein. Das gilt auch für Produktbeschreibungen.

Bei Themes mit Abschnitten kannst du alternativ den Abschnitt „Benutzerdefiniertes Liquid“ verwenden und den Code dort einsetzen. Die Menüs ändern sich mit dem Theme.

Shopware

In den Erlebniswelten fügst du ein Element für eigenen HTML-Code ein, falls dein Shopware ein solches Element anbietet, und trägst den Code dort ein. Alternativ nutzt du das HTML-Feld der Produktbeschreibung. Welche Elemente verfügbar sind, hängt von Version und Erweiterungen ab.

TYPO3

Lege auf der Seite ein neues Inhaltselement an und wähle „Einfaches HTML“. Füge den Code ein und speichere. Ist der HTML-Inhalt in deiner Installation eingeschränkt, bitte deine Agentur um Freigabe.

Webflow

Ziehe im Designer ein „Embed“-Element auf die Seite und füge den Code ein. Zum Testen veröffentlichst du die Seite, denn der Designer zeigt den Rahmen nicht immer an.

Squarespace

Füge einen Codeblock hinzu, stelle ihn auf HTML und trage den Code ein. Ob dein Tarif Code-Blöcke erlaubt, steht in den Einstellungen deines Squarespace-Tarifs.

Joomla und Drupal

Joomla: Im Beitragseditor wechselst du auf die Quelltext-Ansicht und fügst den Code ein. Der Standardfilter einiger Editoren entfernt iframes. Dann stellst du in den Einstellungen des Editors die Filter für deine Benutzergruppe um.

Drupal: Lege einen Inhalt oder Block mit einem Textformat an, das vollständiges HTML erlaubt, und füge den Code ein. Im Textformat „Eingeschränktes HTML“ wird der iframe entfernt.

Eigenbau: iframe oder Script?

Baust du die Seite selbst, setzt du den iframe oder das Script direkt in dein Template. Der iframe lädt unabhängig von deinem Code und stört deine Skripte nicht. Das Script gibt dir Rahmen und Link im eigenen DOM.

Lege dem iframe eine Mindesthöhe von etwa 720 Pixeln und eine Breite von 100 Prozent mit. Beim Script geht die Höhe über das Attribut data-height.

Link statt Einbetten, und QR-Code auf dem Etikett

Reicht dir weniger, verlinke im Menü auf deine Herstellerseite bei ProofPass, zum Beispiel unter „Datenblätter“. Die Seite zeigt dein Logo, die Suche und alle aktuellen Fassungen. Das Einbetten ist nicht nötig.

Gedruckte Etiketten und Verpackungen bekommen den QR-Code des Produkts. Er führt immer auf die aktuelle Produktseite und ändert sich nie, auch wenn du das Datenblatt austauschst. Den QR-Code lädst du im Dashboard als PNG oder SVG herunter.

Häufige Fragen