npm package: @frontend-sdk/stamped
Description: Stamped offers two main products for Shopify and BigCommerce stores: Reviews & Ratings and Loyalty & Rewards.
Author: Shogun
Latest version: 0.26.2

# Stamped

Stamped offers two main products for Shopify and BigCommerce stores: Reviews & Ratings and Loyalty & Rewards.

<table>
  <tbody>
    <tr>
      <td>⚠️</td>
      <td>This package runs on Shogun Frontend and is in customer Beta. It might not currently support all ecommerce platforms or cover all use cases.</td>
    </tr>
  </tbody>
</table>

[Stamped's website →](https://stamped.io)

## Reviews & Ratings

The Reviews & Ratings widgets help merchants gain in-depth insights into their customers' favorites and feedback about their overall experience. Use the `UseStampedReviews` hook in the `frontend-sdk/stamped` package to display review widgets.

### Installation

`yarn add @frontend-sdk/stamped`

`npm install @frontend-sdk/stamped`

### Usage

- Grab the Stamped Public API Key [here](https://help.stamped.io/article/128-your-account-api-keys).
- Get your `storePlatformDomain` (e.g. store.myshopify.com) from the `frontend-config` package.
- Import and Call `useStampedReviews(<apiKey here>, <storePlatformDomain>)`
- Add the <StampedReviews> component to your page, and pass it a `productId`.

#### Example

```jsx
import { useStampedReviews } from '@frontend-sdk/stamped'
import getConfig from '@frontend-config'

export const StampedReviews = ({ apiKey, productId }) => {
  const { storePlatformDomain } = getConfig()
  useStampedReviews(apiKey, storePlatformDomain)

  return (
    <div>
      <img
        src={`https://stamped.io/inc/image/badges.png?apikey=${apiKey}&sId=${productId}&type=badge1&label1=&label2=`}
      />
    </div>
  )
}
```

Note: The storePlatformDomain parameter should be without `http` or `/`.

#### Widget Options:

##### [Display Widgets](https://go.stamped.io/v3/#/settings/widgets/display/):

- Carousel
- Full Page
- Reviews Popup
- Side Drawer
- Single Highlight
- Site Badge
- Top Rated

##### [Image Widget](https://go.stamped.io/v3/#/settings/widgets/email/):

- Single Badge
- Double Badge
- Badge Ribbon
- Product Rating

##### [Main Widget](https://help.stamped.io/article/9-getting-started---unsupported-e-commerce-platform)

- Main Widget

## Loyalty & Rewards

### Overview

The Loyalty & Rewards widgets help merchants increase customer retention rates and maximize average order value. Use the `UseStampedLoyalty` hook in the `frontend-sdk/stamped` package to display review widgets.

### Installation

`yarn add @frontend-sdk/stamped`

`npm install @frontend-sdk/stamped`

### Add Display Widget

#### Display Widget Usage

- Generate the code snippet for the respective Display Widget by heading over to the [Dashboard](https://go.stamped.io/v3/#/settings/widgets/display/):

1. Click on the Display Widget you want to install and apply the customization as required. Any settings and changes will be reflected on the preview on the right.
2. Once you are done, click on 'Get Codes'
3. Copy the generated code by clicking on 'Copy Codes'
   Note: The steps above are the same for generating and copying code for all Display Widgets

- Grab the Stamped Public API Key. Please make sure you're under the Loyalty & Rewards tab [here](https://help.stamped.io/article/128-your-account-api-keys).
- Get your `storePlatformDomain` (e.g. store.myshopify.com) from the `frontend-config package`.
- Import and Call `useStampedLoyalty(<apiKey here>, <storePlatformDomain>)`
- Paste the generated code copied from the previous step to your component.

#### Example

```jsx
import { useStampedLoyalty } from '@frontend-sdk/stamped'
import getConfig from '@frontend-config'

export const StampedLoyalty = ({ apiKey, productId }) => {
  const { storePlatformDomain } = getConfig()
  useStampedLoyalty(apiKey, storePlatformDomain)

  return <div id="stamped-rewards-widget" data-widget-type="rewards-summary"></div>
}
```

Note: The storePlatformDomain parameter should be without `http` or `/`.

### Create a dedicated Reward Page:

[Example of a dedicated rewards landing page on Stamped's Demo Store →](https://georgiemane.com/pages/rewards?no_rule=true)

#### Usage

Note: Make sure to only inject the script once on the top level so all Stamped widgets can utilize it.

- Publishing the Rewards page via Shogun Frontend:

1. Follow the previous mentioned steps [here](####display-widget-usage) to add Display Widgets
2. Make sure to save each widget in a designated section
3. After logging into Shogun Frontend and selecting your store, you will land on the Pages dashboard.
4. Click Add Page.
5. Enter the new page name and page path, and select a frame if desired.
6. Add all sections you created for each display widget to your page.
7. Select Page Settings to change the name or path of your static page and to set the title, URL, and description of your page.
8. When you have finished creating the page, click Save.

- Direct the referral link to your rewards page by updating the URL in the setting.

1. Settings - General
2. Click on "Referral"
3. Input the URL of your Rewards or Referral landing page, you created in the previoous step
4. Click Save.

#### [Display Widgets](https://go.stamped.io/v3/#/settings/widgets/display/:

- Page Summary
- Page How it Works
- Page Earnings
- Page Spendings
- Page Referral
- VIP Tiers (Enterprise Accounts only)
- Referral Modal
- Rewards Acitivities