This guide provides the initial technical setup that you must complete in order to collect and display consumer-generated content (CGC) on your site.

Step 1: Granting Bazaarvoice access to the development website

Your technical team must grant Bazaarvoice access to a development website without the need for a VPN client or other type or remote access, per the details of your contract. No changes or updates are made to your code. If your staging environment resides behind a firewall, open port 80 or a non-standard port of your choosing to the following IP addresses and ranges.

IP AddressLocation
24.155.144.0/27Austin, USA
216.166.20.0/26Austin, USA
217.68.253.189/32London, UK
220.233.192.62Sydney, AU
64.132.218.184/29New York, USA
195.160.232.0/22Lviv, UA
201.197.105.230San José, Costa Rica
200.30.189.70San José, Costa Rica
201.198.254.50San José, Costa Rica
201.198.254.161San José, Costa Rica

Step 2: Integration on the submission page

Place the following example code within the head element of the submission container page that you created:

<script type="text/javascript" src="//default.ugc.bazaarvoice.com/bvstaging/static/1235-en_us/bvapi.js"></script>
<script type="text/javascript">
    $BV.ui("submission_container", {
        userToken: "XXXXX"
    });
</script>
        

Then place the following code where you want the submission form to appear:

<div id="BVSubmissionContainer"></div>

Once you create the submission form, you will use the URL of this page as the submissionContainerUrl when you integrate your display features. See our documentation on the submission page for more information about authentication and how to generate user strings.

Step 3: Integrating display features

Add the Bazaarvoice JavaScript API by placing the following example code in the head element on every page where you want to display Bazaarvoice content.

<script type="text/javascript" src="//default.ugc.bazaarvoice.com/bvstaging/static/1235-en_us/bvapi.js"></script>
<script type="text/javascript">
    $BV.configure("global", {
        submissionContainerUrl: "http://client.com/submissionPage.html"
    });
</script>

Step 4: Container placement

Place the following div element on every product page where you want to display the corresponding content summary and the actual content, respectively.

Content Summary <div id="XXXXSummaryContainer"></div>

Actual Content <div id="XXXXContainer"></div>

…where the following four letters should replace XXXX:

Ratings & Reviews - BVRR // Question & Answer - BVQA // Campaigns - BVSY

Step 5: Integration on product pages

Verify that the div elements have been inserted, then make the following $ BV.ui() call to load content into the div elements that you inserted during the previous step:

Ratings & Reviews

Integrating with Product Pages

<script type="text/javascript">
    $BV.ui("rr", "show_reviews", {
        productId: "XXXXX"
    });
</script>

Questions & Answers

Integrating with Product Pages

<script type="text/javascript">
    $BV.ui("qa", "show_questions", {
        productId: "XXXXX",
        subjectType: "product"
    });
</script>

Integrating with Category Pages

<script type="text/javascript">
    $BV.ui("qa", "show_questions", {
        categoryId: "XXXXX",
        subjectType: "category"
    });
</script>

Campaigns

Integrating with Product Pages

<script type="text/javascript">
    $BV.ui("sy", "show_stories", {
        productId: "XXXXX",
        subjectType: "product"
    });
</script>

Integrating with Category Pages

<script type="text/javascript">
    $BV.ui("sy", "show_stories", {
        categoryId: "XXXXX",
        subjectType: "category"
    });
</script>

where XXXXX represents the ID of the product that is displayed on the page. This value must match the ID that is associated with the product in the data feed. We recommend that you place this code in the head element.

Full HTML Example - Submission Page

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>Bazaarvoice Test Integration</title>
    <script type="text/javascript" 
        src="//default.ugc.bazaarvoice.com/bvstaging/static/1235-en_us/bvapi.js">
    </script>
</head>
<div>
    <div id="BVSubmissionContainer"></div>
    <script type="text/javascript">
        $BV.ui("submissionContainer", {
            userToken: "XXXX"
        });
    </script>
</div>
</html>

Full HTML Example - Product Page

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>Bazaarvoice Test Integration</title>
    <script type="text/javascript" 
        src="//default.ugc.bazaarvoice.com/bvstaging/static/1235-en_us/bvapi.js">
    </script>
    <script type="text/javascript">
        $BV.configure("global", {
            submissionContainerUrl: "http://client.com/submissionPage.html"
        });
    </script>
</head>
<div>
    <div id="BVRRSummaryContainer"></div>
    <div id="BVRRContainer"></div>
    <script type="text/javascript">
        $BV.ui("rr", "show_reviews", {
            productId: "XXXX"
        });
    </script>
</div>
</html>