For Curations content to display on a webpage, the page must contain a short Bazaarvoice JavaScript embed snippet. Your Bazaarvoice Engagement Manager will analyze your site and determine which integration option works best for you. They will also help you submit your product catalog feed, which enables product-related features in Curations.

Your implementation team guides you through the process of adding integration code to your site. Your options are to use the recommended BV loader integration code, which is universal across Bazaarvoice products, or to use the standalone Curations integration code:

In addition to the integration code needed to display Curations content on your site, you must submit your product catalog feed to enable product-related features.

The recommended method to integrate Curations into your website is to use the BV loader integration code, which is a script capable of loading several Bazaarvoice products (not just Curations). The BV loader loads the Bazaarvoice JavaScript library, which manages and displays configured features and CGC on your site. The benefit of using the BV loader is that you can use the same asynchronous JavaScript call for different Bazaarvoice products, such as Conversations and Curations, and take advantage of performance improvements and future updates. In the past, Curations required a separate JavaScript call to function, but this method is only supported for legacy purposes and a limited number of unique use cases.

To add the BV loader integration code to your site:

  1. For every page on which you want to display Curations content, add the following HTML code within the <head> tag of the page.
    Note:  If you pay for other Bazaarvoice products, such as Conversations, some of your pages may already include this code, so you may skip this step for those pages.
    <script async src="https://apps.bazaarvoice.com/deployments/<ClientName>/<SiteID>/<Environment>/<Locale>/bv.js"></script>
    

    where:

    • async—Downloads the BV loader asynchronously. This attribute is optional but recommended.
    • src—Specifies the path to the BV loader. Replace the following elements in your HTML:
      • <ClientName>— The client name provided by Bazaarvoice. Remember that this value is case sensitive.
      • <SiteID>—The ID of the deployment zone you want to use. This is set in the Bazaarvoice configuration hub within the Bazaarvoice Workbench. The default deployment zone is “main_site”. Check with your Bazaarvoice representative to ensure the correct ID, or click the gear icon to the right of the deployment zone on the Site Manager page of the configuration hub.
      • <Environment>—The deployment environment where you want to implement Bazaarvoice features. For a production environment, include production in the path. If you are referencing a staging environment, include staging in the path.
      • <Locale>—The locale that is used by the implementation. For example, en_US for English.
  2. Add a <div> to the <body> of the page in the location where Curations content should display.

    <div data-bv-show="curations" attributeName="attributeValue"></div>
    

    where you need to add the following attributes:

    Attribute nameAttribute valueRequired
    data-bv-widget
    Note:  Your implementation team helps you specify the styling and sizing options for the listed display types. The displays shown below are only examples. Consult with your Bazaarvoice representative to customize your styling options.


    bv-carousel—displays content in a carousel.

    bv-grid—displays content in a grid of equally-sized posts. The grid is responsive to its parent container, and provides infinite scroll or a button to load additional posts.

    bv-columns—displays content in a Pinterest-style layout of variably-sized posts. The layout is responsive to its parent container, and provides infinite scroll or a button to load additional posts.
    Yes

    data-bv-display-tagThe display tag associated with the posts you want to display.No, but recommended

    If left blank, the display will return all displayable content in your account.
    data-bv-product-idThe product ID of the product to display Curations content for.Only for PDP displays
    data-bv-category-idThe category ID of the category to display Curations content for.Only for category displays

Example code

The following code block demonstrates an example of implementing Curations using the BV loader. In the example, the client name is “EnduranceCycles”, and the display is for the default main site on the production environment. The display uses a carousel-style layout that contains content tagged with the “road-bikes” display tag.

<html>
<head>
...
	<script async src="https://apps.bazaarvoice.com/deployments/EnduranceCycles/main_site/production/en_US/bv.js"></script>
...
</head>
<body>
...
	<div data-bv-show="curations" data-bv-widget="bv-carousel" data-bv-display-tag="road-bikes"></div>
...
</body>
</html>

Standalone Curations integration code (legacy)

Note:  This is a legacy method for adding Curations integration code. The recommended method is to use the BV loader. However, Bazaarvoice continues to support the standalone integration code described in this section. If your site already uses this legacy code, you do not need to make any updates unless you want to reduce the number of Bazaarvoice JavaScript calls on your site.
  1. Include Bazaarvoice JavaScript embed code on the page you want to display Curations content.
  2. Add a new <div> element to the pages into which Curations will inject consumer-generated content.

    Note: The Bazaarvoice JavaScript snippet will inject the Curations content into this <div> element.

The following is an example of the JavaScript embed code. You’ll add your custom integration code before the closing </body> tag of the page.

<!-- Begin Bazaarvoice Curations Embed Code -->
<script src="//static.curations.bazaarvoice.com/gallery/ClientName/prod-stg/loader.js"></script>
<script type="text/javascript">
BVWidgets.display(
  {
    "display": 'displayID',
    "productId" : 'productID', // productID is only required for product page displays. For category page displays, replace this with "categoryId" : 'categoryID' and provide a valid categoryID.
    "locale" : 'en_US',  // optional
     "tags": ['tag_name', 'tag_name'] // optional
  }, function() { } // Optional callback function.
);
</script>
<div id="curations-container-name"></div>
<!-- End Bazaarvoice Curations Embed Code -->

Make sure you replace:

  • ClientName with your client name.
  • prod-stg with the correct value depending on if you are in production (prod) or staging (stg).
  • displayID with the name of the display tag that should be associated with posts before they appear on the display. If you have multiple display tags you want to pull into the display, use an array: "display": ['displayTag1','displayTag2', 'displayTag3']
  • productID with the product ID used in your product feed. Remove this line if this display isn’t for a product page. However, if you want to display Ratings and Review content you must include a product ID or a category ID even if this display isn’t for a product page. To include a category ID instead of a product ID, use a categoryId field (for example, "categoryId": ['1234']).
  • locale is an optional field. Include it in your code if you want to limit the display to content originating from a specific region. The field also limits the Shop Now feature to product data from a specific locale, including locale-specific product names, descriptions, and product details page URLs, as specified in your product feed.

    The value for the locale is composed of an ISO 639-1 language code and an ISO 3166-2 country code, separated by an underscore (for example, en_GB for English content from the United Kingdom).

  • tags is an optional field that provides backwards compatibility for tags in the Feedmagnet console. If you have migrated from Feedmagnet to Curations 3 and wish to continue using tags to customize your display, replace tag_name with the tags the content should have before appearing in the display.
  • curations-container-name with the Curations widget name provided by Bazaarvoice during implementation. If you have multiple Curations widgets, make sure you use the correct ID here.

Update your integration code for the new Display manager

Note:  You can ignore this section if you already ported the legacy implementation code to the recommended BV loader style.

In March 2018, Curations 3 introduced a Display manager that makes it easier to create the code that renders displays on your site. The Display manager replaces display rules in favor of a more intuitive and feature-rich wizard that guides you through the choices available when creating a new display.

The Display manager generates code in the recommended BV loader style rather than the legacy Curations style. The key differences in the display integration code are:

  • Tags have been deprecated—The new display code does not support tags (also referred to as “content tags”). Instead of tags, the display code uses labels to filter content for a display.
  • Product IDs are specified in their own field—The new display code has a separate field for product IDs. In the old display code, you supplied product IDs as tags.
  • Displays with dissimilar content must have unique display tags—The new display code does not allow displays with the same display tag to have different labels (previously, tags) across separate instances of the display.

Before the deprecation date of March 1, 2019, you must adapt the existing display code on your site to work with the new Display manager and implementation code, as described below.

Stage 1 — Display manager enablement

The Display manager launched in early March, 2018. After this date, the functionality of your existing displays remains the same until the deprecation date (March 1, 2019), with the following exceptions:

  • You cannot view or update the product IDs that apply to a PDP display until you update your integration code, as described in Stage 2.
  • Displays that share a display tag but contain dissimilar content tags (for example, two displays on two different pages that share the display tag “footwear” but show different posts depending on whether they include the content tag “sandals” or “shoes”) will continue to display their intended content without interruption. However, you will have to create unique display tags for these displays prior to the deprecation date.

Stage 2 — Update your integration code before the deprecation date

Complete the following steps to update the integration code for each of your displays:

Tip:  Your Bazaarvoice representative helps you identify which steps are necessary to complete on each of your displays.
  1. Copy your legacy script and div elements to a text editor so you can refer to your existing configuration throughout the upgrade process.
  2. Replace the legacy script and div elements with the recommended integration code. In short, delete your existing script and div elements from your page, add the new script element within the head tag, and add the new div element within the body tag. When adding your tags to the new code, use the data-bv-tags element. To specify multiple tags in the data-bv-tags element, separate them with a comma.

    For example, if your existing display code looks like:

    <script src="//static.curations.bazaarvoice.com/gallery/ClientName/prod-stg/loader.js"></script>
    <script type="text/javascript">
    	BVWidgets.display(
    		{
    			"display": 'footwear',
    			"locale" : 'en_US',
    			"tags": ['sandals', 'pr-sandal-001']
    		}, function() { } // Optional callback function.
    	);
    </script>
    <div id="footwear-display"></div>
    

    Replace it to look like:

    <head>
    ...
    	<script async src="https://apps.bazaarvoice.com/deployments/ClientName/SiteID/Environment/en_US/bv.js"></script>
    ...
    </head>
    <body>
    ...
    	<div data-bv-show="curations" data-bv-widget="bv-carousel" data-bv-display-tag="footwear" data-bv-tags="sandals,pr-sandal-001"></div>
    ...
    </body>
    
    Note:  To obtain the values of the data-bv-widget attribute and the ClientName, SiteID, and Environment fields, refer to the BV loader instructions.
  3. If your tags include a product ID—Move the product ID tag to the data-bv-widget-product-id attribute of the div element.

    Continuing from the previous example, update your div element to look like:

    <div data-bv-show="curations" data-bv-widget="bv-carousel" data-bv-display-tag="footwear" data-bv-tags="sandals" data-bv-product-id="pr-sandal-001"></div>
    
  4. If you share a display tag across displays that show different content—Create unique display tags for each display.

    Continuing from the previous example, suppose you had a second display that shared the “footwear” display tag, but displayed shoes instead of sandals:

    <div data-bv-show="curations" data-bv-widget="bv-carousel" data-bv-display-tag="footwear" data-bv-tags="sandals" data-bv-product-id="pr-sandal-001"></div>
        				
    <div data-bv-show="curations" data-bv-widget="bv-carousel" data-bv-display-tag="footwear" data-bv-tags="shoes" data-bv-product-id="pr-shoes-001"></div>
    

    Because the displays use the same display tag but show posts based on different content tags (“sandals” versus “shoes”), you must change the display tags to be unique, as shown in the following code block.

    <div data-bv-show="curations" data-bv-widget="bv-carousel" data-bv-display-tag="footwear" data-bv-tags="sandals" data-bv-product-id="pr-sandal-001"></div>
        				
    <div data-bv-show="curations" data-bv-widget="bv-carousel" data-bv-display-tag="footwear-shoes" data-bv-tags="shoes" data-bv-product-id="pr-shoes-001"></div>
    
  5. Remove your tags—Contact your Bazaarvoice representative to ensure that your tags have been migrated to labels. If they have, this means the new Display manager will continue to filter the content on your displays correctly after the deprecation date.

    After confirming your tags have been migrated to labels, remove the data-bv-tags attribute from your display code:

    <div data-bv-show="curations" data-bv-widget="bv-carousel" data-bv-display-tag="footwear" data-bv-product-id="pr-sandal-001"></div>
        				
    <div data-bv-show="curations" data-bv-widget="bv-carousel" data-bv-display-tag="footwear-shoes" data-bv-product-id="pr-shoes-001"></div>
    

Advanced implementation options

The following sections describe additional ways to customize your Curations implemenation.

Reset your display configuration using BVWidgets.reset

You may find it useful to reset a Curations display based on shopper interactions. For example, you can provide buttons above a display, and depending on which button a shopper clicks, the display can show posts that belong to different categories, products, display tags, or locales.

The following image shows a display loading content tagged with the ‘Group1’ display tag.

The following image shows the same display loading content tagged with the ‘Group2’ display tag after a shopper clicks the second button.

To reset a display, attach the BVWidgets.reset code to a button interaction or similar event function, such as onclick, as shown in the following example:

var resetDisplay = function() {
	BVWidgets.reset(
		{
			// Reset the original display configuration.
			"display": 'displayID',
			"productId" : 'productID',
			"locale" : 'en_US',  
			"tags": ['tag_name', 'tag_name'] 
		}, function() { } // Optional callback function.
	);
);
			
<button onclick="resetDisplay()">Reset the display with a new configuration</button>

Note:  You must include a full configuration when you reset a display, rather than including only the values you want to change. When you reset a display, images set to display at larger proportions return to the default size.
Tip:  If you pass an empty object to the reset function, the display returns to the default configuration.

Make sure you replace:

  • displayID with the name of the display tag that should be associated with posts before they appear on the display. If you have multiple display tags you want to pull into the display, use an array: "display": ['displayTag1','displayTag2', 'displayTag3']
  • productID with the product ID used in your product feed. Remove this line if this display isn’t for a product page. However, if you want to display Ratings and Review content you must include a product ID or a category ID even if this display isn’t for a product page. To include a category ID instead of a product ID, use a categoryId field (for example, "categoryId": ['1234']).
  • locale is an optional field. Include it in your code if you want to limit the display to content originating from a specific region. The field also limits the Shop Now feature to product data from a specific locale, including locale-specific product names, descriptions, and product details page URLs, as specified in your product feed.

    The value for the locale is composed of an ISO 639-1 language code and an ISO 3166-2 country code, separated by an underscore (for example, en_GB for English content from the United Kingdom).

  • tags is an optional field that provides backwards compatability for tags in the Feedmagnet console. If you have migrated from Feedmagnet to Curations 3 and wish to continue using tags to customize your display, replace tag_name with the tags the content should have before appearing in the display.

Include a mix of larger and smaller posts in a display

By default, displays show uniformly-sized posts (such as in grid layouts) or a mix of wide versus tall posts (such as in column layouts). If you want to specify certain images to display more prominently within a grid or column layout, reach out to your implementation team. By making a configuration change to the displays in question, your implementation team enables you to render some posts at normal size and other others at a larger size of your preference. These posts are often referred to as “2x2” posts because it is popular to render them at twice the original width and height, but you can select any proportion of width and height that you’d like (such as “2x1” or “3x2”).

Note:  If you reset the configuration for a display that renders some posts at larger proportions, all the posts will display at the same size.

The following image is an example of a 2x2 post that renders at twice the default width and height.

Submit your product catalog feed

A successful Curations implementation depends on submitting and maintaining data about your product catalog. Curations uses feed elements such as your product and category IDs to enable search, product tagging, reporting, and display features. You submit a product catalog feed through Bazaarvoice Workbench.

To learn how to submit a product catalog feed, refer to the Product catalog topic in the Conversations knowledge base.

Import social media content

To import social media content collected before Curations was implemented on your website, you can send a social content import to Bazaarvoice. The social content import is an Excel spreadsheet that defines social media content that was collected by your homegrown solution or third-party provider. The procedures described in this section are not required to implement Curations, but can be useful if you would like to continue using an existing set of social media content without having to collect it again. If you do not have the resources to produce a social content import in the documented format, Bazaarvoice may be able to convert this data for you at a price.

Import content collected through social media channels

Complete the following steps to import content collected through social media channels, such as Instagram or Twitter:

  1. Create an Excel spreadsheet with the following columns.

    URL—The link to the social media post.
    Labels (Optional)—Any label used to classify the content. You can include multiple labels by separating them with a forward slash, /.
    Product Ids (Optional)—If the post shows a product, the product ID must be unique to the product. You can include multiple product IDs by separating them with a forward slash, /.

    Note:  The product ID should be the same identifier used in your product catalog. If you create an export of your social media content from another provider, the IDs may not match, so you will have to modify the value before sending the data to Bazaarvoice.

    Incentivized—Whether or not the author was incentivized to create the post. Either true or false.
    Approved—Whether or not the post has been approved by your company for use on your site. Either true or false.
    Bypass AP—Whether or not to bypass requesting permission from the author to use the post on your site. The most common use cases for bypassing the author permission process is when the post is from your official social media accounts, when the post is from a channel that does not require asking authors permission to reuse their posts (only Instagram and Twitter require that you request author permissions), or when an author has already granted you permission to reuse their post. Either true or false.

    The following table demonstrates an example of the spreadsheet.

    URLLabelsProduct IdsIncentivizedApprovedBypass AP
    https://www.instagram.com/p/BH3Tp6kjp4sBaseball/SportsProd123/Prod456FalseTrueFalse
  2. Send the spreadsheet to your implementation team.

Import content collected from shoppers

Complete the following steps to import content that is not hosted on a social media channel. This import is meant for content collected directly from shoppers, such as content collected through an email or direct upload to your site:

  1. Create an Excel spreadsheet with the following columns.

    URL—The link to the image or video file on your storage solution.
    Labels (Optional)—Any label used to classify the content. You can include multiple labels by separating them with a forward slash, /.
    Product Ids (Optional)—If the post shows a product, the product ID unique to the product. You can include multiple product IDs by separating them with a forward slash, /.

    Note:  The product ID should be the same identifier used in your product catalog. If you create an export of your social media content from another provider, the IDs may not match, so you will have to modify the value before sending the data to Bazaarvoice.

    Incentivized—Whether or not the author was incentivized to create the post. Either true or false.
    Username—The username or nickname the author used when submitting the post.
    Comment (Optional)—Any comments the author supplied about the post.

    The following table demonstrates an example of the spreadsheet.

    URLLabelsProduct IdsIncentivizedUsernameComment
    https://scontent.cdninstagram.com/t51.2885-15/e15/11428127_1589478634664603_1778918428_n.jpgDogs/OutdoorsProd123/Prod456FalseAustin_BobWoof!
  2. Send the spreadsheet to your implementation team.