Would you like to know exactly what your members see when they open your store’s rewards program? The Rewards Widget is a panel on your storefront. In it, members check their points balance, find ways to earn and redeem, share their referral link, and review their activity.
In this guide, we’ll walk you through each panel of the widget and what guests see. We’ll also show you how to link straight to a panel and change the widget’s look. All you need is RewardsWP installed on your WooCommerce or Easy Digital Downloads store.
- Exploring the Home Panel
- Browsing Ways to Earn
- Redeeming Rewards
- Sharing Referral Links
- Reviewing Rewards Activity
- Previewing the Guest Experience
- Linking to a Widget Panel
- Customizing the Widget
- FAQ
Before you get started, make sure RewardsWP is installed and activated on your WordPress site.
Exploring the Home Panel
The Rewards Widget embeds itself on your store’s customer-facing pages, so members can use it without leaving the page they’re on. It has two parts:
- Launcher: a floating button that customers click to open and close the widget.
- Panel: the slide-out window that holds every loyalty program feature.
The home panel is what members see when they first open the widget. It gives a quick snapshot of their status, with a card for each of the widget’s other screens.
The home panel includes:
- Points balance: the member’s current redeemable points total, shown at the top.
- Your rewards: how many redeemed rewards the member has ready to use. It opens the list of their coupons.
- Ways to earn: opens the list of every action that earns points.
- Ways to redeem: opens the list of rewards members can claim with their points.
- Refer your friends: when the Referrals Program is on, this card gives members their referral link and sharing buttons.
- Your activity: opens Rewards Activity, the member’s full points and referral history.
The home panel adapts to the programs you have turned on. If only the Points Program is on, the referral sections don’t appear. If only the Referrals Program is on, the points sections are hidden.
To turn a program on or off, read Enable or disable the points program and Referral program overview.
To learn how points work, read Understanding the points program.
To see every panel with sample data before you set yours up, try RewardsWP live.
VIP Status
With the VIP Program on, the home panel shows a VIP status card with the member’s tier and their progress to the next one. Clicking the tier opens the VIP Status panel, with the tier’s benefits, welcome gifts, and a ladder of every tier. On the widget’s inner screens, the header also shows the member’s tier name under their balance.
For more on VIP status in the widget, read Showing VIP Status in the Rewards Widget.
Browsing Ways to Earn
Ways to earn shows every action that earns points. Each entry shows the action’s icon, what the member needs to do, and the number of points they’ll receive. Some entries also have a button, such as Shop for Make a purchase.
Once a member completes a one-time action, such as creating an account, its entry shows when they earned it and how many points they got.
The list mirrors the Ways to Earn section on the Points tab, at RewardsWP » Settings. When you turn an earn action on or off in the admin, the widget’s list updates to match.
To set up points for signups, reviews, and first orders, read Earning points from signups, reviews, and first orders.
Make a purchase can earn only on the items you pick, with Specific items in its Earns on setting. Its entry then names the item that earns, or says “selected items” when you’ve picked several. Specific items needs a Plus license level or higher.
For more on purchase points, read Earning points from purchases.
For more on choosing what earns points, read Excluding products from rewards and points.
Redeeming Rewards
Ways to redeem shows every reward members can claim with their points. Each reward displays its title, its 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. The panel then shows how many more points they need.
The rewards listed here match the Ways to Redeem section on the Points tab, at RewardsWP » Settings. A discount reward’s Applies to setting decides which items it discounts.
To add rewards to this list, read Choosing reward types.
Confirming a Redemption
When a member clicks Redeem, a confirmation step opens before any points are spent. Under “Before you redeem”, it lists the reward’s terms, including what the reward applies to. It also shows how many points the member will have left. Clicking Not now goes back to Ways to redeem without spending any points.
Once the member confirms, their points are deducted right away and a coupon code is generated. The new coupon appears under Your rewards on the home panel, ready to apply to their cart.
The coupon’s terms say what the reward applies to and whether sale items keep their price. When a reward covers or leaves out specific items, the terms list up to five of their names.
Sharing Referral Links
The Refer your friends card gives members everything they need to share their referral link. It appears on the home panel when the Referrals Program is on.
This card includes:
- Rewards: what the member gets for a referral and what their friend gets.
- Referral link: the member’s unique referral URL, which they can copy with one click. A confirmation briefly appears when the link is copied.
- Sharing buttons: ready-made buttons for sharing by email, X, and Facebook.
To set what each side gets, read Setting up advocate rewards and Setting up friend rewards.
The Sharing Options settings on the Widget tab control which sharing buttons appear. We cover them in Sharing Options Settings below.
Reviewing Rewards Activity
Rewards Activity gives members a clear view of their points history and referral activity. Members open it from the Your activity card at the bottom of the home panel.
When more than one program is on, members see tabs to switch between Points, VIP, and Referrals activity. If only one program is on, its activity appears without the tabs.
Points Tab
The Points tab shows a list of every points transaction, newest first. Each entry displays what happened, the number of points added or deducted, and when it happened.
Earned points appear in green with a + prefix. Spent or deducted points appear in gray with a – prefix. Pending points show an amber Pending badge.
For what each status means, read Understanding points statuses.
VIP Tab
The VIP tab lists the member’s tier changes over time, such as when they reached or moved to a tier.
The VIP tab appears while the VIP Program is on.
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.
Until a friend shops through the member’s link, the tab shows “No referrals yet” with an Invite friends button.
Next, we’ll look at what visitors see before they join your program.
Previewing the Guest Experience
Visitors who haven’t joined your rewards program see a preview of the widget built to encourage sign-ups. Instead of member-only features, it gives guests a taste of the program.
Guests see:
- Join our rewards program: a short description of the benefits of joining, with a Join now button and a Sign in link for existing members.
- Points: how the points program works, with links to Ways to earn and Ways to redeem.
- Refer your friends: what a member and their friend get from a referral, when the Referrals Program is on.
Guests can browse Ways to earn and Ways to redeem to see what’s available. However, each panel shows a join prompt instead of active buttons. Guests can’t redeem rewards or open Rewards Activity until they create an account.
With the VIP Program on, guests also see a VIP tiers overview listing what each tier unlocks and what it takes to reach it.
When a guest makes a purchase and later creates an account, RewardsWP links their orders and awards the points for them. This way, guests don’t miss out on points they would have earned if they’d been logged in.
Linking to a Widget Panel
You can link straight to any widget panel by adding a hash link to any page where the widget appears. Hash links open the widget without reloading the page. This makes them a good fit for navigation menus, buttons, and in-page links.
#rewardswp-home: Home panel#rewardswp-earn: Ways to earn#rewardswp-redeem: Ways to redeem#rewardswp-rewards: Your rewards#rewardswp-activity: Rewards Activity#rewardswp-activity-points: Rewards Activity, on the Points tab#rewardswp-activity-referrals: Rewards Activity, on the Referrals tab#rewardswp-vip: VIP Status panel#rewardswp-vip-tier-1: one VIP tier’s panel, counted from the lowest tier#rewardswp-join: registration form#rewardswp-login: login form
The VIP links work when the VIP Program is on. To open a different tier, change the number at the end: #rewardswp-vip-tier-1 is your lowest tier, #rewardswp-vip-tier-2 is the next one up, and so on. A member doesn’t see tiers whose conditions they don’t meet. For that member, the numbers skip those tiers.
For example, a menu item linking to yourstore.com/shop/#rewardswp-earn opens the shop page and slides open Ways to earn.
Note: Hash links don’t work in emails, because email clients strip the # part of the link. In an email, replace #rewardswp- with ?rewardswp=, for example yourstore.com/shop/?rewardswp=earn.
Here are a few common ways to use these links:
- 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. - VIP promotions: link to the VIP Status panel with
#rewardswp-vip, so members see their tier and what the next one gives them.
Next, we’ll cover the settings that change how the widget looks.
Customizing the Widget
You can change the widget’s colors, wording, launcher, and sharing buttons.
From your WordPress admin sidebar, go to RewardsWP » Settings and click the Widget tab.
The settings are grouped into three sections: General, Rewards Launcher, and Sharing Options. A preview beside them shows the widget. The Guest, Member, Friend, and Friend (claimed) buttons under the preview switch between what each kind of visitor sees.
General Settings
The General settings control the widget panel’s colors and wording.
- Brand color: sets the main accent color across the widget, including buttons, badges, and highlighted elements.
- Text & icons on brand color: controls whether button text, the launcher icon, and the header text on your brand color are light or dark. Auto, the default, picks light or dark based on your brand color. Light suits a dark brand color. Dark suits a light one.
- Welcome heading: the welcome message in the panel header, such as “Welcome to” or “Hey there,”.
- Program name: the name of your rewards program shown in the widget, such as “My Rewards” or “Loyalty Program”.
Rewards Launcher Settings
The Rewards Launcher settings control how the floating button looks and where it sits on your site.
- Display: choose what the launcher shows. Icon with text, the default, shows the widget icon beside a text label. Text only shows just the label. Icon only shows just the icon for a more compact look.
- Text: the label on the launcher button. It’s turned off when Display is set to Icon only.
- Position: choose whether the launcher sits on the right, the default, or the left side of the screen.
The launcher stays in a fixed position. It remains visible as customers scroll down the page.
Sharing Options Settings
Sharing Options control how members share their referral links from the widget. You can turn on the channels you want to offer. You can also edit the ready-made messages to match your brand’s voice. These settings only apply when the Referrals Program is on.
- X: shows or hides the X sharing button in the Refer your friends card.
- X Message: the ready-made message members post when they share on X, up to 280 characters. Available placeholders:
{site_name},{advocate_name},{reward_name}, and{referral_link}. - Facebook: shows or hides the Facebook sharing button.
- Email: shows or hides the Email sharing button.
- Email Subject: the subject line of referral emails. Available placeholders:
{site_name},{advocate_name},{reward_name}, and{referral_link}. - Email Message: the body of referral emails. Available placeholders:
{site_name},{advocate_name},{reward_name}, and{referral_link}.
If you leave X Message or Email Subject blank, RewardsWP uses the default shown under the field.
Note: Facebook doesn’t allow ready-made messages. When a member shares their link on Facebook, Facebook asks them to write their own message.
When the widget looks the way you want, click Save Changes beside the settings tabs.
That’s it! You now know what each panel of the Rewards Widget shows your members and guests, and how to make it your own. Next, to choose which products earn points or get a reward’s discount, read Excluding products from rewards and points.
FAQ
Below, we’ve answered some of the most common questions about the Rewards Widget.
Can I link to the widget from a navigation menu?
Yes. You can use a hash link, such as #rewardswp-home, as the link of any menu item. To add a custom link to a menu, see How to Add a Navigation Menu in WordPress. Hash links work well in menus because they open the widget without reloading the page. See Linking to a Widget Panel for every link you can use.
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 holds all the screens in this guide. You can change both on the Widget tab, at RewardsWP » Settings.
Do guests and members see different things?
Yes. Members see their own 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. Only members can redeem rewards.
Why does a member’s balance show a negative number?
When you refund an order, RewardsWP takes back the points it earned, even if the member already spent them. If that takes the balance below zero, the Rewards Widget and the Members list show it as a negative number. The member can redeem again once they earn those points back.
Can I change the name of points to something else?
Yes. To do this, go to RewardsWP » Settings and click the Points tab. Then, find Points Currency under Points Branding. There, you can set a plural name, such as “Stars”, and a singular name, such as “Star”. The new name appears throughout the widget and Rewards Activity.