How Do I Customize the Design of My Widget in Feedspace?

Overview

Feedspace widgets come with a powerful Design tab that lets you tailor every visual aspect of your widget. From card colors and fonts to dark mode and call-to-action buttons, you can fully customize the look to match your website’s brand without writing any code.

How to Customize the Widget Design

Step 1: Open the Widget Editor

Log in to your Feedspace account, go to Widgets in the left sidebar, and click the pencil (edit) icon on the widget you want to customize.

Step 2: Go to the Design Tab

Inside the widget editor, click the Design tab. This opens the full set of design customization options for your widget.

Step 3: Customize Colors and Fonts

Use the color pickers to set your preferred colors for the card background, text, star ratings, borders, and shadows. Select a font that matches your website’s typography from the font selector.

Step 4: Configure Layout and Display Options

Toggle various display settings to control what appears in your widget:

• Dark mode: Enable a dark background to match dark-themed websites.
• Star ratings: Show or hide the star rating on each review card.
• Autoplay: Automatically cycle through reviews and set the autoplay speed.
• Navigation arrows and indicators: Show or hide navigation controls.
• Border radius: Adjust the roundness of widget cards using the slider.

Step 5: Set Up the Call-to-Action

In the CTA section, you can add a call-to-action button to your widget. Set the button text, destination URL, and button colors to guide visitors to take action after reading your reviews.

Step 6: Save Your Changes

Click Save or proceed to the next tab. Your design changes are applied immediately and will be reflected everywhere the widget is embedded on your website, with no need to update the embed code.

What You Can Do Next

Once you have customized the design, here is what you can do to further improve your widget:

• Preview the widget: Open the widget editor and click the Preview icon to see exactly how your customized widget looks to visitors on your live site.
• Add custom CSS: For advanced styling beyond the built-in options, use the Custom CSS feature to apply your own styles directly to the widget.
• Embed on your website: Once satisfied with the design, copy the embed code from the widget card and paste it into your website builder or HTML.
• Duplicate and create variations: Use the Duplicate option from the three-dot menu to create a copy with a different design for testing or for different pages on your site.