Feefo Optimised Widgets

To continuously improve the Feefo review widget offering, we have enhanced our review widgets with an optimised widget setting, enabled within the Feefo Hub (https://hub.feefo.com/marketing/review-widgets).



This setting will apply to any Feefo review widget content you have already applied to your website as well as any going forward.

Benefits from this setting include a boost in SEO ranking, page performance, load time, enhanced interactivity and better visual stability to help make customer experience smoother.


Before you enable optimised widgets

For most Feefo review widget integrations, you will be able to enable optimised widgets immediately and enjoy the benefits.

However, to achieve these benefits, and provide a more stable experience with our review widget integrations moving forward, we have had to change some of the background styling of our widgets.

This means, any further styling to Feefo review widget integrations made through customisation on your website, may be subject to changes.

These changes being that some classes Feefo used to style review widgets in the past have been re-named. If you have styled these classes yourself in the past, they may revert to default Feefo branding, requiring you to customise the Feefo review widgets again through a re-named class in order to revert back to your own styling.


Checking your websites styling

You will likely know if you have stylised the Feefo review integration widgets on your website, but if not, you can find out directly on your website using a web browser's advanced tools.

Styling will typically come in the form of visual colour changes to our stars, such as the below examples.



Using Google Chrome as an example, you can visit a webpage with at least one Feefo review integration widget applied, then open the developer tools with F12, CTRL+SHIFT+J or CTRL+OPTION+J.

From here, navigate to the Network tab, click the CSS option and refresh the page with F5 or the reload page icon.



Your websites styling sheets will load into view. If you click on the styling sheet, and navigate to the Preview tab, you can search within it, using CTRL+F, looking for feefowidget content. If you encounter any stylisation, you may need to make some changes to your website before enabling optimised widgets.



If you aren't sure, or would like further advice, we would be more than happy to answer any enquiries directly by emailing support@feefo.com.


Updated classes

Please find below references of previous options for customisation and new classes we use now to help you customise widgets.  

Before 

Now 

/* This changes the on-page title font, weight and size */ 

div.feefowidget-header-information-title h2 { 
    font-family: "Courier New", Courier, monospace!important; 
    font-size:30px!important; 
    font-weight:10!important; 
    color: #1265EE!important; 
} 

No changes 

/* This is Feedback based on X reviews */ 

.feefowidget-header-reviews-title.feefowidget-header-reviews-title-no-floating { 
    font-family: "Courier New", Courier, monospace!important; 
    font-size:15px!important; 
} 

No changes 

/* This is the star colour (carousel) */ 

.feefowidget-star.feefowidget-icon.feefowidget-icon-star-o.feefowidget-star-colour-  { 
    color: #1265EE!important; 
} 


/* This is the star colour for any widget*/ 

.feefowidget-rating-stars path { 
    fill: #1265EE!important; 
} 

/* This is the star colour (carousel) */ 

.feefowidget-star.feefowidget-icon.feefowidget-icon-star.feefowidget-star-colour-   { 
    color: #1265EE!important; 
} 


/* This is the star colour for any widget*/ 

.feefowidget-rating-stars path { 
    fill: #1265EE!important; 
} 

/* This is the star colour (on-page) */ 

.feefowidget-star.feefowidget-icon.feefowidget-icon-star.feefowidget-star-colour-yellow { 
    color: #1265EE!important; 
} 


/* This is the star colour for any widget*/ 

.feefowidget-rating-stars path { 
    fill: #1265EE!important; 
} 

/* This is the star container colour */ 

.feefowidget-star.feefowidget-icon.feefowidget-icon-star-o.feefowidget-star-colour-yellow { 
    color: #1265EE!important; 
} 

/* This is the star container colour */ 

.feefowidget-rating-stars { 
    color: #1265EE !important; 
} 

/* This is the customer name colour */ 

.feefowidget-feedbacks-item .feefowidget-section-rating .feefowidget-display-name { 
    font-family: "Courier New", Courier, monospace!important; 
    color: #1265EE!important; 
} 

/* This is the customer name colour */ 

.feefowidget-comment-user { 
  font-family: "Courier New", Courier, monospace!important; 
  color: #1265EE!important; 
} 

/* This is the thumbs up colour */ 

.feefowidget-icon.feefowidget-icon-thumbs-up { 
    color: #1265EE!important; 
} 

/* This is the thumbs up colour */ 

.feefowidget-icon-thumbs-up path { 
    fill: #1265EE !important; 
} 

/* This is the share colour */ 

.feefowidget-icon.feefowidget-icon-share { 
    color: #1265EE!important; 
}


/* This is the share colour */ 

.feefowidget-icon-share path { 
    fill: #1265EE !important; 
} 
.feefowidget-rating-stars.feefowidget-star { 
    color: #1265EE!important; 
} 

 

/* This is the star colour for any widget*/ 

.feefowidget-rating-stars path { 
    fill: #1265EE!important; 
} 

/* Add this to remove the Product Title */ 

feefowidget-merchant-header .feefowidget-header-information-title { 
    display:none !important; 
} 

 

/* Add this to remove the Product Title */ 

.feefowidget-header-information-title { 
    display:none !important; 
} 

/* This turns off the badge wrapper background */ 

feefowidget-logo-small  { 
background-color: unset; 
} 

Removed