@frontend-sdk/stamped

Stamped

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

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

Stamped's website →

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.
• Get your storePlatformDomain (e.g. store.myshopify.com) from the frontend-config package.
• Import and Call useStampedReviews(<apiKey here>, <storePlatformDomain>)
• Add the component to your page, and pass it a productId.

Example

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:

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

Image Widget:

• Single Badge
• Double Badge
• Badge Ribbon
• Product Rating

Main Widget

• 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:

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

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 →

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