Website-Baukasten
Bewertungen in Wix einbinden
Mit dem Element „HTML einbetten“ zeigen Sie Ihre freigegebenen Mocha-Bewertungen auf jeder Wix-Seite. Weil Wix eingebetteten Code in einem eigenen Rahmen anzeigt, legen Sie die Höhe des Elements selbst fest.
Kurzfassung in 5 Schritten
- Wählen Sie in Mocha unter „Einbinden“ > „Widget“ ein Widget und klicken Sie auf „Code kopieren“.
- Fügen Sie in Wix über „Hinzufügen“ > „Code einbetten“ das Element „HTML einbetten“ ein.
- Klicken Sie auf „HTML-Code eingeben“, fügen Sie den Code ein und klicken Sie auf „Anwenden“.
- Ziehen Sie das Element so hoch, dass das Widget ohne Scrollbalken passt, auch in der Mobilansicht.
- Prüfen Sie die „Vorschau“ und klicken Sie auf „Veröffentlichen“.
Voraussetzungen
- Ein Mocha-Space mit mindestens einer freigegebenen Bewertung. Ohne freigegebene Bewertungen bleibt das Widget leer.
- Der Einbettungscode aus dem Mocha-Dashboard (siehe Schritt 1).
- Zugang zum Editor Ihrer Wix-Website.
Wix zeigt eingebetteten Code immer in einem eigenen Rahmen (iFrame) an. Das Widget kann seine Höhe darin nicht selbst anpassen, deshalb legen Sie die Höhe des Elements von Hand fest. Die Schritte beschreiben den Wix Editor. Für Wix Studio und den Wix Harmony Editor finden Sie die abweichenden Wege in der Tabelle nach den Schritten.
Schritt für Schritt
Code in Mocha kopieren
Öffnen Sie im Mocha-Dashboard Ihren Space und klicken Sie in der Space-Navigation unter „Einbinden“ auf „Widget“. Wählen Sie unter „Widget wählen“ ein Widget, passen Sie „Erscheinungsbild“ und „Layout“ (je nach Widget „Optionen“) an und klicken Sie auf „Code kopieren“.
Der kopierte Code ist ein einzelner Script-Tag. Ihr Code enthält statt „ihr-space“ die Kennung Ihres Spaces:
HTML<script src="https://mocha.de/api/embed/ihr-space/widget.js" data-mode="wall" async></script>Element „HTML einbetten“ hinzufügen
Öffnen Sie in Wix die Seite, auf der die Bewertungen erscheinen sollen. Klicken Sie links im Editor auf „Hinzufügen“, dann auf „Code einbetten“ und „Beliebte Einbettungen“. Klicken Sie auf „HTML einbetten“. Wix legt das Element auf der Seite ab. Ziehen Sie es an die gewünschte Stelle.
Code einfügen
Klicken Sie auf das Element und dann auf „HTML-Code eingeben“. Fügen Sie den Mocha-Code in das Feld „Code hier hinzufügen (nur HTTPS)“ ein und klicken Sie auf „Anwenden“. Unter „Was ist in der Einbettung zu sehen?“ können Sie zusätzlich einen Alternativtext eintragen, etwa „Bewertungen unserer Patientinnen und Patienten“.
Höhe des Elements anpassen
Ziehen Sie das Element auf die Breite Ihres Inhaltsbereichs. Ziehen Sie dann den unteren Rand nach unten, bis das Widget vollständig und ohne Scrollbalken zu sehen ist. Slider, Einzelzitat und Badge brauchen deutlich weniger Höhe als eine Bewertungswand. Eine Bewertungswand wird mit jeder neuen Bewertung länger, planen Sie hier großzügig.
Mobilansicht prüfen
Wechseln Sie oben im Editor in die Mobilansicht. Auf dem Smartphone ist das Element schmaler, das Widget wird dadurch meist höher. Vergrößern Sie die Höhe des Elements hier, bis nichts mehr abgeschnitten ist.
Vorschau prüfen und veröffentlichen
Klicken Sie oben rechts auf „Vorschau“ und prüfen Sie das Widget. Klicken Sie danach auf „Veröffentlichen“. Rufen Sie die veröffentlichte Website einmal am Computer und einmal am Smartphone auf.
Wix Studio und Wix Harmony
Das Element ist dasselbe, nur der Weg dorthin unterscheidet sich:
| Editor | Element hinzufügen | Code eingeben |
|---|---|---|
| Wix Editor | „Hinzufügen“ > „Code einbetten“ > „Beliebte Einbettungen“ > „HTML einbetten“ | „HTML-Code eingeben“, dann „Anwenden“ |
| Wix Studio | „Elemente hinzufügen“ > „Einbettung & Social Media“ > „Code einbetten“ | „HTML-Code eingeben“, dann „Anwenden“ |
| Wix Harmony | „+ Hinzufügen“ > „Elemente“ > Symbol „Weitere Optionen“ > „Einbetten“, dann „Code einbetten“ auf die Seite ziehen | Symbol „Einstellungen“, Feld „HTML-Einbettungscode eingeben“ |
Im Wix Harmony Editor fragt Wix in den Einstellungen des Elements zusätzlich, welche Cookies und ähnlichen Technologien der eingebettete Code setzt. Das Mocha-Widget selbst setzt keine Cookies. Welche Kategorie Sie wählen, klären Sie im Zweifel mit Ihrer Datenschutzberatung.
Alternative: iFrame
Statt des Widgets können Sie die Bewertungswand-Seite Ihres Spaces in einem Rahmen anzeigen. Das Mocha-Dashboard beschreibt diesen Weg ausdrücklich auch für Wix.
- Klappen Sie im Mocha-Dashboard unter „Einbettungscode“ den Bereich „iFrame einbetten“ auf. Kopieren Sie aus dem Code nur die Adresse hinter
src=, zum Beispielhttps://mocha.de/wall/ihr-space?theme=light. - Fügen Sie in Wix über „Hinzufügen“ > „Code einbetten“ > „Beliebte Einbettungen“ das Element „Eine Website einbetten“ ein.
- Klicken Sie auf „Website-Adresse ändern“, tragen Sie die Adresse unter „Website-Adresse?“ ein und klicken Sie auf „Anwenden“.
- Passen Sie Breite und Höhe des Elements an wie in den Schritten 4 und 5.
In Wix Studio heißt das Element „Website einbetten“, im Wix Harmony Editor ebenfalls, dort tragen Sie die Adresse im Feld „Link“ ein. Von den Einstellungen im Dashboard übernimmt die Bewertungswand-Seite nur das Design (hell oder dunkel).
Wenn das Widget nicht erscheint
- Keine freigegebene Bewertung: Das Widget zeigt nur freigegebene Bewertungen und bleibt sonst leer. Wie Sie Bewertungen freigeben, lesen Sie unter Bewertung freigeben.
- Space pausiert: Ist in den „Einstellungen“ des Spaces „Space ist aktiv“ ausgeschaltet, zeigt Mocha kein Widget an.
- Code unvollständig: Der Code beginnt mit
<scriptund endet mit</script>. Kopieren Sie ihn im Zweifel erneut mit „Code kopieren“. - Widget abgeschnitten: Das Wix-Element ist zu niedrig. Ziehen Sie es höher, am Desktop und in der Mobilansicht.