1. Home
  2. Display Reviews on Your Website
  3. Customize Data Only Layout for Review Widget

Customize Data Only Layout for Review Widget

Using the Data Only layout for the Review Widget and your own CSS you can fully customize how the review and customer feedback data from GatherUp is displayed on your website.

The following is intended for users with good CSS and HTML knowledge. Please contact your webmaster if you are not sure how to access or use your websites CSS file(s).

Any pre-build color scheme (Default, Orange, Legacy etc) can be overwritten locally with CSS. If “big” changes are required we recommend using the “No Style | Data Only” scheme option. As the name implies no styles will be included with the testimonials widget allowing you to add your own even more easily.

no-styles-data-only-testimonials-widget

1) The GatherUp Widget has several different div classes. All of which can have their own css applied on your end and which will overwrite the “out of the box” defaults.

2) The maximum width of the responsive GatherUp widget is by default 500px.

3) To identify desired div classes we recommend using the “Inspect Element” option in your Chrome browser or the “Firebug” Add-on for Firefox.

4) Below are a few common examples. Please note that the examples are *not* a complete list of all CSS classes found in the GatherUp Testimonial Widget. Refer to item #3 above on how to identify all classes in order to modify them to your needs.


Color CSS – Use a hex color number of choice. Example: #ccc

#e2wget5widget {color: #____ !important;}
[Note: Above code applies style to entire widget. Alternatives below.]

#e2wget5widget h2 {color: #____ !important;}

#e2wget5widget h4 {color: #____ !important;}

#e2wget5widget p {color: #____ !important;}

#e2wget5widget a {color: #____ !important;}


Font Family and Font Size CSS

#e2wget5widget {font-family: #____ !important; font-size: __px !important;}
[Note: Above code applies style to entire widget. Alternatives below.]

#e2wget5widget h2 {font-family: ____ !important; font-size: __px !important;}

#e2wget5widget h4 {font-family: ____ !important; font-size: __px !important;}

#e2wget5widget p {font-family: ____ !important; font-size: __px !important;}

#e2wget5widget a {font-family: ____ !important; font-size: __px !important;}


Width CSS – Insert a width in Pixel of choice. Example: 700px

#e2wget5widget {max-width:____ !important;}

#e2wget5widget span.e2whr{max-width:____ !important;}

#e2wget5widget .e2wdescription p {max-width:____ !important;}


Changing the “Leave Us Feedback” image button (“Legacy” Color Scheme only).

Click here to see the “default” feedback request image as reference for creating your own.

.e2get5writeReviewLink {background: url(‘http://www.your-domain.com/feedback-request.png’) no-repeat !important;}

Other Color Schemes (Default, Orange and Transparent etc) are using CSS3 to create the button. The div class .e2get5writeReviewLink remains the same however.


Changing the “Stars” image (active and passive are one image).

Click here to see the “default” stars image as reference for creating your own.

#e2wget5widget .get5_stars .e2wrating .e2w-active-stars, #e2wget5widget .get5_stars .e2wrating .e2w-inactive-stars {background-image: url(‘http://www.your-domain.com/stars.png’) !important;}



CSS Selectors for the “Badge”

id selectors :

e2wget5sectionbadge
e2w-average
e2w-bigstar
e2w-add-paddingbadge
e2wget5poweredbybadge

class selectors :

e2wget5section
e2wUuidbadge
e2w-theme-allinclusive
e2w-new-theme
e2w-lang-en
e2w-average
e2wcount
e2w-arating
e2waverage
e2woutof
e2wbest
full-star
half-star
e2w-add-padding
e2w-businessname
align-center
e2w-view-testimonials-link
e2wget5poweredby


Pro Tip:

​If you would like to create your own custom display solution you may also be interested in our API which allows you to receive all feedbacks as raw data feed. More here: https://GatherUp.com/api/doc/feedbacks/get

We also offer a Json endpoint for getting a raw data feed of your GatherUp testimonials.

Updated on May 20, 2019

Was this article helpful?

Related Articles