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

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

• Help Center: Installation (v3, updated in April 2021)
• Help Center: refreshWidgets API
• Get Started: Installation (must be logged-in in Yotpo app)

Yotpo Loyalty & Referrals

Usage

Basic

0. Prerequisites:

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

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

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

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

• Help Center: Implementing Loyalty & Referrals on a Custom or Generic eCommerce Platform
• Help Center: On-site Modules