How I Setup Custom GamiPress Buttons with Dynamic Redirects Using JetEngine (No Code)

Hey, Danica here! I build WordPress membership sites, and today I want to walk you through a simple but cool task I recently completed for a client. It involves GamiPress, ACF (Advanced Custom Fields), and JetEngine’s Dynamic Visibility feature.

I didn’t build the original site, but the client needed help making the badge collection process more intuitive for their users. Specifically, they wanted users to be redirected to a particular section in their dashboard after collecting a badge—so they could easily view the badge they just claimed.

Let me show you exactly how I did it.

The Goal: Redirect Users to a Dashboard Section After Collecting a Badge

The client has various student activities, each awarding a badge upon completion. The request was:
When a student collects a badge, redirect them to a specific section in their dashboard where they can view it.

Here’s What Happens:

• User completes an activity.
• User clicks Collect Badge.
• They’re redirected to a specific dashboard section using an anchor link (e.g., #toolkit).

Step 1: Assigning Section IDs in Elementor

The dashboard is built with Elementor, so I:

1. Opened the Elementor page builder.
2. Located the section I wanted to redirect to (e.g., “Toolkit”).
3. Added an ID to that section (e.g., toolkit), using the CSS ID field under the Advanced tab.

This allowed me to create anchor links like dashboard-url/#toolkit for precise redirection.

Step 2: Creating Dynamic Badge Buttons with Custom Redirects

In each activity or lesson, I created a “Collect Badge” button with a unique redirect link that points to the appropriate dashboard section.

Example Redirect Script:

Each button uses a simple redirect script with a delay:

<a href="#" class="redirecting" onclick="setTimeout(function(){ window.location.href='dashboard-url/#toolkit'; }, 1000);">Collect Badge</a>

I wrapped this in a shortcode for flexibility and pulled in the redirect URLs dynamically using ACF fields.

Step 3: Dynamically Showing Only the Relevant Button

Now here’s where JetEngine’s Dynamic Visibility feature comes in.

Each activity belongs to a chapter (e.g., Toolkit, My Heart, My Story, My Impact). I only wanted to show the button relevant to that chapter.

Here’s How I Did It:

1. Installed JetEngine.
2. Enabled Dynamic Visibility for Widgets (JetEngine > Settings > Modules).
3. Edited the button template and went to the Advanced tab.
4. Enabled Dynamic Visibility with these settings:
   • Condition Type: Show element if condition is met.
   • Rule: Post Term contains “Toolkit” (or My Heart, etc.).
   • The rule checks the taxonomy term assigned to the post and shows the correct button.

Result? Only the correct Collect Badge button appears for each activity, keeping the UI clean and user-friendly.

Bonus: Loading Indicator + Dynamic Badge Content

To improve UX:

• I added a loading indicator so users know something’s happening when they collect a badge.
• I dynamically inserted the badge title and featured image into the loading screen. This personalizes the experience and confirms the badge they’re claiming.

Final Thoughts

Before building something like this, take a step back and plan your user flow. It’ll help you decide exactly which plugins and tools you need.

If you’re looking for dynamic functionality, JetEngine (or Crocoblock’s full package) is a fantastic choice. It works great with ACF, and there’s no conflict between them.

Have any questions about GamiPress, JetEngine, or ACF? Drop them in the comments! I’ve got a couple of other GamiPress videos on my channel if you want to dive deeper.

Thanks for reading—and see you in the next post! 🙌

Tools & Plugins that used

• GamiPress
• JetEngine (Crocoblock)
• Elementor
• ACF Pro