--- title: Customizing Widget Design via CSS description: How to visually adapt your Giggle widgets to match your website’s look and feel --- [Skip to content](https://support.giggle.tips/en/help-center/how-can-i-customize-the-design-of-the-widget-codes-on-my-website-via-css#main-content) - [English](https://support.giggle.tips/en/help-center/how-can-i-customize-the-design-of-the-widget-codes-on-my-website-via-css) - [Deutsch](https://support.giggle.tips/help-center/widget-codes-css) English Show submenu for translations ![01\_giggle](https://support.giggle.tips/hubfs/01_giggle.svg) Open main navigation Close main navigation - - [English](https://support.giggle.tips/en/help-center/how-can-i-customize-the-design-of-the-widget-codes-on-my-website-via-css) - [Deutsch](https://support.giggle.tips/help-center/widget-codes-css) English Show submenu for translations - [Go to Dashboard](https://cms.giggle.tips/) [Go to Dashboard](https://cms.giggle.tips/) Hi, how can we help you? - There are no suggestions because the search field is empty. 1. [Help Center](https://support.giggle.tips/en/help-center?hsLang=en) 2. [Website](https://support.giggle.tips/en/help-center/website?hsLang=en) # Customizing Widget Design via CSS ## 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](https://support.giggle.tips/en/help-center/how-to-create-widget-codes-to-include-your-experiences-on-your-website-in-your-digital-guest-portfolio-or-in-your-correspondence-tool?hsLang=en)** --- ### 🎯 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 [![](https://support.giggle.tips/hs-fs/hubfs/Angepasste-Widgets-jpg-1.jpeg?width=650&height=303&name=Angepasste-Widgets-jpg-1.jpeg)](https://www.sonnhof-alpendorf.at/sport-kultur/aktivprogramm/)** 📌 **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! - [Giggle 3.0](https://support.giggle.tips/en/help-center/giggle-3-0?hsLang=en) - [Experiences](https://support.giggle.tips/en/help-center/experiences?hsLang=en#main-content) - [Creation of experiences](https://support.giggle.tips/en/help-center/experiences?hsLang=en#creation-of-experiences) - [Categories](https://support.giggle.tips/en/help-center/experiences?hsLang=en#categories) - [Requests & Bookings](https://support.giggle.tips/en/help-center/experiences?hsLang=en#requests-bookings) - [Teams](https://support.giggle.tips/en/help-center/experiences?hsLang=en#teams) - [Statistics](https://support.giggle.tips/en/help-center/experiences?hsLang=en#statistics) - [Website](https://support.giggle.tips/en/help-center/website?hsLang=en) - [WebApp](https://support.giggle.tips/en/help-center/webapp?hsLang=en#main-content) - [Streams](https://support.giggle.tips/en/help-center/webapp?hsLang=en#streams) - [API & AI Bots](https://support.giggle.tips/en/help-center/api-ai-bots?hsLang=en#main-content) - [ExperienceAPI](https://support.giggle.tips/en/help-center/api-ai-bots?hsLang=en#experienceapi) - [AI Bots](https://support.giggle.tips/en/help-center/api-ai-bots?hsLang=en#ai-bots) - [Social Media](https://support.giggle.tips/en/help-center/social-media?hsLang=en#main-content) - [Facebook](https://support.giggle.tips/en/help-center/social-media?hsLang=en#facebook) - [Instagram](https://support.giggle.tips/en/help-center/social-media?hsLang=en#instagram) - [Pinterest](https://support.giggle.tips/en/help-center/social-media?hsLang=en#pinterest) - [Google](https://support.giggle.tips/en/help-center/google?hsLang=en#main-content) - [Google Places](https://support.giggle.tips/en/help-center/google?hsLang=en#google-places) - [Mailings](https://support.giggle.tips/en/help-center/mailings?hsLang=en) - [Printed weekly program](https://support.giggle.tips/en/help-center/printed-weekly-program?hsLang=en) - [Digital Signage](https://support.giggle.tips/en/help-center/digital-signage?hsLang=en) - [Guest Info Tools](https://support.giggle.tips/en/help-center/guest-info-tools?hsLang=en) - [Login & Technics](https://support.giggle.tips/en/help-center/login-technics?hsLang=en) [![](https://support.giggle.tips/hs-fs/hubfs/signatur%20logo.png?width=165&height=34&name=signatur%20logo.png)](http://giggle.tips) giggle.tips Help Center Copyright © 2026, Giggle GmbH