@frontend-sdk/privy

Privy

Privy’s marketing platform helps merchants grow their email list and increase average order size with popups, flyouts, coupons and more.

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

Privy website →

Overview

Users of Shogun Frontend can leverage frontend-sdk/privy package to display popups and Free Shipping components for Shopify and BigCommerce stores.

Installation

yarn add @frontend-sdk/privy

npm install @frontend-sdk/privy

Usage

1. Get your Privy Public App Identifier here.

2. Create a new section, in the examples below we will name the new section Privy

3. Inject the widget into the DOM with usePrivy(appIdentifier) or useAsyncPrivy(appIdentifier).

4. Click on the new Campaign here to add a Privy Play to your store

5. Choose from the pre-built Privy plays (Welcome Discount, Mobile Signup Discount, Cart Saver, Free Shipping Bar, Exit Email Capture), or build your own.

6. Select the coupon you would like to offer and click Continue

7. Edit, add, and style elements using the Privy Dashboard

8. Publish the campaign to view the component in the store

Synchronous Widget Example

⚠️	Use the Synchronous usePrivy hook when scripts are required to be loaded and executed concurrently. This is the preferred method to install Privy, and will allow the script to load in line with all other scripts on your site.

import { usePrivy } from '@frontend-sdk/Privy'

export const Privy = ({ appIdentifier }) => {
  usePrivy(appIdentifier)

  return <div>…</div>
}

Asynchronous Widget Example

⚠️	Use the Asynchronous useAsyncPrivy hook when scripts are required to be downloaded in parallel. This will parse the page and execute as soon as it is available.

import { useAsyncPrivy } from '@frontend-sdk/Privy'

const Privy = ({ appIdentifier }) => {
  useAsyncPrivy(appIdentifier)

  return <div>…</div>
}