In this guide:
About This Plugin
This plugin allows for a parameter to be added to the URL of a published Ceros Experience, which will drive a user to a specific anchor point within the Ceros piece.
Click here to import Demo Experience
Click here to view a recorded webinar that overviews this plugin!
How We Did It
We check the URL to see if it contains a specific parameter, and if it does, we comb the experience to identify any hotspots that have a matching SDK tag. We then fire a click event to the matching hotspots to trigger the scroll to action.
How To Implement
Step 1: Add the Deep Linking Plugin
• If your experience is standalone, copy the standalone 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="ceros-deep-linking-plugin" data-is-embedded="no" src="https://labs.ceros.com/sdk-plugins/deep-linking/deep-linking-plugin-v2.min.js"></script>
• If your experience is embedded, copy the embedded SDK Script below and paste it into the header of your parent page.
<script id="ceros-deep-linking-plugin" data-is-embedded="yes" src="https://labs.ceros.com/sdk-plugins/deep-linking/deep-linking-plugin-v2.min.js"></script>
Step 2: Add the Anchor
• Using the Anchor Tool, add anchors to the different sections of your experience as you normally would. We will name these in a later step, which will link up to the URL parameter.
Step 3: SDK Hotspot
• Add a hotspot to your canvas anywhere on the page. We usually recommend placing it just off the canvas at the top of the page. This way the user won’t accidentally activate it. Name this hotspot something descriptive to more easily locate it later (eg. HS - About Section).
• In the Interact tab for the selected hotspot, add an: On Click -> Scroll to Position -> Anchor #1 (or a different anchor point you have created) action to the hotspot.
Pro Tip: This plugin works for other "On Click" interactions as well, not just scrolling to anchors or going to pages!
If you need to do something like show or hide an image, group, or folder, you can simply use the interaction you need instead of an “On Click -> Scroll to Position” interaction. Everything works the same way, the only difference is that you’re just using a different click interaction.
Step 4: SDK Tagging (Page One Only)
• With our hotspot still selected, open the SDK Panel and add a tag within the second Enter Tag field (beneath the SDK ID) for this particular section. Use the format section=one with the “one” being any number or word to identify your section. Press Return/Enter to finish adding the tag.
• In our demo example, we used section=about for the tag. This name will also be used as the parameter in your URL. For example,
https://view.ceros.com/ceros-educate/deep-linking-demo?section=about will scroll to the first anchor on the page, per our SDK setup.
Note: If your experience is just one page, you can stop reading here. For creating deep links on other pages or creating anchors between pages, continue reading.
Step 5: SDK Tagging (All Other Pages)
• On the page you want to add a deep-link section, create a hotspot off-canvas that has a scroll to interaction. With this hotspot selected, open the SDK Panel and give it a specific tag using the same syntax section=one. For our demo example, we used section=contact on Page 2.
• On the first page of the experience, add a hotspot with four tags:
• deep-link : This tells the experience to use the deep-linking plugin.
• target-page= : The target page is the number of the page where the section lives. Add the numeric page number after the equals sign (=).
• target-section=contact : The target section is the name of the section on the page.
• section=contact : This is the name of the parameter added to the URL.
Step 6: Add Anchors Between Pages (Optional)
The deep-linking plugin also allows you to link to anchors between pages in an experience. For example, you could have a hotspot on Page 2 that links to an anchor on Page 1.
• Add a hotspot on an object that, when clicked, takes a user to a page with the anchor point you want them to be directed to. Using the SDK Panel, you will need to add four tags to your hotspot:
• deep-link : This tells the experience to use the deep-linking plugin.
• target-section=about : The “about” value here is the section on the page you would like the user to be sent to.
• target-page= : This is the page where the section lives that you would like the user to be sent to.
• section=about : This is the name of the parameter added to the URL.
Step 7: Test Your Experience
• Attach the ?section=one parameter (or whatever you tagged the hotspot with) to the end of your Ceros experience's URL to test it out (our demo example - https://view.ceros.com/ceros-educate/deep-linking-demo?section=about). It should automatically bring you to that section of the experience.
• You can continue adding new anchor points and hotspots and tagging them in the SDK Panel to direct users to different sections of your experience. Just ensure your hotspots have the correct interaction and SDK tag(s) applied.