The Bazaarvoice Personalization Data SDK provides a programming interface for clients to access the BV Personalization API(s) with minimal required configuration. To learn more, go to the Personalization Data SDK documentation home page.

Contents

(+ show- hide)

This section demonstrates injecting product recomendations into a web page as a scrollable carousel. Returning category recommendations as HTML is not an option at this time. Implementing the Product Recommendation Carousel on your web page requires minor development and a configuration in the Bazaarvoice Config Hub. A live demo of the Hosted Carousel is displayed below.

Configurations at Bazaarvoice

Bazaarvoice Config Hub

Once a client has been provisioned for Bazaarvoice Personalizations, configurations for the hosted display are available inside the Config Hub.

To access Config Hub, clients should log into the Bazaarvoice Client Portal. From the landing page, find the "Settings" menu item. From there select the "Manage Applications" option. This will open the Config Hub.

From there you have the option to create a new deployment zone. Read more about creating Deployment Zones

Product Recommendations display settings

Once a personalization deployment zone is created, it needs to be configured. The following display settings are available to customize the Product Recommendations carousel. These settings affect the CSS and not the HTML output.

Settings
Name Options Default Description
Review stars Enabled/Disabled Enabled Enable stars for review averages
Product name Enabled/Disabled Enabled Display the product name.
Product review text Enabled/Disabled Enabled Display product review snippets with each recommendation.
Maximum number of products Integer 20 The maximum number of products to display in the recommendations carousel.
Client specific external CSS URL Text input The URL to additional client-specific CSS that will be loaded by the carousel.

Client side set up

BVLoader

The BVLoader JS file must be present on all the pages where product recommendations are displayed. Read the Setup documentation to learn how to obtain the BVLoader file.

      <html>
      <head>
          <script src="https://apps.bazaarvoice.com/deployments/{client_name}/{deployment_zone}/{environment}/en_US/bv.js" async></script>
      </head>
      <body>
        .....
    

Loading the product recommendations carousel

This basic example requires no custom javascript to request product recommendations. The loader file recognizes the HTML element containing the data-bv-show attribute key/value pair and attaches the carousel.

Usage


            <head>
              
            </head>

              //...some content
              
//...more content

The Product Recommendation hosted display solution only requires a HTML element with the data-bv-show attribute with the value of "ProductRecommendations". It is used to identify the container to insert the HTML.

HTML attributes

Name Type Requirement Description
data-bv-show string required Indicates to the BV Loader to use the Bazaarvoice Personalization Data SDK. Valid values are "ProductRecommendations".
data-bv-page-type string optional Value used for analytics purposes. Valid values include "home" | "category" | "thankyou"
data-bv-slot string required The identifier to fine tune where in the personaliation carousel is injected in HTML code.

Sample embedded hosted carousel

The sample below demonstrates embedding a hosted display Product Recommendation Carousel on a webpage. This carousel has only default styles.