So erstellst du die Widget-Codes selbst

Mit unseren Tipps kannst du die Widgets-Codes für eure Erlebnis-Streams zur Einbindung eurer Erlebnisse auf eurer Website, in eurer digitalen Gästemappe oder in eurem Korrespondenztool ganz einfach selbst generieren

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

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

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

Basiscode

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 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 Schrifart
   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 für jeden Stream die ID anzeigen lassen. Klicke dafür auf "ID anzeigen":
   Die ID, die dir dann angezeigt wird, kopierst du dir und fügst sie im Code nach "streams=" ein:

Mehrere Streams in einem Code

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: 

Wochenprogramm

Damit der Stream vom Wochenprogramm angezeigt werden kann, muss nicht nur die ID vom Wochenprogramm-Stream hinzugefügt werden, sondern auch noch folgender Zusatz nach allen Stream-Codes: 

&showWeeklyProgramme=true

Der Code würde dann wie folgt aussehen: 

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: 

Kategorie- & Datumsfilter

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:

&showCategoryFilter=true

&showStartEndDate=true

Das sieht dann z. B. so aus: 

Mehrere Streams auf einer Seite, aber nicht direkt untereinander 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. 

So kannst du deine Streams auf deiner Website mit weißem Hintergrund integrieren

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

&whiteBackground=true