@frontend-sdk/yotpo NPM

Yotpo

Yotpo integration for Shogun Frontend.

Yotpo's eCommerce marketing platform offers the most advanced solutions for customer reviews, visual marketing, loyalty, referrals, and SMS marketing.

Yotpo website →

Installation

yarn add @frontend-sdk/yotpo

npm install @frontend-sdk/yotpo

Yotpo Reviews & Ratings

Usage

Find your Yotpo App Key here. Inject Yotpo's script with your App Key:

import { useYotpoReviews } from '@frontend-sdk/yotpo'
const App = () => {
  useYotpoReviews('<insert Yotpo’s App Key here>')
  return <>…</>
}

Add div with one of supported classes (from official docs):

Reviews Widget (yotpo yotpo-main-widget):

const ReviewsWidget = () => {
  return (
    <div
      className="yotpo yotpo-main-widget"
      data-product-id="<SKU / Product ID>"
      data-price="<Product Price>"
      data-currency="<Price Currency>"
      data-name="<Product Title>"
      data-url="<The URL of your product page>"
      data-image-url="<The product image URL>"></div>
  )
}

Star Rating (yotpo bottomLine):

const StarRating = () => {
  return <div className="yotpo bottomLine" data-yotpo-product-id="<SKU / Product ID>"></div>
}

UGC Gallery (yotpo-pictures-widget):

const Gallery = () => {
  return <div class="yotpo yotpo-pictures-widget" data-gallery-id="<Gallery ID>"></div>
}

Use useYotpoReviewsRefresh hook when widget needs to be updated:

import { useYotpoReviewsRefresh } from '@frontend-sdk/yotpo'

const Component = () => {
  useYotpoReviewsRefresh()
  return <>…</>
}

Yotpo Loyalty & Referrals

Usage

Basic

Prerequisites:
- Find your Yotpo Loyalty GUID in Settings → General.
- Enable customer accounts on your ecommerce platform (e.g., Shopify docs).

Use useYotpoLoyalty hook at pages where you want Yotpo Loyalty functionality (e.g., product pages, rewards page)

import { useYotpoLoyalty } from '@frontend-sdk/yotpo'
const App = () => {
  useYotpoLoyalty('<Yotpo Loyalty GUID>')
  return <>…</>
}

Add div element with customer information so Yotpo can identify them (docs).

const Customer = () => {
  return (
    <div
      id="swell-customer-identification"
      data-authenticated="true"
      data-email={'<customer email>'}
      data-id={'<customer ID>'} // ID in your ecommerce platform
      data-tags="['<tag 1>', '<tag 2>', …]"
      style={{ display: 'none' }}></div>
  )
}

If you want to use On-site Modules:
- Customize them in the Yotpo Loyalty admin.
- Place the provided snippet in a section or component in the Frontend.

That's it! After Yotpo app is loaded, you should see Yotpo modules.

Advanced

If you need more control over the Yotpo Loyalty SDK, @frontend-sdk/yotpo can also provide:

loading state (whether Yotpo script is loaded)
error information (in case of timeout, for example)
Yotpo Loyalty SDK methods (at the moment only the method to show the Rewards Popup module)

You can also control:

threshold — time before throwing timeout error if Yotpo Loyalty SDK is not loaded
interval — how often to check whether the SDK is loaded

Here is an example of how to provide a button to show Rewards Popup module

import { useYotpoLoyalty } from '@frontend-sdk/yotpo'
const RewardsPage = () => {
  const { loading, error, yotpoLoyalty } = useYotpoLoyalty(
    '<GUID>',
    '<threshold in milliseconds>',
    '<interval in milliseconds>',
  )
  const onClick = () => {
    yotpoLoyalty?.showRewardsModal()
  }
  return (
    <>
      <button type="button" onClick={onClick} disabled={loading || error instanceof Error}>
        {loading ? 'Loading…' : error ? 'Error' : 'Open Rewards modal'}
      </button>

      {error instanceof Error && (
        <code>
          <b>Error:</b> {error.message}.
        </code>
      )}
      <div
        id="swell-customer-identification"
        data-authenticated="true"
        data-email={'…'}
        data-id={'…'}
        style={{ display: 'none' }}></div>
    </>
  )
}