In this guide:
About This Plugin
This plugin will trigger an interaction (such as showing a popup) when a certain number of hotspots are clicked.
Click here to import Demo Experience
How to Implement
Step 1: Add and Adjust the Custom HTML
Copy the SDK Script below and paste it into the Custom HTML field within the Settings panel in the Ceros Studio. Press OK to finish and close the panel.
<script
id="hidden-item-hunt"
src="https://labs.ceros.com/sdk-plugins/hidden-item-hunt/main.js?v=1"
data-number-of-hotspots= "13"
></script>
Note: This SDK script has 1 configurable parameter:
data-number-of-hotspots= the number of hotspots a user needs to click in order to trigger an interaction.
As an example, if there are 13 objects that the user needs to find and click on in order for a pop-up to appear, you would set data-number-of-hotspots= "13"
(In our demo experience above we've set this parameter to "6")
Step 2: Create and Tag Hotspots
1. Create a hotspot over the item that a user will click on.
2. With this hotspot selected, open the SDK Panel.
3. In the second Enter Tag field beneath the SDK ID, type in the following tags and press Enter/Return to submit each tag:
• item
• key:x -"x" is equal to a unique value given to this hotspot.
For example, if you assign this hotspot a unique value of 1 then the tag would be key:1.
You should not use the number 1 again for any of the other hotspots so this value stays unique.
4. Repeat the above sub-steps 1-3 for all other item hotspots.
Step 3: Set Up Trigger Interaction
1. Create a hotspot and place it outside of your canvas.
2. With this hotspot selected, open the SDK Panel.
3. In the second Enter Tag field beneath the SDK ID, type in the tag all-found then press Enter/Return to add the tag.
4. Add an interaction to this hotspot that you'd like to trigger once all of the item hotspots have been clicked. (For example, you could add an On Click -> Show interaction that reveals a hidden popup.)
Optional: Create Reset Button
1. Create your reset button assets.
2. Create a hotspot over the button.
3. With this button selected, open the SDK Panel.
4. In the second Enter Tag field beneath the SDK ID, type in the tag reset then press Enter/Return to add the tag.
Note: This tag will only reset the SDK code. Any design resetting required (such as hiding a revealed popup) must be added separately as an interaction(s).