How to visually adapt your Giggle widgets to match your website’s look and feel
Giggle experience widgets are designed to integrate seamlessly into your website. In addition to customizing fonts and colors directly within the widget code, you can further tailor the design via your own website’s CSS.
🛠️ Step 1: Basic Styling via Widget Code
You can define colors and fonts directly in the widget code.
👉 Learn how in this article: Customize Widget Design in the Code
🎯 Step 2: Advanced Styling via CSS
Want more design flexibility? With a few CSS tweaks on your site, you can further refine the visual appearance of your embedded streams.
Here is a great customer example:
🔆 Sonnenhof Alpendorf
📌 Important:
Please do not remove the Giggle.tips logo shown in the bottom right corner of the last stream – this is required for legal (GDPR) compliance.
🔍 Most Common CSS Classes
Below is an overview of useful CSS classes for advanced widget customization:
| Area | CSS Class |
|---|---|
| Rounded corners (cards) | .giggle_block .stream-activity |
| Adjust tile size | .giggle_stream .g-widget .stream__group-activities a.stream-activity |
| Stream title (heading) | .giggle-widget-v2 .stream__title |
| Experience title | .giggle-widget-v2 .stream-simple h3.stream-activity__title |
| Pricing styles | .giggle-widget-v2 .stream-activity__currency .giggle-widget-v2 .stream-activity__top |
| Remove background gradient | .giggle-widget-v2 .stream-activity__shadow |
💡 Conclusion
With just a few lines of CSS, you can perfectly match the look of your Giggle experience widgets to your website:
✔️ Consistent branding
✔️ Better visual harmony
✔️ More professional user experience
📩 Need help customizing your widget design?
Share this article with your developer – or reach out to our support team directly at hello@giggle.tips.
We’re happy to help!