---
title: "How To Embed The Review Widgets Into Your Website?"
url: "https://kb.getflowbox.com/en/article/how-to-embed-the-review-widgets-into-your-website"
language: "en"
last_updated: "2026-06-15T09:38:13.450Z"
---

# How To Embed The Review Widgets Into Your Website?

A generic guide on how to implement and display your Review Widgets on 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

![](https://cdn-assets.productfruits.com/7ebefa0c-c431-46bf-a3da-36b2ff1154b9)

**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 4:** [Design your widget](https://kb.getflowbox.com/en/article/how-to-design-your-review-widget).

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

![](https://cdn-assets.productfruits.com/cd903d8d-b5b7-4930-9475-0bebebb66d5e)

## 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 notebelow 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,](https://kb.getflowbox.com/en/article/what-are-the-list-of-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](https://kb.getflowbox.com/en/article/how-to-embed-multiple-ratings-reviews-widgets-into-one-page)

### **Related Articles**

-   [What Are The List of Supported Locales?](https://kb.getflowbox.com/en/article/what-are-the-list-of-supported-locale)  
    ​