Unlock Achievements Like a PRO: GamiPress + Video Popups & Confetti

Gamification is a powerful way to engage users, and GamiPress is an excellent tool to add achievement-based rewards to your WordPress membership site. In this guide, we’ll walk you through how to trigger a video popup with confetti whenever a badge is awarded in GamiPress. Let’s dive in!

What is GamiPress?

GamiPress is a free WordPress plugin that allows you to award points, achievements, and ranks to users. It integrates with various platforms, but in this tutorial, we’ll focus on its core functionality and how to trigger a video with confetti when a user earns a badge.

Step-by-Step Guide

Step 1: Setting Up the Pop-Up

We use Elementor’s pop-up builder to create a custom popup that appears when a badge is awarded.

1. Navigate to Templates > Popups in Elementor.
2. Create a new popup and name it something like “Badge Reward Popup.”
3. Add a video widget inside the popup and embed the video URL (provided by the client or hosted on a platform like YouTube).
4. Set the video to autoplay and mute (Autoplay won’t work unless muted).
5. Add a confetti GIF as the background overlay:
   • Click the background settings of the popup.
   • Choose Import from URL and paste the confetti GIF link.
   • Adjust the overlay transparency as needed.
6. Make the popup’s background transparent so only the video and confetti are visible.
7. Save and update the popup.

Step 2: Creating a Dynamic Trigger for the Popup

We need the popup to appear when a user earns a badge. To do this:

1. Use GamiPress Button (a free GamiPress feature) to create a “Claim Your Badge” button.
2. Use Elementor’s Dynamic Visibility feature (via JetEngine) to show the button only when the user qualifies for the badge.
3. Attach a unique class name to the button (e.g., .claim-badge).
4. Set the popup trigger condition in Elementor:
   • Trigger Type: On Click
   • Open by Selector: .claim-badge
5. Save the settings.

Step 3: Redirecting Users After Course Completion

If you’re using Sensei LMS, you can automatically redirect users to the badge claim page upon completing a course.

1. Navigate to Sensei LMS Settings > Course Completion.
2. Set the redirect URL to the page where the badge claim button is located.
3. Use dynamic request parameters to pass the course ID so the page knows which badge to display.

Step 4: Customizing the Badge Display

Instead of using the default GamiPress badge listing, we use JetEngine’s Listing Functionality for a customized look.

1. Navigate to JetEngine > Listings.
2. Create a new listing for Badges.
3. Use the shortcode [gamipress_achievement] to pull in badge details dynamically.
4. Add CSS to make unclaimed badges appear in black and white, while claimed ones appear in full color.
5. Adjust the styling to match your site’s branding.
6. Save and apply the listing to the badge display page.

Step 5: Testing the Setup

Now that everything is set up, let’s test the achievement workflow:

1. Revoke a badge from your test user.
2. Complete the corresponding course to trigger the award process.
3. Verify that the badge claim button appears.
4. Click the button and ensure the popup appears with the video and confetti animation.
5. Check that the badge updates to the colored version in the badge list.

Final Thoughts

Adding video popups and confetti animations makes earning achievements more engaging and rewarding for users. GamiPress is a powerful tool, but it’s best to plan your reward system before setting it up to avoid confusion.

If you have any questions about GamiPress, Elementor popups, or how to set this up, drop a comment below. Happy gamifying!

Tools & Plugins that used

• GamiPress
• Elementor Pro