How to create the widget codes yourself

Easily generate the widget codes for your experience streams to include your experiences on your website, in your digital guest portfolio or in your correspondence tool

1. Basic code (including colors and font)
2. Multiple streams in one code
3. Weekly program
4. Streams in weekly program style
5. Category and date filter
6. Include multiple streams on one page, but not directly below each other

7. Integrate the experiences on your website with a white background

Basic code

This is the basic code for your experiences, which you can easily adapt to your company:

Copy this code and adapt it to your operation:

<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=en&streams=2a0dbce6-bf12-4a42-ad58-7ebe0c8c8b98"></script>

1. First you need to change the "path". To do this, open your "WebApp" via the CMS by clicking on "View my Giggle App" and then copy the last part of the URL (everything after the last slash). Usually this is your hotel name. In our case it says "trends". Then you paste it in the code directly after "path=" (see the example code above).
   
    
2. In the next step you can change the font color of the stream title and the color of the buttons. 
   fontCol= stands for the font color
   btCol= stands for the button color
   After "=" you simply insert the desired hex color code. This consists of a combination of 6 letters/numbers. 
   In our case, the color code #3030EF is stored in both cases (see the example code above). Please remember to omit the # character in the code..   
3. Of course you can also adjust the font. 
   font= stands for the font
   So behind "font=" you specify the font that should be used. This should always be one of the fonts that are embedded on your website, because only then our widget can access this font, if e.g. the widgets are implemented on your website. So pay attention to the exact spelling here:
    
   In our case, this is the "Manrope" font (see in the sample code above).
4. The language can also be easily customized: 
   lang= stands for the language
   "en" stands for English, "de" stands for German, "it" stands for Italian etc. 
   You can display the streams in all the languages that you also have on file for translation. If the stream you want to embed should be in English, then the code should be: lang=en
5. The next step is to include the streams you would like to embed via the widget code, e.g. on your website. 
   streams= stands for the desired streams
   After "streams=" you simply insert the ID of the desired stream. To do this, go to the CMS under "Streams". Here you can see the ID for each stream. Click on "Show ID":
   Copy the ID that is displayed and paste it into the code after "streams=":

Multiple streams in one code

To display multiple streams directly below each other, for example on your experience subpage on your website, line up all the IDs of the desired streams one after the other separated only by a comma:

Weekly program

To show the stream of the weekly program, not only the ID of the weekly program stream must be added, but also the following addition after all stream codes:

&showWeeklyProgramme=true

The code would then look like this:

Streams in weekly program style

You can display each stream in weekly program style, for example, because you want to have a separate stream for the children's program or you want to display the events separately. Streams displayed in the weekly program style show only experiences with date and time. This means that just like in the "normal" weekly program stream, the experiences are then also sorted chronologically by date. 

To display streams in weekly program style, you have to add "&wpStreams=" in addition to "streams=". All IDs of the streams you want to display in weekly program style, you then add again after "&wpStreams=". This will look like this:

Category & date filter

You can also add a category and/or date filter to your streams. To do so, simply add one or both of the following code snippets to your code:
&showCategoryFilter=true
&showStartEndDate=true

It will look like this:

Include multiple streams on one page, but not directly below each other

If you want to embed multiple streams on one page, but in different places, then you need a different widget code for the experience streams:

In this case the ID of the code ("gt1", "gt2" etc.) and the source link, which must also be provided with the appropriate extension ("gt1", "gt2" etc.), change, see above in the code in bold.

How to integrate your streams on your website with a white background

To display the experience pop-ups on your website with a white background, add the following code snippet to your code:

&whiteBackground=true