All Collections
Ratings & Reviews
Implementing Ratings & Reviews
How To Embed The Review Widgets Into Your Website?
How To Embed The Review Widgets Into Your Website?

A generic guide on how to implement and display your Review Widgets on your website

Written by Borbala Borocz
Updated over a week ago

To display a Ratings & Reviews widget on your website, you need to add a few small snippets to your site's templates.

How to find the code snippets of the widget

STEP 1: Click 'Ratings and Reviews'.

STEP 2: Go to 'Widgets' under Display.

STEP 3: Create a new widget or go to one of the existing widgets that you want to embed into your page.

STEP 5: Click the top right button “Copy Code”. You will see two code snippets in the popup: the JavaScript code and the HTML code.

How to add the JavaScript code of the general script

STEP 6: Copy the JavaScript code and insert it into your page inside the <head> or <body> element (about inserting it into the <body>, please read the note below the code).

This snippet is the general script that enables the Ratings & Reviews widgets to function correctly:

;(function (w, d, id, src) {
if (!w.flowboxReviews) {
var f = function () {
f.q = []
w.flowboxReviews = f
if (d.getElementById(id)) return
var s = d.createElement('script'),
fjs = d.scripts[d.scripts.length - 1] = id
s.async = 1
s.src = src
fjs.parentNode.insertBefore(s, fjs)
})(window, document, 'js-flowbox-rr', '')

If you have a reason for not wanting to place the JavaScript code in your <head> element, you can instead place it within the <body> element of the page where you want to display the widget (usually on product detail pages). However, ensure that you insert this general JavaScript code (step 6) before any widget HTML codes (step 7) for it to work correctly.

How to add the HTML code to display the widget

STEP 7: Copy the HTML code and insert it into your page at the position where you want to display the widget.

This code is responsible for displaying your selected widget at a specific position on your site. It has two parts:

  • a <div> that positions the widget at the desired part of the website

  • a <script> with the init function that initializes the content of the widget from Flowbox

<div id="flowbox-minimal-list-widget"></div>
window.flowboxReviews('init', {
container: '#flowbox-minimal-list-widget',
key: '2e32171d-4afc-40b4-a18d-4ac62b628b11',
productId: PRODUCT_ID,
locale: LOCALE,

It has the following parameters:


the ID of the <div> where the widget appears

  • The "container" must match the "id" of the <div>


the widget key that is specific to your selected widget

  • You can obtain it from the Flowbox dashboard when you click on "Copy Code" for your selected widget


the ID of the product for which you want to display a widget

  • It must be the same ID that is used in the Product Catalog as an identifier. We recommend using gtin as productId.

  • You should insert the product ID dynamically for product detail pages

  • If the productId is not provided, the widget will display all reviews for the company and the average rating of all the products


the set of specific regional and language settings used by the widget

  • The locale needs to have both a language and a country code to work correctly

  • If the value is not a supported locale, it will default to en-gb

To embed multiple Ratings & Reviews widgets on one single page (for example, one Star Widget and one List Widget), please follow the following guide:

Related Articles

Did this answer your question?