Please be aware that Ceros SDK plugins are non-native tools and are provided "as is". As such, we cannot guarantee that plugin functionality will work as intended across all implementation instances.
About This Plugin
This plugin allows you to navigate to any subsection of an index page in a Ceros experience. This will only work for navigation bars that are inside of a Ceros experience and can only navigate to a section in the same Ceros experience.
Click here to view a demo experience
Click to import demo experience
How To Implement
Step 1: Add the Custom HTML
Copy the SDK Script below and paste it into the Custom HTML field within the Settings panel in the Studio. Press OK to finish and close the panel.
<script src="https://labs.ceros.com/sdk-plugins/hamburger-menu/main.js?v=1"></script>Step 2: Tag Navigation Subcategories
1. Create your navigation menu assets.
2. Create hotspots over each of your navigation menu subcategories.
3. With your navigation hotspots selected, open the SDK Panel.
4. In the second Enter Tag field beneath the SDK ID, type in the tag nav then press Enter/Return to submit it.Â
Note: You can save yourself time by multi-selecting all of your navigation hotspots on each page and adding this tag, as it will need to be added on every single navigation hotspot.
5. Next, find the second Enter Payload field in the SDK Panel beneath the Tags section. Type in the payload page_number-section_number.
• Replace page_number with the page number the section lives on.
• Replace section_number with a unique number given to the section.
Note: Each section must have a unique number from the other sections that live on the same page. For example, if the section "Football" is on page 1 and I give it a unique section number of "1" then the payload would be 1-1. Hereafter the unique section number 1 cannot be used again for any section that lives on page 1.
Analytics note: Since the Hotspots created for this plugin may only trigger SDK commands, Click and/or Hover events are NOT sent to Ceros Analytics, Google Analytics, or Google Tag Manager. To work around this, there would need to be a Click and/or Hover interaction added to the Hotspot. It can be anything, i.e., toggling the visibility of a shape that exists off the canvas.
Step 3: Create and Tag Section Hotspots
1. Navigate to the first page of your experience.
2. Decide where you want your first section to be in your canvas that a user will be able to navigate to.
3. At the top of where this section sits in your canvas, create an anchor point with the Anchor Tool.Â
4. Create a hotspot that sits off of the canvas next to this section.
5. With this hotspot selected, open the SDK Panel.
6. In the second Enter Tag field beneath the SDK ID, add the payload you gave this section in the navigation bar hotspot as a tag. Press Enter/Return to add the tag.Â
Note: For example, the Football section was given a payload of 1-1. This would now be the tag added to the hotspot.
7. With this same hotspot selected, navigate to the Interact tab and add an On Click > Scroll to Position interaction that targets the anchor you created for this section.
8. Repeat these steps for all the pages that have subcategories you want the user to be able to navigate to.