A container page is a generic HTML document that Bazaarvoice uses to create dedicated submission pages that are hosted on your website. The page acts as a container for submission forms, like a Ratings & Reviews form. Bazaarvoice always directs mobile submission requests to a container page, but you can decide whether non-mobile submission requests open on a container page or a lightbox on the product display page (PDP).

Note: As a best practice, use the Bazaarvoice hosted container page for mobile submission requests. We don't recommend hosting your own container page.
In-depthQuick StartCheck Your Work

How do container pages impact the customer's experience?

The impact of container pages depends on whether the customer accesses the submission form from a mobile or non-mobile device. Refer to the following descriptions and examples for details.

Mobile submissions

Mobile requests always open submission forms in a container page. If you do not set up and host your own container page, Bazaarvoice will open a default, generic submission form on a page with a Bazaarvoice URL.

Non-mobile submissions with container page

When you use the container page, non-mobile submission requests can open a page that looks like a dedicated submission page to customers. When a customer selects a review link in a post-interaction email message, the link opens the review submission form on a dedicated submission page instead of the PDP.

Non-mobile submissions without a container page

If you do not send non-mobile submission requests to a container page, the submission form opens in a lightbox on the PDP.

Create and host a container page

While Bazaarvoice provides a generic container page for mobile requests, the page has a Bazaarvoice URL. If you do not want customers to see a non-branded URL, complete the following steps to create and host your own container page:

  1. Create a blank HTML document and add only the following code:
    2. <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <title></title>
    <meta name="robots" content="noindex, nofollow">
    <link rel="canonical" href="container.htm"/>
    <meta name="bv:pageType" content="container">
  </head>
  <body>
    <script async src="https://apps.bazaarvoice.com/deployments/<client_name>/<site_ID>/<environment>/<locale>/bv.js"></script>
  </body>
</html>

    Note: If your existing implementation uses the scout file (bvapi.js), your HTML document should look similar to the following:

    <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <title></title>
    <meta name="robots" content="noindex, nofollow">
    <link rel="canonical" href="container.htm"/>
  </head>
  <body>
    <script type="text/javascript" src="https://display.ugc.bazaarvoice.com/bvstaging/static/<client_name>/<site_ID>/<locale>/bvapi.js"></script>
    <script>
      $BV.container('global', {} );
    </script>
  </body>
</html>

  2. In the <link> element, replace container.htm with the relative or absolute URL that will host the container page.

    Caution: If you include an incorrect URL in the container.htm reference, the submission will break.

  3. In the <script> element, replace the following:

    • <client_name>—The client name provided by Bazaarvoice. Be sure to use lowercase letters for the value.
    • <site_ID>—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 you have the correct ID, or sign in to the configuration hub to verify it.
    • <environment>—The data environment you want to use. This should be either "staging" or "production". Make sure to reference the correct environment.
    • <locale>—The locale used by the implementation. If you are not using US English (en_US), use the correct locale code.
  4. Add the HTML document to the domain integrated with Bazaarvoice code.

  5. In the Getting Started section of the Ratings & Reviews configuration hub, select Technical Setup. From the Site Profile page, scroll to the Hosts and URLs section and enter the container page URL in the Container URL text box and select the language and locale.

    Note: If you have implemented multiple locales, you must create a separate container page for each locale.

  1. Create two container pages, one in staging and one in production. Each container page should include only code that is similar to the following example. If using multiple locales, one staging and production page must be created for each locale.

    <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <meta name="robots" content="noindex, nofollow">
    <!-- You can use either the relative or the absolute path to the canonical URL. For example, if the page is hosted -->
    <!-- at http://www.example.com/path/to/container.html, you can enter the canonical URL "container.html" or the full path. -->
    <link rel="canonical" href="container.htm" />
    <meta name="bv:pageType" content="container">
  </head>
  <body>
    <script type="text/javascript" src="https://apps.bazaarvoice.com/deployments/<client_name>/<site_ID>/<environment>/<locale>/bv.js"></script>
  </body>
</html>
    Note: If your implementation uses bvapi.js, your container page should include code that is similar to the following: 

    <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <meta name="robots" content="noindex, nofollow">
    <!-- You can use either the relative or the absolute path to the canonical URL. For example, if the page is hosted -->
    <!-- at http://www.example.com/path/to/container.html, you can enter the canonical URL "container.html" or the full path. -->
    <link rel="canonical" href="container.htm" />
  </head>
  <body>
    <script type="text/javascript" src="https://display.ugc.bazaarvoice.com/bvstaging/static/<client_name>/<site_ID>/<locale>/bvapi.js"></script>
    <script>
      $BV.container('global', {} );
    </script>
  </body>
</html>

  2. Update the <link> element to replace container.htm with the relative or absolute URL that will host the container page. In the bv.js call, replace <client_name>, <site_ID>, <environment>, and <locale> with the appropriate values.
  3. Using the configuration hub, select Technical Setup under Getting Started on the left side of the page.
  4. Scroll down on the Site Profile tab to the Container URL and Staging Container URL fields.
  5. Specify a unique URL in each field (for production and staging). If your environment uses multiple locales, select the locale using the drop-down above the field, and then specify a unique URL for each locale.
  6. Deploy the changes to staging and production.

Verify the following: