Du bist hier: / / / Anleitung: Implementierung ohne Plugin

Implementierung ohne Plugins

So gelingt die Integration in CMS- & Shop- Systeme

Tipps für die Implementierung

Ohne Plugins & ohne Programmierkenntnisse Siegel und Widgets einbauen

Sie setzen CMS- oder Shop- Software (WordPress, Shopware etc.) ein und wissen nicht, wie sie die AUSGEZEICHNET.org Tools integrieren sollen?

Hier finden Sie Tipps und Informationen.

Für diese Pakete

Grundlegende Informationen

So funktionieren die AUSGEZEICHNET.org Tools und deren Einbindung in gemieteten (SAAS) und selbst betriebenen Software Systemen.

Das Bewertungssiegel und auch unsere Tools/Widgets (insbesondere der Reviewslider) werden dynamisch aktualisiert. Sie greifen auf AUSGEZEICHNET.org Schnittstellen zu, um aktuelle Inhalte anzeigen zu können.

Damit das funktionieren kann, müssen diese Tools in Form von Snippets  eingebunden werden. Dabei handelt es sich um sogenannte Scripte.

Viele Software-Systeme für die Darstellung von Inhalten (CMS) oder den Verkauf von Produkten und Dienstleistungen (Shopsoftware) sehen die Möglichkeit der direkten Einbindung dieser Scripte nicht vor.

Wenn Sie also keine Programmierkenntnisse und / oder keinen Zugriff auf die Template Dateien haben, möchten wir Ihnen hier ein paar Möglichkeiten aufzeigen, wie sie mit wenig Aufwand Wege finden unsere Scripte einzubinden.

Beispiel: Shopware

Shopware ist eine weit verbreitete Shop Software.

Wie für die meisten Software Systeme gibt es einen Marktplatz für Plugins und und Tools.

Die einfachste Möglichkeit dies für die Implementierung zu nutzen, ist ein geeignetes Plugin für die Einbindung und die Ausführung von Scripten zu suchen und zu installieren.

z.B.: Der Custom JavaScript/CSS Manager für Shopware (6)

Außerdem kann ein Plugin wie der Custom Template Manager helfen, die zu platzierenden Elemente an der richtigen Stelle einzubinden.

Weitere Anbieter:

JTL Shop 4 & 5

Plugins / Widgets für die Script-Einbindung hier „Portlets“

z.B.: DZM Ressources & Health

So geht´s:

  1. Plugin für die Shopsoftware installieren
  2. CSS/JS Container nach Plugin Anweisungen hinzufügen
  3. Script-Code für das Siegel / Widget aus dem Backend (Reiter „Code“) kopieren
  4. Code in den CSS/JS Container (Bereich „JavaScript“) einfügen
  5. Speichern
  6. Platzierung nach Plugin angaben.

Tipp: Grundsätzlich funktioniert dieses Vorgehen bei vielen Anbietern.

Beispiel: WordPress

WordPress ist eine weit verbreitete Blog- und CMS Software.

WordPress bietet einen riesigen Marktplatz für Plugins und Themes. Für die Einbindung von Scripten gibt es eine Vielzahl von Möglichkeiten.

Unser Beispiel: Header & Footer Post Injections

Damit lässt sich der Script Code problemlos an beliebigen Stellen ausführen.

So geht´s:

  1. Plugin installieren
  2. Einstellungen > Head and Footer aufrufen
  3. Über die Reiter/Tabs kann ausgewählt werden, wo der Code eingebunden werden soll
  4. Außerdem – nur Startseite, überall und auch Desktop & Mobile unterschiedlich
  5. Script-Code für das Siegel / Widget aus dem Backend (Reiter „Code“) kopieren
  6. Einfügen
    1. z.B. das dynamische Siegel: „AFTER THE TAG“
    2. z.B. das eingebettete Siegel in den Footer: „BEFORE THE CLOSING TAG“
  7. Save (speichern)

Tipp: Das funktioniert auch mit anderen Plugins, die Scripte erlauben.

Beispiel: Shopify

Ausgezeichnet.org Scripte in Shopify integrieren
Es gibt zwei Wege: über den Theme-Code-Editor (funktioniert immer) oder über einen „Custom Liquid“ Block im Theme-Editor (nur bei Online Store 2.0 Themes, kein Code-Zugriff nötig). Beides ist unten beschrieben.

So geht´s:

1. Shop-Siegel (Dynamic Seal)

Das Siegel soll shopweit erscheinen (meist im Footer), also gehört es in theme.liquid.

Weg A – Theme-Code-Editor:

  1. Admin → Online Store → Themes
  2. Beim aktivem Theme: ⋮ (drei Punkte) → Code bearbeiten
  3. Datei layout/theme.liquid öffnen
  4. Direkt vor dem schließenden Tag einfügen:
<!-- Ausgezeichnet.org-Dynamic-Seal: Begin -->
Ihr Script Code für Ihr Shop-Siegel
<!-- Ausgezeichnet.org-Dynamic-Seal: End -->

5. Speichern

Weg B – Custom Liquid Section (ohne Code-Editor, nur OS 2.0):

  1. Online Store → Themes → Anpassen
  2. Im Footer-Bereich: Block hinzufügen → Custom Liquid
  3. Dort den Snippet-Code einfügen und speichern.

Hinweis: Weg B funktioniert nur, wenn dein Theme „App/Custom Liquid Blocks“ im Footer unterstützt (bei den meisten Standard- und Drittanbieter-Themes der Fall).

2. Produktbewertungs-Widget

Das Widget muss nur auf Produktseiten erscheinen, also gehört es in die Produktvorlage – nicht in theme.liquid.

Weg A – Theme-Code-Editor:

  1. Code-Editor öffnen (siehe oben)
  2. Datei suchen unter sections/:
    • Bei neueren Themes meist main-product.liquid
    • Bei älteren Themes product-template.liquid
  3. Sinnvolle Stelle wählen, z. B. direkt unterhalb des Produkttitels/Preises oder am Ende der Produktbeschreibung, und einfügen:
<!-- Ausgezeichnet.org-Product-Rating-Widget: Begin -->
Ihr Script Code des Produktbewertungs-Widgets
<!-- Ausgezeichnet.org-Product-Rating-Widget: End -->
  1. Speichern.

Weg B – Custom Liquid Block im Theme-Editor:

  1. Online Store → Themes → Anpassen
  2. Eine Produktseite auswählen (z. B. über die Seitenauswahl oben)
  3. An gewünschter Stelle Block hinzufügen → Custom Liquid
  4. Code einfügen, speichern.

Wichtige Praxis-Tipps

  • Dynamisches Widget → Produktdaten übergeben: Falls das Ausgezeichnet.org-Widget produktspezifische IDs/SKUs erwartet, müssen diese dynamisch aus Shopify eingesetzt werden, z. B.:
data-product-sku="{{ product.selected_or_first_available_variant.sku }}"
data-product-id="{{ product.id }}"

→ prüfen, welches Attribut das Script von Ausgezeichnet.org erwartet, und per Liquid-Variable befüllen.

  • Nicht in JS-Assets auslagern, wenn das Script document.write nutzt – dann funktioniert es nur inline im HTML-Flow, nicht in extern geladenen .js-Dateien.
  • Theme-Updates: Manuelle Code-Einfügungen gehen bei einem Theme-Update verloren, falls das Theme komplett ersetzt statt aktualisiert wird. Immer vorher Theme duplizieren/sichern.
  • Testen: Nach dem Einfügen im Vorschaumodus/Store prüfen (Browser-Konsole auf Fehler checken, v. a. bei CSP-Restriktionen, falls Shopify Content-Security-Policy das externe Script blockiert).

Beispiel: webador

webador ist ein Homepage Baukasten, mit dem auch Online-Shops erstellt werden können.

Hier geht es zum webador Hilfe-Center.

So geht´s

Das AUSGEZEICHNET.org Bewertungssiegel lässt sich auch in einem Webador-Shop ohne zusätzliches Plugin integrieren. Je nachdem, ob das Siegel am Bildschirmrand schweben oder an einer bestimmten Stelle innerhalb der Website erscheinen soll, stehen zwei Möglichkeiten zur Verfügung.

1. Siegel-Code bei AUSGEZEICHNET.org kopieren

  1. Loggen Sie sich in Ihren AUSGEZEICHNET.org Kundenbereich ein.
  2. Öffnen Sie den Bereich Widgets → Siegel.
  3. Wählen und konfigurieren Sie die gewünschte Siegelvariante.
  4. Speichern Sie die Konfiguration.
  5. Kopieren Sie anschließend den vollständigen HTML-/JavaScript-Code des Siegels.
Tipp: Für ein am Bildschirmrand angezeigtes Siegel verwenden Sie eine entsprechende schwebende Variante. Soll das Siegel innerhalb des Inhalts erscheinen, wählen Sie eine eingebettete Variante.

2. Variante A: Schwebendes Siegel am Bildschirmrand

Diese Variante eignet sich, wenn das Bewertungssiegel dauerhaft am linken, rechten, oberen oder unteren Bildschirmrand angezeigt werden soll und beim Scrollen sichtbar bleibt.
  1. Öffnen Sie Ihren Webador-Editor.
  2. Gehen Sie zu Einstellungen → Erweitert.
  3. Klicken Sie auf Benutzerdefinierten HTML-Code hinzufügen.
  4. Wählen Sie + HTML-Code hinzufügen.
  5. Fügen Sie den vollständigen AUSGEZEICHNET.org Siegel-Code in den Body-Bereich ein.
  6. Speichern Sie die Änderung und veröffentlichen Sie die Website.

Durch die Einbindung im Body wird das Siegel websiteweit geladen und kann unabhängig vom eigentlichen Seiteninhalt am Bildschirmrand angezeigt werden.

3. Variante B: Siegel an einer bestimmten Stelle einbetten

Diese Variante eignet sich beispielsweise für ein Bewertungssiegel im Footer, innerhalb einer Serviceseite oder neben anderen Vertrauenssignalen.
  1. Öffnen Sie im Webador-Editor die Seite, auf der das Siegel erscheinen soll.
  2. Ziehen Sie das Element Embed-Code bzw. Code (HTML) einbetten an die gewünschte Position.
  3. Klicken Sie auf das Element und anschließend auf Embed bearbeiten.
  4. Fügen Sie den vollständigen Code der eingebetteten Siegelvariante von AUSGEZEICHNET.org ein.
  5. Klicken Sie auf Speichern.
  6. Prüfen Sie das Ergebnis anschließend über die Vorschau oder auf der veröffentlichten Website.

4. Ihr Siegel-Code

Der individuelle Code wird automatisch in Ihrem AUSGEZEICHNET.org Kundenbereich erzeugt. Sie können den Code für das von Ihnen gewünschte Siegel über die Navigation > Widgets / > Widgets Neu abrufen.

Wichtig: Verwenden Sie immer den persönlichen Script-Code aus Ihrem AUSGEZEICHNET.org Kundenbereich. Der oben dargestellte Code dient lediglich als Beispiel. Die individuellen URLs und Kennungen dürfen nicht durch die Beispielwerte ersetzt werden.

5. Siegel wird im Webador-Editor nicht angezeigt?

Das ist nicht ungewöhnlich. Benutzerdefinierter HTML- und JavaScript-Code wird im Webador-Editor nicht immer direkt dargestellt. Es kann deshalb vorkommen, dass Sie dort lediglich einen Platzhalter oder einen leeren Bereich sehen.

Prüfen Sie das Siegel deshalb über die Website-Vorschau oder direkt auf der veröffentlichten Website.

Welche Variante sollten Sie verwenden?

Schwebendes Siegel:
Verwenden Sie die Einbindung über Einstellungen → Erweitert → Benutzerdefinierter HTML-Code → Body.

Fest eingebettetes Siegel:
Verwenden Sie das Webador-Element Embed-Code an der gewünschten Position Ihrer Website.

Tools

Tools, die Ihnen bei der Implementierung helfen.

Eigene Plugin-Entwicklung

  1. Tool zum Testen von hashed-Links: Test-Tool

Grafiken für Ihre E-Mails

Die E-Mails, die Sie als Kaufbestätigung senden, eignen sich hervorragend für eine Aufforderung zur Bewertungsabgabe.

  1. Laden Sie eine Grafik aus der Galerie rechts herunter.
    1. Grafik anklicken
    2. Rechte Maustaste > Datei speichern
  2. Fügen Sie die Grafik in Ihr E-Mail Template ein.
  3. Verlinken diese mit Ihrem Bewertungslink
    1. Kopieren Sie dazu den After Fulfillment Link aus Ihrem Account.
ZurückWeiter
123

Beispiel-Link

Bitte ersetzen Sie die URLs durch Ihre Links.

<a href="https://www.ausgezeichnet.org/bewerten-IHR-BEWERTUNGSLINK" target="_blank" style="outline:none" tabindex="-1"><img src="https://IHRE-DOMAIN-TLD/email_bewertungsaufforderung_185x60.png" style="display:block;height:auto;border:0;max-width:185px;width:100%" width="185" alt="Bitte bewerten Sie uns" title="Bitte bewerten Sie uns"></a>

Was, wenn alles nicht funktioniert?

Sie möchten gern unser Siegel anzeigen und Bewertungen sammeln – aber keine der von uns aufgezeigten Möglichkeiten funktioniert?

So geht´s:

  1. Wenden Sie sich an unseren Service
  2. Lassen Sie sich von uns eine Siegelgrafik erstellen
  3. Binden Sie die Siegelgrafik ein
  4. Verlinken Sie diese mit Ihrem Bewertungslink