yotpo

Suggest Edits

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.

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

Yotpo website →

Installation

yarn add @frontend-sdk/yotpo

npm install @frontend-sdk/yotpo

Yotpo Reviews & Ratings

Usage

  1. 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 <>…</>
}

  2. 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>
}

  3. Use useYotpoReviewsRefresh hook when widget needs to be updated:

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

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

Links

Yotpo Loyalty & Referrals

Usage

Basic

  1. Prerequisites:

  2. 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 <>…</>
}

  3. 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>
  )
}

  4. 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>
    </>
  )
}

Links

Updated over 1 year ago