TABLE OF CONTENTS


Introduction


At Feefo, we are committed to continuously enhancing our products and services to provide our customers with the best experience possible. As part of this effort, we are excited to introduce the Optimised Widget Setting, an upgrade to our review widgets, now available in the Feefo Hub (https://hub.feefo.com/marketing/review-widgets). This enhancement brings numerous benefits, including improved SEO ranking, enhanced page performance, reduced load time, increased interactivity, and better visual stability, all aimed at creating a smoother customer experience.



Before You Enable Optimised Widgets


For most Feefo review widget integrations, you can immediately enable optimised widgets and start enjoying the benefits. This setting applies not only to your existing Feefo review widgets but also to any future widgets you may add to your website.


However, to achieve these benefits and ensure a stable experience with our review widget integrations moving forward, we have made some changes to the background styling of our widgets. As a result, any further customisations you made to Feefo review widget integrations on your website may be subject to changes.


Please note that some classes previously used by Feefo to style review widgets have been re-named. If you have previously customised these classes, they may revert to the default Feefo branding. To maintain your custom styling, you will need to make adjustments using the re-named classes.


Checking Your Website's Styling


If you have stylized the Feefo review integration widgets on your website, you can easily verify this using your web browser's advanced tools. Styling typically involves visual color changes to the stars, as shown in the examples below:


 

As an example, for Google Chrome users, follow these steps:


  1. Visit a webpage with at least one Feefo review integration widget applied.
  2. Open the developer tools with F12, CTRL+SHIFT+J, or CTRL+OPTION+J.
  3. Navigate to the Network tab, click the CSS option, and refresh the page with F5 or the reload page icon.
  4. Your website's styling sheets will load into view. Search for "feefowidget" content within the styling sheet using CTRL+F. If you find any stylization, you may need to make some changes to your website before enabling optimised widgets.



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 [email protected].



Updated classes


As part of the transition to optimised widgets, below are references to previous options for customization and the new classes we now use to help you customize 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; 
}

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


.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