@asemirsk/bv
Advanced tools
This component provides ability to place Bazaarvoice Reviews into a site.
It supports Conversations API and both v1 and v2
This section describes configuration steps required in order to use BV Components.
In order to use BV components, you need to know:
https://apps.bazaarvoice.com/deployments/<client_name>/<site_ID>/<environment>/<locale>/bv.js, orIn 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.
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
It supports Conversations API and v1
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.
You need to import the component
import { BVReviewsV1 } from '@bodiless/bv';
And then you can place the component on a page
<BVReviewsV1 />
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.
You need to import the component
import { BVInlineRatingsV1 } from '@bodiless/bv';
And then you can place the component on a page
<BVInlineRatingsV1 />
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.
You need to import the component
import { BVRatingsSummaryV1 } from '@bodiless/bv';
And then you can place the component on a page
<BVRatingsSummaryV1 />
One can use this component as base component in order to compose his/her custom BV component for rendering BV Inline Ratings widget.
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 />
One can use this component as base component in order to compose his/her custom BV component for rendering BV Reviews widget.
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 />
One can use this component as base component in order to compose his/her custom BV component for rendering BV Inline Ratings widget.
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 />
One can use this component as base component in order to compose his/her custom BV component for rendering BV Ratings Summary widget.
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 />
It supports Conversations API and v2
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.
You need to import the component
import { BVReviews } from '@bodiless/bv';
And then you can place the component on a page
<BVReviews />
It is possible to customize the component by using Design API. The component exposes:
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 />
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.
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} />
It is possible to customize the component by using Design API. The component exposes:
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 />
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.
You need to import the component
import { BVRatingsSummary } from '@bodiless/bv';
And then you can place the component on a page
<BVRatingsSummary />
It is possible to customize the component by using Design API. The component exposes:
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 />
One can use this component as base component in order to compose his/her custom BV component for rendering BV Reviews widget.
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 />
One can use this component as base component in order to compose his/her custom BV component for rendering BV Inline Ratings widget.
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 />
One can use this component as base component in order to compose his/her custom BV component for rendering BV Ratings Summary widget.
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 />
One can use this HOC in order to enhance his/her base BV component with Bodiless data handlers.
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 />
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.
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 />
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.
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 />
One can use this HOC in order to enhance his/her base BV component with bodiless data handlers and product edit form.
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 />
One can use this HOC in order to enhance his/her custom BV component with loading main BV script.
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 />
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.
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>
FAQs
Provides bazaarvoice components.
The npm package @asemirsk/bv receives a total of 1 weekly downloads. As such, @asemirsk/bv popularity was classified as not popular.
We found that @asemirsk/bv demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
A malicious npm package disguised as a WhatsApp client is exploiting authentication flows with a remote kill switch to exfiltrate data and destroy files.
Security News
PyPI now supports digital attestations, enhancing security and trust by allowing package maintainers to verify the authenticity of Python packages.
Security News
GitHub removed 27 malicious pull requests attempting to inject harmful code across multiple open source repositories, in another round of low-effort attacks.