@opinew/headless-widgets
v0.1.6
Published
React wrapper for Opinew widgets. Can be used with Shogun and Hydrogen
Downloads
5
Readme
Opinew Headless
Opinew integration for Shogun Frontend.
Display reviews, scores and let users to write their own reviews.
Overview
Users of Shogun Frontend on Shopify can leverage this package to display 7 beautiful UGC widgets on their stores, increase conversions through social proof, and allow their customers to publish and leave new verified reviews.
Installation
yarn add @opinew/headless-widgets
npm install @opinew/headless-widgets
Limitations
Opinew requires Shopify to be used as the ecommerce platform.
Usage
- Get your shop myshopify
domain
(e.g. store.myshopify.com) from thefrontend-config
package. - Add the
<OpinewPluginReact>
component to your page, and pass it a itstype
,domain
andproductId
if you choose type 'product' or 'floating'.
See Opinew headless widgets documentation for more detail: https://www.opinew.com/help-center/knowledge-base/web-components/
Product Reviews
import { OpinewPluginReact } from '@opinew/headless-widgets';
export default ({productId}) => (
<OpinewPluginReact type="product" domain="shop.myshopify.com" productId={productId} />
)
Floating Widget
import { OpinewPluginReact } from '@opinew/headless-widgets';
export default ({productId}) => (
<OpinewPluginReact type="floating" domain="shop.myshopify.com" productId={productId} />
)
All Reviews
import { OpinewPluginReact } from '@opinew/headless-widgets';
export default () => (
<OpinewPluginReact type="all" domain="shop.myshopify.com" />
)
Reviews Carousel
import { OpinewPluginReact } from '@opinew/headless-widgets';
export default () => (
<OpinewPluginReact type="carousel" domain="shop.myshopify.com" />
)
Badge
import { OpinewPluginReact } from '@opinew/headless-widgets';
export default () => (
<OpinewPluginReact type="badge" domain="shop.myshopify.com" />
)
Recommendations
- For best results make sure that container you are putting widgets in allow them take full width of the section. We do not reccomend setting parent node style to
display: flex;