Documentations

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Seller Rating Widget

How To Guide: Add the Seller Ratings Widget

Bizrate Insights’ Seller Ratings Widget allows you to display your overall site reviews collected through the Bizrate Insights Online Buyer Survey. The Seller Ratings Widget includes an overall score (represented by stars), along with customer comments, helping you to gain credibility and trust with potential customers.

To begin displaying reviews through Bizrate’s Seller Ratings Widget, you will need to add the widget code to your site. The code can be added to any page you choose, but we recommend a top-level page like the homepage.

Learn more about the Seller Ratings Widget here and access implementation instructions and frequently asked questions below.

Seller Ratings Widget Implementation Instructions

Below are 3 different ways to add the Bizrate Insights Seller Ratings Widget to your site.  Please note that you must use your site’s Merchant ID (MID) in order to get the correct reviews.  If you have more than one site, simply provide the correct MID per site.  If you do not see an MID listed, contact your account manager or bizrateinsights@bizrate.com for help finding your MID. Feel free to also reach out if there is a popular implementation method you do not see here, and wish for us to include.

These instructions are a good starting point for integration, but you may need to make adjustments based on your site setup.

Static HTML Page

Place a <div> element with id bri-widget-container in the location where you want it to appear on your page (see below). This is the main container where the review content will be displayed.

<div id="bri-widget-container" />

Then, in the same page, just before the closing </body> tag, place the following <script> element that will make the call to retrieve your data and widget styling.

<script> (function(){ // Ensures that the script to populate seller widget only runs once if (document.getElementById('bri-widget-script')) { return; } // Fetch script to populate seller rating widget and execute it var script = document.createElement('script'); script.async = true; script.id = 'bri-widget-script'; script.type = 'text/javascript' script.src = 'https://widget.bizrate.com/review/<<insert_your_mid_here>>.js'; document.body.appendChild(script); })(); </script>

React: Function Component

If you are working with a modern version of React, you’ll be working with functional components. After creating the SellerRatingWidget function component, we can then import it anywhere in our app (replace ./path/to/SellerRatingWidget with the actual path to your SellerRatingWidget) via

import SellerRatingWidget from "./path/to/SellerRatingWidget";

and use it (replace <your mid here> with your MID) as:

<SellerRatingWidget mid={<your mid here>} />

JavaScript

Create the SellerRatingWidget function component in a file called SellerRatingWidget.jsx with the following contents:

import {useEffect} from "react";

const SCRIPT_CONTAINER_ID = 'bri-widget-container'
const SCRIPT_ID = "bri-widget-script";

/**
 * Creates the Bizrate seller rating widget,
 *
 * @param {{ mid: string; }} mid - the merchant ID of the seller to populate the Bizrate seller rating widget for
 * @returns {JSX.Element} - the bizrate seller rating widget
 */
export default function SellerRatingWidget({ mid }) {
    useEffect(() => {
        // Ensures that the script to populate seller widget only runs once
        if (document.getElementById(SCRIPT_ID)) {
            return;
        }
        // Fetch script to populate seller rating widget and execute it
        const script = document.createElement('script');
        script.async = true;
        script.id = SCRIPT_ID;
        script.type = "text/javascript"
        script.src = `https://widget.bizrate.com/review/${mid}.js`;
        document.body.appendChild(script);
        // Remove script to populate seller rating widget on unmount
        return () => {
            const script = document.getElementById(SCRIPT_ID);
            if (script) {
                document.body.removeChild(script);
            }
        };
    }, [mid]);
    return <div id={SCRIPT_CONTAINER_ID}/>;
}

TypeScript

Create the SellerRatingWidget function component in a file called SellerRatingWidget.tsx with the following contents.

import {FC, useEffect} from "react"; const SCRIPT_CONTAINER_ID = 'bri-widget-container' const SCRIPT_ID = "bri-widget-script"; interface SellerRatingWidgetProps { mid: string; } const SellerRatingWidget: FC<SellerRatingWidgetProps> = ({ mid }) => { useEffect(() => { // Ensures that the script to populate seller widget only runs once if (document.getElementById(SCRIPT_ID)) { return; } // Fetch script to populate seller rating widget and execute it const script = document.createElement('script'); script.async = true; script.id = SCRIPT_ID; script.type = "text/javascript" script.src = `https://widget.bizrate.com/review/${mid}.js`; document.body.appendChild(script); // Remove script to populate seller rating widget on unmount return () => { const script = document.getElementById(SCRIPT_ID); if (script) { document.body.removeChild(script); } }; }, [mid]); return <div id={SCRIPT_CONTAINER_ID}/>; } export default SellerRatingWidget;

React: Class Component (Legacy)

If you are working with an older version of React, you’ll most likely be working with class components. After creating the SellerRatingWidget class component, we can then import it anywhere (replace ./path/to/SellerRatingWidget with the actual path to your SellerRatingWidget) in our app via

import SellerRatingWidget from "./path/to/SellerRatingWidget";

and use it (replace <your mid here> with your MID) as:

<SellerRatingWidget mid={<your mid here>} />

JavaScript

Create the SellerRatingWidget class component in a file called SellerRatingWidget.jsx with the following contents:

import {Component} from "react"; const SCRIPT_CONTAINER_ID = 'bri-widget-container' const SCRIPT_ID = "bri-widget-script"; class SellerRatingWidget extends Component { componentDidMount() { // Ensures that the script to populate seller widget only runs once if (document.getElementById(SCRIPT_ID)) { return; } // Fetch script to populate seller rating widget and execute it const {mid} = this.props; const script = document.createElement('script'); script.async = true; script.id = SCRIPT_ID; script.type = "text/javascript" script.src = `https://widget.bizrate.com/review/${mid}.js`; document.body.appendChild(script); } componentWillUnmount() { // Remove script to populate seller rating widget on unmount const script = document.getElementById(SCRIPT_ID); if (script) { document.body.removeChild(script); } } render() { return <div id={SCRIPT_CONTAINER_ID}/> } } export default SellerRatingWidget;

TypeScript

Create the SellerRatingWidget class component in a file called SellerRatingWidget.tsx with the following contents:

import {Component} from "react"; const SCRIPT_CONTAINER_ID = 'bri-widget-container' const SCRIPT_ID = "bri-widget-script"; interface SellerRatingWidgetProps { mid: string; } class SellerRatingWidget extends Component<SellerRatingWidgetProps> { componentDidMount() { // Ensures that the script to populate seller widget only runs once if (document.getElementById(SCRIPT_ID)) { return; } // Fetch script to populate seller rating widget and execute it const {mid} = this.props; const script = document.createElement('script'); script.async = true; script.id = SCRIPT_ID; script.type = "text/javascript" script.src = `https://widget.bizrate.com/review/${mid}.js`; document.body.appendChild(script); } componentWillUnmount() { // Remove script to populate seller rating widget on unmount const script = document.getElementById(SCRIPT_ID); if (script) { document.body.removeChild(script); } } render() { return <div id={SCRIPT_CONTAINER_ID}/> } } export default SellerRatingWidget;

Bizrate Insights Seller Ratings Widget FAQs

Which reviews are displayed?

  • Reviews that contain both an OSAT (Overall Satisfaction) Score and Comment from either the Point-of-Sale or Fulfillment Survey are eligible to be displayed.

How many reviews are displayed?

  • Up to 20 reviews are included in the widget carousel, with a maximum of 3 displayed. Depending on the widget’s size and placement, fewer reviews may be displayed, but the carousel will maintain your most recent 20.

How do I choose the date range?

  • The widget will pull the most recent Point-of-Sale and Fulfillment comments to reach a total of 20 reviews.

Can I set the comment tone?

  • Currently, you can only select the minimum score.

How do the stars translate to customer scores?

  • Bizrate Insights uses a 1-10 scale represented by a 5-star scale in the widget. Each score is represented by ½ star. For example: 9 = 4.5 Stars; 6 = 3 stars, etc.

How do I provide feedback about the widget and future needs?

  • We want your feedback! Please contact your Account Manager or bizrateinsights@bizrate.com to ask questions, provide feedback, or make suggestions for future iterations.

Powered by BetterDocs