Widget-Codes selbst erstellen – so geht’s

Erstelle dir die ErlebnisWidgets zur Einbindung auf eurer Website, in digitalen Tools oder in eure Korrespondenz ganz einfach selbst

Mit dem neuen Widget-Generator in deinem Giggle CMS kannst du Erlebnis-Widgets jetzt ganz ohne Programmierkenntnisse erstellen, anpassen und direkt auf deiner Website einbinden. Der manuelle Codebau ist weiterhin möglich (Infos siehe unten), aber ab jetzt geht alles noch einfacher – per Klick.

1. So erstellst du dein Widget im CMS

2. Alternativ: Codes manuell erstellen

---

🛠 So erstellst du deinen Widget-Code im CMS

Um Widgets zu erstellen, navigiere zum Hauptmenüpunkt "Erlebnisse teilen" und wähle hier den Punkt "ErlebnisWidgets" aus:

1. Gehe zu: CMS > Erlebnisse teilen > ErlebnisWidgets

2. Klicke nun auf „Widget erstellen“.
   Es öffnet sich eine neue Unterseite. Hier kannst du jetzt alle Einstellungen für deinen neuen Widget-Code hinterlegen.

Einstellungen für deinen Widget-Code:

1. Wähle deine gewünschten Streams aus, die du über den Widget-Code ausspielen möchtest

   • Mehrere Streams möglich (mit Drag & Drop sortieren)

   • Optional: „Chronologischer Stil“ aktivieren

2. Vergib dem Widget einen internen Namen wie z. B. Homepage Highlights

3. Sprachauswahl

   • Wähle alle gewünschten Sprachen

   • Bei mehreren Sprachen generiert das System automatisch verschiedene Codes mit passendem lang-Parameter

4. Widget-ID festlegen

   • Pflichtfeld und eindeutig pro Seite

   • Kann als Anker-Link verwendet werden (z. B. homepage-highlights)

5. Weitere Optionen aktivieren (optional)

   • Datumsfilter anzeigen → &showStartEndDate=true

   • Erlebnisse im neuen Tab öffnen → &experiencesNewTab=true

6. Design anpassen

   • Schriftart: z. B. Manrope, Roboto (muss exakt wie auf der Website installiert sein!)

   • Stream-Titel-Farbe: z. B. 3030EF

   • Button-Farbe: z. B. 000000

   • Kartengröße: S oder L (Standard: L)

   • Theme: Hell (weiß, whiteBackground=true) oder Dunkel

7. Widget-Code generieren
   → Über „Embed Code“ (wird je Sprache individuell angezeigt)
8. Änderungen speichern
   → „Save changes“ klicken

---

🧪 Alternativ: Codes manuell erstellen

Wenn du lieber selbst den HTML-Code generierst (z. B. in Zusammenarbeit mit einem Webentwickler), findest du hier alle nötigen Parameter:

🧷 Wichtige Parameter:

Zweck	Parameter	Beispielwert
Stream-Auswahl	streams=	streamID1,streamID2
Widget-ID	id=	gt1
Hotelname-Path	path=	mein-hotel
Sprache	lang=	de
Schriftart	font=	Roboto
Titel-Farbe	fontCol=	000000
Button-Farbe	btCol=	FF0000
Weißes Theme	whiteBackground=true
Kleinere Karten	smallVersion=true
Chronologische Streams	wpStreams=	streamID1,streamID2
Datumsfilter	showStartEndDate=true
Externe Öffnung	experiencesNewTab=true

1. Basiscode (inkl. Farben und Schriftart)
2. Mehrere Streams in einem Code
3. Streams im Wochenprogramm-Stil (chronologische Streams)
4. Datumsfilter

5. Mehrere Streams auf einer Seite, aber nicht direkt untereinander einbauen

6. Integration mit weißem Hintergrund (white Background)

🧩 Basiscode – dein Startpunkt

Das ist der Basiscode für eure Erlebnisse (siehe blau unterlegt). Diesen kannst du ganz einfach an euren Betrieb anpassen.

Kopiere dir den Code von hier und passe ihn ganz einfach an euren Betrieb an: 

<div id="gt1" style="display:block; width:100%;"></div>

<script viewport src="https://widget.giggle.tips/widget.js?id=gt1&path=trends&width=100%&fontCol=3030EF&btCol=3030EF&font=Manrope&lang=de&streams=2a0dbce6-bf12-4a42-ad58-7ebe0c8c8b98"></script>

1. Als erstes änderst du den "path". Dafür öffnest du dir deine WebApp über das CMS, in dem du auf "View my Giggle App" klickst und kopierst dir dann den letzten Part der URL (alles nach dem letzten Slash). Normalerweise ist das dein Hotelname. In unserem Fall steht hier "trends". Diesen fügst du dann im Code direkt nach "path=" ein (siehe den Beispielcode oben).
   
    
2. Im nächsten Schritt kannst du die Schriftfarbe des Stream-Titels und die Farbe der Buttons ändern. 
   fontCol= steht für die Schriftfarbe
   btCol= steht für die Buttonfarbe
   Nach dem "=" fügst du einfach den gewünschten Hex-Farbcode ein. Dieser besteht aus einer Kombination von insgesamt 6 Buchstaben/Zahlen. 
   In unserem Fall ist in beiden Fällen der Farbcode #3030EF hinterlegt (siehe den Beispielcode oben). Das #-Zeichen musst du im Code weglassen. 
3. Natürlich kannst du auch die Schriftart anpassen. 
   font= steht für die Schriftart
   Du fügst also nach "font=" die Schriftart ein, die verwendet werden soll. Das sollte immer eine der Schriftarten sein, die z. B. auch auf eurer Website eingebettet sind, da unser Widget nur dann auch auf die Schriftart zugreifen kann. Achte also hier auf die genaue Schreibweise:
    
   In unserem Fall ist das die Schriftart "Manrope" (siehe im Beispielcode oben).
4. Die Sprache lässt sich ebenfalls spielend leicht anpassen: 
   lang= steht für die Sprache
   "de" steht für Deutsch, "en" steht für Englisch, "it" steht für Italienisch usw. 
   Du kannst die Streams in den Sprachen ausspielen, die auch bei dir für die Übersetzung hinterlegt sind. Wenn der Stream, den du einbetten möchtest, also in Deutsch sein soll, dann muss es im Code heißen: lang=de 
5. Jetzt kommen wir zu den Streams − also welche Streams du gerne über den Widget-Code z. B. auf deiner Website einbetten möchtest. 
   streams= steht für die gewünschten Streams
   Nach "streams=" fügst du einfach die ID des gewünschtes Streams ein. Dafür gehst du ins CMS unter "Streams". Hier kannst du dir einfach die gewünschte ID pro jeden Stream kopieren und dann im Code nach "streams=" einfügen 

➕ Mehrere Streams in einem Code anzeigen

Um mehrere Streams direkt untereinander anzuzeigen, z. B. auf deiner Erlebnis-Unterseite auf deiner Website, reihst du alle IDs der gewünschten Streams hintereinander nur mit einem Komma getrennt: 

📅 Streams im Wochenprogramm-Stil

Du kannst jeden Stream im Wochenprogram-Stil anzeigen lassen, z. B. weil du einen eigenen Stream für das Kinderprogramm haben möchtest oder die Events gesondert darstellen willst. Streams, die im Wochenprogramm-Stil dargestellt werden, zeigen nur Erlebnisse mit Datum und Uhrzeit. Das heißt, dass die Erlebnisse genau wie im "normalen" Wochenprogramm-Stream dann auch chronologisch nach Datum sortiert werden. 

Um Streams im Wochenprogramm-Stil anzuzeigen, musst du zusätzlich zu "streams=" noch "&wpStreams=" hinzufügen. Alle IDs von den Streams, die du im Wochenprogramm-Stil anzeigen lassen möchtest, fügst du dann noch einmal nach "&wpStreams=" ein. Das sieht dann z. B. so aus: 

📆 Datumsfilter aktivieren

Du kannst deinem Streams auch einen Kategorie- und/oder Datumsfilter hinzufügen. Dafür fügst du deinem Code einfach einen oder beide der folgenden Codeschnipsel hinzu:

&showStartEndDate=true

Das sieht dann z. B. so aus: 

🧱 Mehrere Streams separat auf einer Seite einbauen

Wenn du mehrere Streams auf einer Seite, jedoch an verschiedenen Stellen einbetten möchtest, dann benötigst du einen anderen Widget-Code für die Erlebnis-Streams: 

In diesem Fall ändert sich die ID des Codes ("gt1", "gt2" etc.) und der Source-Link, welcher außerdem mit der passenden Endung ("gt1", "gt2" etc.) versehen werden muss, siehe oben im Code in Fett. 

⚪ Integration mit weißem Hintergrund

Um die Erlebnis-Popups auf deiner Website mit weißem Hintergrund darzustellen, fügst du deinem Code folgendem Code-Schnipsel hinzu:

&whiteBackground=true

🎨 Individuelle Anpassungen via CSS

Für weitergehende Design-Anpassungen (z. B. Schriftgrößen, Abstände, Farben) kannst du die Widget-Codes über das CSS deiner Website anpassen. Eine Anleitung dazu findest du hier:

👉 Widget-Design via CSS anpassen

---

✅ Fazit

Du hast jetzt zwei Wege zur Auswahl:

• Einfach & schnell mit dem Widget-Generator im CMS
  → ideal für alle, die kein HTML schreiben möchten

• Flexibel & technisch individuell über manuelle Code-Anpassung
  → z. B. für Entwickler oder Webagenturen

---

📩 Du brauchst Unterstützung beim Erstellen oder Einbinden der Codes?
Unser Team hilft dir gerne weiter: hello@giggle.tips