How To Embed The Review Widgets Into Your Website?

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:

<script>
    ;(function (w, d, id, src) {
        if (!w.flowboxReviews) {
          var f = function () {
            f.q.push(arguments)
          }
          f.q = []
          w.flowboxReviews = f
        }
        if (d.getElementById(id)) return
        var s = d.createElement('script'),
          fjs = d.scripts[d.scripts.length - 1]
        s.id = id
        s.async = 1
        s.src = src
        fjs.parentNode.insertBefore(s, fjs)
    })(window, document, 'js-flowbox-rr', 'https://reviews-widget.getflowbox.com/main.js')
</script>

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>
<script>
    window.flowboxReviews('init', {
        container: '#flowbox-minimal-list-widget',
        key: '2e32171d-4afc-40b4-a18d-4ac62b628b11',
        productId: PRODUCT_ID,
        locale: LOCALE,
    })
</script>

It has the following parameters:

container	the ID of the `<div>` where the widget appears	The "container" must match the "id" of the `<div>`
key	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
productId	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
locale	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`

The 'destroy' method for SPA websites

In SPA (single-page application) websites, it's necessary to remove existing Widgets when navigation events are triggered. To achieve this, use the Widget's destroy method before creating a new instance of a Widget.

To remove the existing List Widget, use the following code snippet:

<script>
    window.flowboxReviews('destroy', {
        container: '#flowbox-minimal-list-widget'
    })
</script>

To remove the existing Stars Widget, use the following code snippet:

<script>
    window.flowboxReviews('destroy', {
        container: '#flowbox-stars-widget'
    })
</script>

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

Embed multiple Ratings & Reviews Widgets

Related Articles

What Are The List of Supported Locales?