Hotspot images where each hotspot is shown IF user has a tag
Hello there. We are doing lots of gamification in BuddyBoss + Learndash + Gamipress and we came up with a surprisingly simple idea that could unleash tons of scenarios: Showing a hotspot in an image only if the user has a specific tag. With such simple integration you could create images of guides, maps, and roadmaps for courses or groups of courses and show complete/uncomplete assignments/requirements, next steps, etc. All simply based on tags!!! This is so useful because LMSs like LearnDash don’t have a concept like a courses track, where you can create of roadmap for taking several courses. But in eLearning this is such a critical concept. There are many image with hotspot capabilities (like Elementor Hotspot Widget, or the Getwid Hotspot Block) but afaik none of them allow you to show/hide hotspots based on tags. I’m attaching an idea created by someone else in a real site to produce the same effect but using really complicated coding instead of a simple image with hotspots+tags. Thank you for considering this idea.
Ricardo Jiménez shared this idea 
Hey Ricardo đ
You can do this now actually, it just doesn’t support the Hotspot Widget specifically.
Here’s roughly how it works:
1. In Elementor, add an inner section to a page
2. Add your image to this section. It might work best if you set it as a background image on the section rather than an image widget, you can try either way
3. Add your conditional images to the section. For each image, set a tag-based condition using WP Fusion’s visibility settings: https://wpfusion.com/documentation/page-builders/elementor/
4. Set the images as “Absolute” positioned from the Advanced >> Layout tab. This will put your smaller images on top of the background image. Then used percentage based positioning to set the images’ where you want them to be relative to the background image
And that’s it, you can have hotspot images that only appear if the user has the required tags đ
I think this makes a good topic for a more detailed tutorial, we’ll put that on the ideas board to work on and we can post back here when it’s published.
Hey thank you very much for this info. My concern going down this approach is that one would not be able to use all the customizations (animations, colors, icons, etc) that are already built-in for hotspots and the hotspot editor (in Elementor or in Getwid).
The ideal would be that the tag-based WP Fusion visibility settings could be applied directly to each hotspot. In this way, you could leverage the full power of the hotspots and the hotspot editors.
Makes sense?
Here’s a short video that shows the hotpost elements, options and designer in Elementor in case this helps illustrate the point: https://www.youtube.com/watch?v=KWYDQvWlzl4
Thanks for the additional info!
Yes, I understand a direct integration with the hotspot widget would be ideal.
We’ve checked it out and it is possible, but it will require registering a separate set of controls inside the hotspot repeater UI… so it’s not a quick project.
I was hoping to give you something that you could use in the meantime. For example you could use an absolutely positioned “Icon” element over an image, and use WP Fusion’s visibility controls on that, to achieve almost the same effect.
I’ve gone ahead and set this request to Accepted. If there’s enough interest from other customers then we can start building an integration with the Hotspot widget specifically đ
And you did helped me a lot with something I could use in the meantime. Thank you so much!
I will go ahead and try to get this idea promoted as much as possible. A lot of people could benefit from it, I just don’t think they’ve realized it yet :).
Thank you again!