@opinew/headless-widgets

Opinew Headless

Opinew integration for Shogun Frontend.

Display reviews, scores and let users to write their own reviews.

⚠️	This package runs on Shogun Frontend and is in customer Beta. It might not currently support all ecommerce platforms or cover all use cases.

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 the frontend-config package.
• Add the <OpinewPluginReact> component to your page, and pass it a its type, domain and productId 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;