YOGO-Widgets auf deiner Wix-Website einrichten

Das brauchst du vorab:

• Zugang zu deiner Wix-Website (als Inhaber*in oder Mitarbeiter*in mit Bearbeitungsrechten)
• Eine verbundene eigene Domain
• Deinen persönlichen YOGO-Head-Code. Schreib uns an yo@yogobooking.com, wir schicken ihn dir zu

💡 Wichtig vorab: Die Widgets erscheinen nur auf deiner veröffentlichten Live-Website. Im Wix-Editor und in der Wix-Vorschau siehst du nur den Code als Text. Das ist normal und kein Fehler.

Schritt 1: YOGO-Code in Wix einfügen 

Diesen Schritt machst du nur einmal für die ganze Website.

1. Melde dich bei Wix an und öffne das Dashboard deiner Website.

2. Klicke links auf Einstellungen und suche nach Benutzerdefinierter Code.

3. Klicke oben rechts auf + Benutzerdefinierten Code hinzufügen.

4. Füge deinen YOGO-Head-Code in das Code-Feld ein.

5. Stelle Folgendes ein:

• Name: YOGO Wix
• Code zu Seiten hinzufügen: Alle Seiten – und Code auf jeder neuen Seite laden auswählen
• Code platzieren in: Head

6. Klicke auf Anwenden.

💡 Tipps:

• Kopiere den Code direkt aus unserer E-Mail. Wenn du ihn über Chat-Programme wie Slack oder Teams weiterleitest, können dort Links automatisch umformatiert werden.

• Prüfe, dass die Zeile mit YOGO_APP_SERVER so aussieht: var YOGO_APP_SERVER = 'deinstudio.yogobooking.de'; – ohne eckige oder runde Klammern um den Namen.

• Stelle sicher, dass keine überflüssigen Leerzeichen am Anfang oder am Ende sind.

Schritt 2 (optional): Benutzerdefiniertes Styling hinzufügen

Farben, Abstände und Schriften stellst du am einfachsten im YOGO Admin unter Design ein. Brauchst du darüber hinaus eigenes CSS, lege dafür einen zweiten Code-Eintrag an:

1. Klicke erneut auf + Benutzerdefinierten Code hinzufügen.
2. Füge dein CSS ein – immer zwischen <style> und </style>.

3. 5. Stelle Folgendes ein:

   • Name: YOGO Wix
   • Code zu Seiten hinzufügen: Alle Seiten – und Code auf jeder neuen Seite laden auswählen
   • Code platzieren in: Head
4. Klicke auf Anwenden.

🎨 Beispiel: Buttons in deiner Markenfarbe und ein Widget ohne eigenen Rahmen:

<style>
.yogo-widget .theme--frame-box {
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.yogo-btn.yogo-btn-primary {
  background: #4A3428;
  border-color: #4A3428;
  border-radius: 8px;
  color: #fff !important;
}
</style>

💡 Achtung: Die letzte Zeile muss </style> mit Schrägstrich sein. Fehlt der Schrägstrich, wird der Style-Block nicht geschlossen.

Schritt 3: Widget auf einer Seite einbauen

Das Widget kommt in ein ganz normales Textelement. Der YOGO-Code erkennt den Text auf der Live-Seite und ersetzt ihn durch das Widget.

1. Klicke im Dashboard oben rechts auf Website bearbeiten.
2. Wähle oben im Seiten-Menü (z. B. „Seite: Home“) die Seite aus, auf der das Widget erscheinen soll.
3. Klicke links auf + Elemente hinzufügen → Text → Absatz und ziehe den Absatz an die gewünschte Stelle.
4. Doppelklicke in das Textelement, markiere den Platzhaltertext mit Strg/Cmd + A und lösche ihn.
5. Kopiere den Widget-Code aus der Tabelle unten und füge ihn als reinen Text ein: Strg + Umschalt + V (Windows) bzw. Cmd + Umschalt + V (Mac).
6. Ziehe das Textelement auf die volle Breite des Abschnitts. Achte darauf, dass es vollständig innerhalb des Abschnitts liegt und nicht über den Rand hinausragt.

Damit der Code erkannt wird:

• Kein Leerzeichen und keine leere Zeile vor oder nach dem Code
• Gerade Anführungszeichen " verwenden, keine typografischen „ “
• Nur der Code im Textelement, kein weiterer Text

Welche Codes soll ich benutzen? 

💡 Hilfreich: Weitere Filter und Widgets findest du im Leitfaden zum Einrichten von Widgets.

❗Nicht verwenden: das Wix-Element Code einbetten / HTML einbetten. Es lädt Inhalte in einem abgetrennten Fenster (iFrame), in dem der YOGO-Code das Widget nicht findet.

Schritt 4: Veröffentlichen und auf der Live-Seite prüfen

1. Klicke oben rechts auf Veröffentlichen.
2. Öffne deine Website über ihre normale Adresse (z. B. www.deinstudio.de/kursplan) – nicht über die Wix-Vorschau.
3. Lade die Seite einmal neu, ohne Zwischenspeicher: Strg + Umschalt + R (Windows) bzw. Cmd + Umschalt + R (Mac).
4. Das Widget erscheint nach ein bis zwei Sekunden an der Stelle des Codes.

❗ Hinweis: In Wix werden Widgets im Bearbeitungsmodus nicht angezeigt. Vorschau nur auf der Live-Seite möglich.

💡 Hilfreich: Siehst du stattdessen weiterhin den Code als Text, hilft dir der Abschnitt Fehlerbehebung weiter unten.

Schritt 5: Login-Button ins Menü einfügen

So können deine Kund*innen direkt auf ihr YOGO-Profil zugreifen.

1. Klicke im Editor auf Seiten & Menü (bzw. Seite → Seiten verwalten).
2. Klicke auf + Menüpunkt hinzufügen → Link.
3. Gib als Link ein: https://deinstudio.yogobooking.de/frontend/index.html#/my-profile
   
   👉 Ersetze deinstudio durch deinen YOGO-Namen.
4. Benenne den Menüpunkt z. B. „Login“ oder „Mein Profil“ und veröffentliche die Website.

💡 Hilfreich: Mehr Infos zum Login-Link und Einstellen von Widgets findest du in diesem Artikel.

Fehlerbehebung

Konsole prüfen 

1. Öffne die Live-Seite in Chrome und drücke F12 (Mac: Cmd + Option + J).
2. Wechsle zum Tab Console und lade die Seite neu.
3. Steht dort „YOGO: Failed to get widget file list from app server“, ist der Name in YOGO_APP_SERVER falsch geschrieben. Vergleiche ihn mit deinem YOGO-Namen.

Du kommst nicht weiter?

Schreib uns direkt an yo@yogobooking.com – am besten mit der Adresse der betroffenen Seite und einem Screenshot.