The Rewards Widget is the customer-facing hub of your loyalty program. It’s where members check their points balance, discover ways to earn and redeem, share referral links, and review their activity history.
After reading this guide, you’ll understand what each panel shows your customers, how guests experience the widget, and how to use deep linking and placement options to drive engagement.
Widget Overview
The Rewards Widget is a panel that auto-embeds on your store’s customer-facing pages. It acts as a self-service dashboard where members can see everything related to their rewards in one place, without leaving the page they’re on.
The widget has two main components:
- Launcher: A floating button that customers click to open the widget
- Panel: The slide-out interface containing all the loyalty program features
The widget is organized into screens, each focused on a specific task. Members navigate between them using cards on the home screen.
Home Screen
The home screen is what members see when they first open the widget. It provides a quick snapshot of the member’s status and navigation to everything else.
The home screen includes:
- Points balance: The member’s current redeemable points total, displayed prominently at the top.
- Ways to earn: A navigation card that opens Ways to Earn, where members can see all available point-earning actions.
- Ways to redeem: A navigation card that opens Ways to Redeem, where members can browse and claim rewards.
- Refer your friends: When the referral program is enabled, this section appears with sharing options so members can invite friends directly from the home screen.
- Your activity: A navigation card that opens Rewards Activity, where members can review their full points and referral history.
The home screen adapts based on what programs you have enabled. If only the Points Program is active, referral-related sections won’t appear. If only the Referrals Program is active, points-specific sections are hidden.
Ways to Earn
Ways to Earn shows every action that earns points. Each entry shows the action’s icon, a description of what the member needs to do, and the number of points they’ll receive.
For example, a typical earn list might include:
- Create an account — 100 points (one-time)
- First order bonus — 200 points (one-time)
- Make a purchase — 5 points per $1 spent
- Write a product review — 100 points per review
The actions shown here mirror what you’ve configured in RewardsWP » Settings » Points under the Ways to Earn section. When you enable or disable earn actions in the admin, the list updates automatically in the widget.
Ways to Redeem
Ways to Redeem shows all available rewards that members can claim with their points. Each reward displays its title, the points cost, and a Redeem button. When a member has enough points for a reward, the Redeem button is active. When they don’t have enough points yet, the button is disabled, and the panel shows how many more points they need.
When a member clicks Redeem, a confirmation prompt appears asking them to verify their choice. This prevents accidental redemptions. After confirming, their points are deducted immediately and a coupon code is generated. The new coupon appears in the “Your rewards” section at the top of the home screen, ready to apply to their cart.
The rewards listed here correspond to the spend actions you’ve set up in RewardsWP » Settings » Points under the Ways to Redeem section.
When a member clicks Redeem, a confirmation prompt appears asking them to verify their choice. This prevents accidental redemptions. After confirming, their points are deducted immediately and a coupon code is generated. The new coupon appears in the “Your rewards” section at the top of the home screen, ready to apply to their cart.
Refer Your Friends
The Refer Your Friends section gives members everything they need to share their referral link. It appears on the home screen when the referral program is enabled.
This section includes:
- Copy-to-clipboard referral link: Members can copy their unique referral URL with one click. A confirmation message briefly appears when the link is copied.
- Sharing channels: Pre-configured buttons for sharing via Email, X, and Facebook
The channels shown here are controlled by the settings in RewardsWP » Settings » Widget under Sharing Options.
Rewards Activity
Rewards Activity gives members a transparent view of their points history and referral activity. Members access it by clicking the Your activity link on the home screen.
If both the Points Program and the Referrals Program are enabled, members see a tabbed interface to switch between the two types of activity:
- Points tab: Chronological log of every points transaction
- Referrals tab: Log of all referral conversions
If only one program is enabled, the single relevant tab appears without the tab switcher.
Points Tab
The Points tab shows a chronological list of every points transaction. Each entry displays the action that happened, the source, the number of points added or deducted, and a relative timestamp. Earned points appear in green with a + prefix, while spent or deducted points appear in gray with a – prefix. Pending points show an amber Pending badge.
Referrals Tab
The Referrals tab shows every friend the member has referred. At the top, a summary line shows the count of completed and pending referrals. Each entry displays the friend’s name (first name and last initial for privacy), what they did, a status badge, and when it happened.
Guest Experience
Visitors who haven’t joined your rewards program see a preview version of the widget designed to encourage sign-ups. Instead of showing member-only features, the preview gives guests a taste of the program.
What guests see:
- Program overview — A description of the benefits of joining
- “Become a member” CTA — A prominent call-to-action button encouraging sign-up
- Preview of points system — A glimpse of how points are earned
- Available rewards — A preview of what they can redeem
Guests can browse the Ways to Earn and Ways to Redeem panels to see what’s available, but each panel includes a join prompt instead of active functionality. Guests can’t redeem rewards or access Rewards Activity until they create an account.
Guest order linking:
When a guest makes a purchase and later creates an account, RewardsWP automatically links their orders and awards points retroactively. This ensures guests don’t lose out on points they would have earned if they’d been logged in.
Deep Linking
You can link directly to any widget panel by adding a hash link to any page where the widget is active. Hash links open the widget without reloading the page, making them ideal for navigation menus, buttons, and in-page links.
| Hash link | Opens |
#rewardswp-home | Home screen |
#rewardswp-earn | Ways to Earn |
#rewardswp-redeem | Ways to Redeem |
#rewardswp-rewards | Your Rewards |
#rewardswp-activity | Rewards Activity |
#rewardswp-activity-points | Rewards Activity (Points tab) |
#rewardswp-activity-referrals | Rewards Activity (Referrals tab) |
#rewardswp-join | Registration form |
#rewardswp-login | Login form |
Example:
Adding a menu item linking to yourstore.com/shop/#rewardswp-earn opens the shop page and slides open the Ways to Earn panel.
Using deep links in emails: Hash links don’t work in emails because email clients strip the # fragment. Replace #rewardswp- with ?rewardswp= instead. For example, use yourstore.com/shop/?rewardswp=earn in an email to link to Ways to Earn.
Common use cases:
- Navigation menus — Add a “My Rewards” menu item linking to
/#rewardswp-home - Buttons on landing pages — Link to Ways to Earn with
#rewardswp-earn - Email campaigns — Link to Rewards Activity with
?rewardswp=activity
Customizing Your Widget
The Rewards Widget auto-embeds on your store’s customer-facing pages. You can control its appearance and position from RewardsWP » Settings » Rewards Widget.
The settings are organized into three sections: General, Rewards Launcher, and Sharing Options.
General Settings
The General settings control the overall appearance and branding of the widget panel. These settings affect how the widget looks and what members see when they open it.
Brand color: Sets the primary accent color throughout the widget. This affects buttons, badges, and highlighted elements.
Text & icons on brand color — Controls whether text and icons on colored backgrounds are light or dark. Options:
- Auto (default): Automatically chooses light or dark based on brand color luminance
- Light: Forces light text and icons (use with dark brand colors)
- Dark: Forces dark text and icons (use with light brand colors)
Welcome heading: The welcome message shown in the panel header (e.g., “Welcome to”, “Hey there,”).
Program name: The name of your rewards program displayed throughout the widget (e.g., “My Rewards”, “Loyalty Program”).
Rewards Launcher Settings
The Rewards Launcher is the floating button that customers click to open the widget. These settings control how the launcher button appears and where it’s positioned on your site.
Display: Controls what the launcher button shows:
- Icon with text (default): Shows the widget icon alongside a text label
- Text only: Shows just the text label
- Icon only: Shows just the widget icon for a more compact look
Text: The text label shown on the launcher button (disabled when Display is set to “Icon only”).
Position: Choose which side of the screen the launcher appears on:
- Right (default)
- Left
The launcher uses a fixed position, so it remains visible as customers scroll down the page.
Sharing Options Settings
Sharing Options control how members can share their referral links directly from the Rewards Widget. Enable the channels you want to offer and customize the pre-filled messages to match your brand voice. These settings only apply when the Referrals Program is active.
X: Toggle to enable/disable sharing via X (formerly Twitter). When enabled, members can share their referral link on X.
X Message: Customize the pre-filled message that appears when members share via X. Maximum 280 characters. Available placeholders: {site_name}, {advocate_name}, {reward_name}, {referral_link}.
Facebook: Toggle to enable/disable sharing via Facebook. When enabled, members can share their referral link on Facebook.
Note: Facebook does not allow predefined messages. When an advocate refers their friends via Facebook, they will be prompted to add their own message.
Email: Toggle to enable/disable sharing via email. When enabled, members can share their referral link via email.
- Email Subject: Customize the subject line for referral emails. Available placeholders:
{site_name},{advocate_name},{reward_name},{referral_link}. - Email Message: Customize the email body for referral emails. Available placeholders:
{site_name},{advocate_name},{reward_name},{referral_link}.
Frequently Asked Questions
Can I link to the widget from a navigation menu?
Yes. Use a hash link (e.g., #rewardswp-home) on any page link in your menu. Hash links are preferred for menus because they open the widget without reloading the page.
What’s the difference between the launcher and the widget?
The launcher is the floating button customers click to open the widget. The widget is the full slide-out panel that contains all the panels described in this guide. You can customize both independently in the settings.
Do guests and members see different things?
Yes. Members see their personal points balance, referral link, and full activity history. Guests see a preview of the program with prompts to join. Both can browse Ways to Earn and Ways to Redeem, but only members can take action.
Can I change the currency name from “Points” to something else?
Yes. Navigate to RewardsWP » Settings » Points and update the Currency fields under General settings. You can set a singular name (e.g., “Star”), plural name (e.g., “Stars”), and an abbreviation (max 4 characters). The new name appears throughout the widget and Rewards Activity.