Hi, I’m Lanika, and I build WordPress membership sites. Recently, a client asked me to add a visual indicator for students when they click a GamiPress “Collect Your Badge” button—something to show that the action is being processed, instead of simply redirecting without feedback.
In this post, I’ll walk you through exactly how I set that up using Elementor popups. It’s a simple but effective way to enhance the user experience on your membership site.
The Goal: Show a Visual Indicator Before Redirecting
Here’s the scenario:
When a student clicks the “Collect Your Badge” button (styled in blue), they’re redirected to another page where they receive their badge. However, without any kind of message or animation, it’s not obvious that anything is happening—which can confuse users.
So, I created a loading popup that appears immediately after the button click, displays a quick message and animation, and then redirects the user after a couple of seconds.
Step-by-Step Setup
1. Create a Loading Popup in Elementor
I used Elementor’s Popup Builder to design a simple loading popup with some animation. Here’s how I did it:
- Go to Templates → Popups and create a new popup (I called mine “Loading Popup”).
- In the popup settings, under the Advanced tab, enable the option to trigger the popup via selector (CSS class).
- Set a selector name—mine was
.redirecting. - Add any animations or graphics you like. Elementor has motion effects and even looping animations to make it more engaging.
This popup acts as the “redirecting” indicator that shows after the button is clicked.
2. Trigger the Popup from the GamiPress Button
Once the popup is ready, you’ll need to trigger it when the GamiPress button is clicked. Here’s how:
- In your GamiPress button shortcode, simply add a class attribute matching the selector name you used in Elementor.
Example:
[gamipress_earn_award_button award_id="123" label="Collect Your Badge" class="redirecting"]This way, when the button is clicked, Elementor recognizes the class and triggers the Loading Popup.
3. Set Popup Display Conditions
To make sure the popup appears on the right pages:
- Go to the popup’s Display Conditions.
- Set it to appear on the entire site, or only on the specific pages/post types where your GamiPress buttons are used.
What Happens Next?
Now, when a student clicks the Collect Your Badge button:
- The Loading Popup appears with your message/animation.
- After a 2-second delay, the user is redirected.
- They land on a page confirming that they’ve received their badge or reward.
This small touch creates a smoother, more professional experience for your members.
Final Thoughts
This is a simple setup using Elementor and GamiPress, but you can make it as fancy or interactive as you like. Add fun graphics, progress bars, or even sound effects to really engage your users.
Elementor popups are incredibly handy for adding progress indicators, confirmation messages, or redirect animations—especially on membership sites where user engagement matters.
If you have any questions about this setup or want help implementing it on your own site, feel free to drop a comment below. I’d love to hear from you and might even cover it in my next video or post!
Thanks for reading—see you in the next one!
Tools & Plugins that used
- GamiPress
- Elementor Pro
