Widget & QR Codes

Loyalty Widget

The Ploints widget is a lightweight, embeddable UI that lets customers check their balance, view tier progress, and see available rewards -- all without leaving your site.

Option 1: Iframe Embed

The simplest integration. Add an iframe tag to your page. Replace YOUR_BUSINESS_SLUG with your business slug from the dashboard.

<iframe
  src="https://ploints.space/embed/YOUR_BUSINESS_SLUG"
  width="400"
  height="600"
  style="border: none; border-radius: 12px; box-shadow: 0 4px 24px rgba(0,0,0,0.1);"
  title="Ploints Loyalty Widget"
></iframe>

The iframe is responsive by default. You can adjust width and height or use CSS to make it fluid.

Option 2: Script Tag

For more control, use the JavaScript loader. It automatically renders the widget inside a target element and handles theming.

<!-- Add a target container -->
<div id="ploints-widget"></div>

<!-- Load the Ploints widget script -->
<script
  src="https://ploints.space/widget.js"
  data-business="YOUR_BUSINESS_SLUG"
  data-target="#ploints-widget"
  data-theme="auto"
  defer
></script>

Script Tag Options

QR Codes

Generate QR codes from your Ploints dashboard to use at physical locations. Customers scan the code to earn or redeem points instantly.

Generating QR Codes

1. Navigate to Dashboard → QR Codes.
2. Click Generate New QR Code.
3. Choose the action type: earn (award points on scan) or redeem (redeem points at checkout).
4. Configure the point amount and optional description.
5. Download the QR code as a PNG or SVG to print or display.

How It Works

Each QR code encodes a unique URL pointing to your public loyalty page. When a customer scans it:

• They are directed to a branded page where they enter their email (or are identified automatically if already logged in).
• The configured action (earn or redeem) is executed immediately.
• A confirmation screen shows their updated balance and tier status.

Public Balance Lookup

Every Ploints business has a public-facing page where customers can check their point balance, view tier progress, and see earned badges. The URL follows this pattern:

https://ploints.space/YOUR_BUSINESS_SLUG

You can link to this page from your website, email newsletters, or receipts. Customers enter their email to look up their balance -- no account creation required.

Customization

Customize the look and feel of your widget and public pages from the dashboard:

• Brand colors -- set primary and accent colors to match your brand identity.
• Logo -- upload your business logo to display in the widget header.
• Custom domain -- on Pro plans, map a custom subdomain (e.g. loyalty.yourbusiness.com) to your public pages.

Full Example: Adding the Widget to a React App

If you prefer to embed the widget inside a React or Next.js application, use a simple component:

export function PlointsWidget({ slug }: { slug: string }) {
  return (
    <iframe
      src={`https://ploints.space/embed/${slug}`}
      className="w-full rounded-xl border-0 shadow-lg"
      style={{ height: 600 }}
      title="Ploints Loyalty Widget"
    />
  );
}

// Usage
<PlointsWidget slug="my-coffee-shop" />