@bodiless/bv

Bazaarvoice Component

This component provides ability to place Bazaarvoice Reviews into a site.

It supports Conversations API and both v1 and v2

• Configuration
• Conversations Version 1
• Conversations Version 2
• HOCs
• BV Loader Provider

Configuration

This section describes configuration steps required in order to use BV Components.

Prerequisites

In order to use BV components, you need to know:

• URL of main Baazarvoice script. Example: https://apps.bazaarvoice.com/deployments/<client_name>/<site_ID>/<environment>/<locale>/bv.js, or
• client_name, site_ID, environment and locale of your Baazarvoice account.

How to configure

In order to connect your BV components to BV service, you need to set BV_SCRIPT environment variable to main BV main script url:

BV_SCRIPT="https://apps.bazaarvoice.com/deployments/<client_name>/<site_ID>/<environment>/<locale>/bv.js"

Altenatively, you can set the following environment variables

BV_CLIENT_NAME='clientid'
BV_SITE_ID='main_site'
BV_ENVIRONMENT='staging'
BV_LOCALE='en_US'

By default, Display integration V2 is enabled.

How to enable Display Integration V1

If you want to enable Display Intergration V1

If you configure the connection by setting BV_SCRIPT in environment variable, then no additional settings is required, just ensure the script you set ends with bvapi.js.

If you configure the connection by setting BV_CLIENT_NAME, BV_SITE_ID, BV_ENVIRONMENT, BV_LOCALE, you need to set the following environment variable

BV_API_VERSION=1

BazaarVoice Version 1

It supports Conversations API and v1

BVReviews

One can use this component in order to add baazarvoice reviews widget to the page. The component encapsulates logic to load main baazarvoice script to the page. The component provides ability for content editors to configure BV product mapping via UI.

Usage

You need to import the component

import { BVReviewsV1 } from '@bodiless/bv';

And then you can place the component on a page

<BVReviewsV1 />

BVInlineRatings

One can use this component in order to add baazarvoice inline ratings widget to the page. The component encapsulates logic to load main baazarvoice script to the page. The component provides ability for content editors to configure BV product mapping via UI.

Usage

You need to import the component

import { BVInlineRatingsV1 } from '@bodiless/bv';

And then you can place the component on a page

<BVInlineRatingsV1 />

BVRatingsSummary

One can use this component in order to add baazarvoice ratings summary widget to the page. The component encapsulates logic to load main baazarvoice script to the page. The component provides ability for content editors to configure BV product mapping via UI.

Usage

You need to import the component

import { BVRatingsSummaryV1 } from '@bodiless/bv';

And then you can place the component on a page

<BVRatingsSummaryV1 />

BVInlineRatingsBase

One can use this component as base component in order to compose his/her custom BV component for rendering BV Inline Ratings widget.

Usage

You need to import the base component and the list of HOCs to compose your custom BV component

import { BVInlineRatingsBaseV1, withBVLoader, asBodilessBV } from '@bodiless/bv';
import flowRight from 'lodash/flowRight';

Then you need to compose the custom component

const CustomBVComponent = flowRight(
  withBVLoader,
  asBodilessBV
)(BVInlineRatingsBaseV1);

Then you can place the custom component on a page

<CustomBVComponent />

BVReviewsBase

One can use this component as base component in order to compose his/her custom BV component for rendering BV Reviews widget.

Usage

You need to import the base component and the list of HOCs to compose your custom BV component

import { BVReviewsBaseV1, withBVLoader, asBodilessBV } from '@bodiless/bv';
import flowRight from 'lodash/flowRight';

Then you need to compose the custom component

const CustomBVComponent = flowRight(
  withBVLoader,
  asBodilessBV
)(BVReviewsBaseV1);

Then you can place the custom component on a page

<CustomBVComponent />

BVInlineRatingsBase

One can use this component as base component in order to compose his/her custom BV component for rendering BV Inline Ratings widget.

Usage

You need to import the base component and the list of HOCs to compose your custom BV component

import { BVInlineRatingsBaseV1, withBVLoader, asBodilessBV } from '@bodiless/bv';
import flowRight from 'lodash/flowRight';

Then you need to compose the custom component

const CustomBVComponent = flowRight(
  withBVLoader,
  asBodilessBV
)(BVInlineRatingsBaseV1);

Then you can place the custom component on a page

<CustomBVComponent />

BVRatingsSummaryBase

One can use this component as base component in order to compose his/her custom BV component for rendering BV Ratings Summary widget.

Usage

You need to import the base component and the list of HOCs to compose your custom BV component

import { BVRatingsSummaryBaseV1, withBVLoader, asBodilessBV } from '@bodiless/bv';
import flowRight from 'lodash/flowRight';

Then you need to compose the custom component

const CustomBVComponent = flowRight(
  withBVLoader,
  asBodilessBV
)(BVRatingsSummaryBaseV1);

Then you can place the custom component on a page

<CustomBVComponent />

BazaarVoice Version 2

It supports Conversations API and v2

BVReviews

One can use this component in order to add baazarvoice reviews widget to the page. The component encapsulates logic to load main baazarvoice script to the page. The component provides ability for content editors to configure BV product mapping via UI.

Usage

You need to import the component

import { BVReviews } from '@bodiless/bv';

And then you can place the component on a page

<BVReviews />

Customization

It is possible to customize the component by using Design API. The component exposes:

• BVProductIsNotMapped - component is displayed when BV External ID is not set
• BVLoading - component is displayed while BV main script is loading
• BVPlaceholder - component is displayed on edit mode

For instance, you can add some styles to the exposed components

const asBVReviewsBlue = withDesign({
  BVProductIsNotMapped: addClasses('bg-blue text-white p-2 border border-red'),
  BVPlaceholder: addClasses('bg-blue text-white p-2 border border-red'),
  BVLoading: addClasses('bg-blue text-white p-2 border border-red'),
});

const BlueBVReviews = asBVReviewsBlue(BlueBVReviews);

And then you can add your customized component on a page

<BlueBVReviews />

BVInlineRatings

One can use this component in order to add baazarvoice inline ratings widget to the page. The component encapsulates logic to load main baazarvoice script to the page. The component provides ability for content editors to configure BV product mapping via UI.

Usage

You need to import the component

import { BVInlineRatings } from '@bodiless/bv';

And then you can place the component on a page

const redirectUrl = "http://localhost/testUrl"; // set it you want to include a hyperlink in an inline rating
const seo = false; // set it if you want to enable/disable rendering of schema.org metadata
<BVInlineRatings redirectUrl={redirectUrl} seo={seo} />

Customization

It is possible to customize the component by using Design API. The component exposes:

• BVProductIsNotMapped - component is displayed when BV External ID is not set
• BVLoading - component is displayed while BV main script is loading
• BVPlaceholder - component is displayed on edit mode

For instance, you can add some styles to the exposed components

const asBVInlineRatingsBlue = withDesign({
  BVProductIsNotMapped: addClasses('bg-blue text-white p-2 border border-red'),
  BVPlaceholder: addClasses('bg-blue text-white p-2 border border-red'),
  BVLoading: addClasses('bg-blue text-white p-2 border border-red'),
});

const BlueBVInlineRatings = asBVInlineRatingsBlue(BVInlineRatings);

And then you can add your customized component on a page

<BlueBVInlineRatings />

BVRatingsSummary

One can use this component in order to add baazarvoice ratings summary widget to the page. The component encapsulates logic to load main baazarvoice script to the page. The component provides ability for content editors to configure BV product mapping via UI.

Usage

You need to import the component

import { BVRatingsSummary } from '@bodiless/bv';

And then you can place the component on a page

<BVRatingsSummary />

Customization

It is possible to customize the component by using Design API. The component exposes:

• BVProductIsNotMapped - component is displayed when BV External ID is not set
• BVLoading - component is displayed while BV main script is loading
• BVPlaceholder - component is displayed on edit mode

For instance, you can add some styles to the exposed components

const asBVRatingsSummaryBlue = withDesign({
  BVProductIsNotMapped: addClasses('bg-blue text-white p-2 border border-red'),
  BVPlaceholder: addClasses('bg-blue text-white p-2 border border-red'),
  BVLoading: addClasses('bg-blue text-white p-2 border border-red'),
});

const BlueBVRatingsSummary = asBVRatingsSummaryBlue(BVRatingsSummary);

And then you can add your customized component on a page

<BlueBVRatingsSummary />

BVReviewsBase

One can use this component as base component in order to compose his/her custom BV component for rendering BV Reviews widget.

Usage

You need to import the base component and the list of HOCs to compose your custom BV component

import { BVReviewsBase, withBVLoader, asBodilessBV } from '@bodiless/bv';
import flowRight from 'lodash/flowRight';

Then you need to compose the custom component

const CustomBVComponent = flowRight(
  withBVLoader,
  asBodilessBV
)(BVReviewsBase);

Then you can place the custom component on a page

<CustomBVComponent />

BVInlineRatingsBase

One can use this component as base component in order to compose his/her custom BV component for rendering BV Inline Ratings widget.

Usage

You need to import the base component and the list of HOCs to compose your custom BV component

import { BVInlineRatingsBase, withBVLoader, asBodilessBV } from '@bodiless/bv';
import flowRight from 'lodash/flowRight';

Then you need to compose the custom component

const CustomBVComponent = flowRight(
  withBVLoader,
  asBodilessBV
)(BVInlineRatingsBase);

Then you can place the custom component on a page

<CustomBVComponent />

BVRatingsSummaryBase

One can use this component as base component in order to compose his/her custom BV component for rendering BV Ratings Summary widget.

Usage

You need to import the base component and the list of HOCs to compose your custom BV component

import { BVRatingsSummaryBase, withBVLoader, asBodilessBV } from '@bodiless/bv';
import flowRight from 'lodash/flowRight';

Then you need to compose the custom component

const CustomBVComponent = flowRight(
  withBVLoader,
  asBodilessBV
)(BVRatingsSummaryBase);

Then you can place the custom component on a page

<CustomBVComponent />

BazaarVoice HOC's

asBodilessBV

One can use this HOC in order to enhance his/her base BV component with Bodiless data handlers.

Usage

You need to import the HOC and compose your component

import { asBodilessBV, BVRatingsSummaryBase } from '@bodiless/bv';
const MyBVComponent = asBodilessBV(BVRatingsSummaryBase);

Then you can add your component on a page

<MyBVComponent />

asBodilessBV

One can use this HOC in order to compose his/her own BV component. asBodilessBV provides error handling and allows to subscribe to event when main BV script is loaded and $BV object is initialized.

Usage

You need to import the HOC and compose your component

import { asBVComponent } from '@bodiless/bv';

const MyBVContainer = props => <div id="BVContainer" {...props}></div>;
const MyBVComponent = asBVComponent('BV Ratings Summary', () => $BV.ui('rr', 'show_reviews', {productId: 'product_id'}))(MyBVContainer);
)

Then you can add your component on a page

<MyBVComponent />

asDesignableBVComponent

One can use this HOC in order to compose his/her own BV component. asDesignableBVComponent provides error handling and allows to subscribe to event when main BV script is loaded and $BV object is initialized.

Usage

You need to import the HOC and compose your component

import { asDesignableBVComponent } from '@bodiless/bv';

const MyBVContainer = props => <div id="BVContainer" {...props}></div>;
const MyBVComponent = asDesignableBVComponent('BV Ratings Summary', () => $BV.ui('rr', 'show_reviews', {productId: 'product_id'}))(MyBVContainer);
)

Then you can add your component on a page

<MyBVComponent />

asBodilessBV

One can use this HOC in order to enhance his/her base BV component with bodiless data handlers and product edit form.

Usage

You need to import the HOC and compose your component

import { asEditableBV, BVRatingsSummaryBase } from '@bodiless/bv';
const MyBVComponent = asEditableBV(BVRatingsSummaryBase);

Then you can add your component on a page

<MyBVComponent />

withBVLoader

One can use this HOC in order to enhance his/her custom BV component with loading main BV script.

Usage

You need to import the HOC and compose your component

import { withBVLoader } from '@bodiless/bv';
const BVComponentWithLoader = withBVLoader(YourCustomBVComponent);

Then you can add your component on a page

<BVComponentWithLoader />

BVLoaderProvider

One can use this component in order to add main Baazarvoice script to the page himself/herself. It might be helpful to add this component from performance and UX perspective when there are a lot of BV widgets on the same page.

Usage

First, you need to compose your custom BV components.

import { BVRatingsSummaryBase, BVReviewsBase, asBodilessBV } from '@bodiless/bv';

const CustomBVRatingsSummary = asBodilessBV(BVRatingsSummaryBase);
const CustomBVReviews = asBodilessBV(BVReviewsBase);

Then, you should ensure BVLoaderProvider is imported on our page

import { BVLoaderProvider } from '@bodiless/bv';

Then, you can add BVLoaderProvider and our custom components on a page

<BVLoaderProvider>
  <CustomBVRatingsSummary />
  <CustomBVReviews />
</BVLoaderProvider>