Auf die Website einbauen

Das Einbinden funktioniert auf jeder Website, egal ob Duda, WordPress, Wix, Jimdo, Shopify oder eine selbst gebaute Seite. Sie fügen an einer Stelle zwei Zeilen Code ein, den Rest übernimmt Echo.

Code kopieren

Jedes Snippet zeigt sein fertiges Einbau-Snippet. Klicken Sie dort auf „Kopieren”. Der Code sieht ungefähr so aus:

<script src="https://embed.echo-reviews.de/widget.js" defer></script>
<echo-reviews public-key="DEIN-SCHLÜSSEL"></echo-reviews>

• Die erste Zeile lädt einmalig den kleinen Echo-Baustein.
• Die zweite Zeile ist der Platzhalter, an dem Ihre Bewertungen erscheinen.

Immer den Code aus dem Dashboard nehmen

Kopieren Sie den Code direkt aus Ihrem Snippet. Er enthält bereits Ihren persönlichen Schlüssel und die richtigen Einstellungen, abtippen ist nicht nötig.

Code einfügen

Fügen Sie den kopierten Code an der Stelle Ihrer Seite ein, an der die Bewertungen erscheinen sollen. Bei den gängigen Baukästen geht das so:

• Duda: ein HTML-Widget an die gewünschte Stelle ziehen und den Code in das Code-Feld einfügen.
• WordPress: einen Block „Individuelles HTML” (Custom HTML) einfügen und den Code hineinkopieren.
• Wix / Jimdo / Squarespace: ein HTML-Einbettungs-Element (oft „Embed” oder „HTML einbetten”) an die gewünschte Stelle ziehen und den Code einsetzen.
• Shopify: den Code in einen Custom-Liquid- bzw. HTML-Abschnitt einfügen.
• Eigene Website: den Code direkt ins HTML an der gewünschten Position setzen.

Speichern, Seite veröffentlichen, fertig. Die Bewertungen erscheinen sofort.

Gut zu wissen

• Stört Ihr Design nicht: Der Slider läuft in einer abgeschotteten Zone (Shadow DOM). Ihre Schriften und Farben bleiben unberührt, und umgekehrt beeinflusst Ihr Stylesheet den Slider nicht.
• Mehrfach möglich: Sie können den Code mehrfach auf einer Seite einsetzen, pro Stelle ein Snippet mit eigenem Schlüssel.
• Ausfallsicher: Sollte Echo einmal nicht erreichbar sein, bleibt die Stelle einfach leer. Ihre Website funktioniert weiter wie gewohnt.

Der Slider wird abgeschnitten

Manche Baukästen geben einem HTML-Element eine feste Höhe, die sie beim Einfügen im Editor messen, und blenden alles darüber aus. Weil die Bewertungen erst kurz nach dem Seitenaufbau geladen werden, ist das Element in diesem Moment noch leer. Die gemessene Höhe ist dann zu klein, und später sehen Sie nur den oberen Teil des Sliders.

Das lässt sich auf zwei Wegen lösen.

Im Baukasten die Höhe freigeben. Das ist der saubere Weg:

• Duda: Das HTML-Widget im Editor anfassen und nach unten größer ziehen, bis der Slider vollständig sichtbar ist.
• WordPress, Wix, Jimdo, Squarespace: Beim Embed-Element die Höhe auf automatisch stellen, falls die Option vorhanden ist, sonst ebenfalls größer ziehen.

Oder Echo die Höhe anpassen lassen. Ergänzen Sie das Attribut autosize:

<echo-reviews public-key="DEIN-SCHLÜSSEL" autosize></echo-reviews>

Damit weitet Echo den umgebenden Bereich so weit, dass der Slider hineinpasst. Der Bereich wird dabei nur größer, nie kleiner.

Warum ist das nicht von Haus aus an?

Mit autosize verändert Echo das Layout Ihrer Seite. Falls Sie die Höhe an dieser Stelle bewusst festgelegt haben, soll das nicht ungefragt passieren. Deshalb schalten Sie es selbst frei.

Wird nichts angezeigt?

• Ist das Snippet auf aktiv gestellt?
• Gibt es schon Bewertungen? Google-Bewertungen erscheinen nach dem nächsten Sync, Echo-Bewertungen sobald der erste Kunde bewertet hat.
• Wurde der komplette Code eingefügt (beide Zeilen)?

Blockiert Ihre Seite fremde Skripte über eine strenge Content-Security-Policy? Dann muss Ihre Seite Skripte, Verbindungen und Bilder von embed.echo-reviews.de sowie die Reviewer-Bilder von Google (lh3.googleusercontent.com) erlauben. In den meisten Baukästen ist das kein Thema, fragen Sie im Zweifel Ihren Webmaster. Hilft das nicht weiter, schreiben Sie uns.

Nächster Schritt

Aussehen anpassen? Weiter mit Darstellung anpassen.