How To Embed Multiple Ratings & Reviews Widgets Into One Page?

Before you read this article, please ensure you're familiar with embedding one single Review Widget, as described in this guide.

If you want to embed multiple Ratings & Reviews widgets onto one page, such as a Star Widget at the top of a product detail page and a List Widget at the bottom, consider the following:

the JavaScript code should be inserted once per page
the HTML code should be inserted once per widget, so multiple times for multiple widgets

The JavaScript code of the general script

Place the JavaScript code of the general script either in the <head> element or the <body> element before the HTML code for any of the widgets.

<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>

The HTML codes to display each widget

The HTML codes should be inserted for each widget separately at the position where you want that widget to appear on the page.

To embed a widget (a Star Widget in this example) somewhere on the page, insert its code at the desired position. Make sure to use the correct key that belongs to this widget.

<div id="flowbox-stars-widget"></div>
<script>
    window.flowboxReviews('init', {
        container: '#flowbox-stars-widget',
        key: '15386485-16fb-452b-abf3-c8f1beb29986',
        productId: PRODUCT_ID,
        locale: 'en-gb',
    })
</script>

To embed another widget (a List Widget in this example) somewhere else, insert its code at the desired position. Again, make sure to use the correct key that belongs to this widget.

<div id="flowbox-minimal-list-widget"></div>
<script>
    window.flowboxReviews('init', {
        container: '#flowbox-minimal-list-widget',
        key: 'bfe321cf-89f7-4d7c-a19d-0d10956206a3',
        productId: PRODUCT_ID,
        locale: 'en-gb',
    })
</script>

You can change the container IDs to whatever you wish. You just have to ensure that the id in the <div> must match the container parameter in the <script> of that specific widget to initialize the content of the widget correctly.

IMPORTANT:

When you embed more than one Review Widget into one page, they must have different container IDs.

In the above example, we've used two different IDs for the two widgets:

First widget: "flowbox-stars-widget"
Second widget: "flowbox-minimal-list-widget"

But if you want to implement two Star Widgets on the same page, you have to ensure to give them different IDs, such as:

First widget: "flowbox-stars-widget-1"
Second widget: "flowbox-stars-widget-2"