Deep Linking

This plug-in 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.

How’d we do 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

1. Add the Deep Linking Plugin

If your experience is standalone, in the Settings panel, paste the script below in the Custom HTML field:

If your experience is embedded, paste the script in the header of your parent page:

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.

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 to more easily locate it later.
• In the interactions tab for the hotspot, add an: On Click → Scroll to Position → Anchor #1 action

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, or change the target state of an element in Ceros, 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.

4. SDK Tagging (Page One Only)

• With the Hotspot still selected, open the SDK panel and add a tag for this particular section. Use the format section=one with the “one” being any number or word to identify your section.
• We’ll use section=about as this name will also be used as the parameter in your URL. For example http://view.ceros.com/developer-portal/deep-linking?section=about will scroll to the first anchor on the page, per our SDK setup.

STOP

If you only have one page, or are linking to an anchor on Page 1, stop here. Do not add any more tags. Only a single section=something tag is needed.

If you are linking to another page or a point on another page, proceed to Step 5.

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 selected, click the SDK tool and give it a specific tag using the same syntax section=one. For this example, we’ll use section=contact.

• 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.

6. Optional: Add Anchors Between Pages

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. Use the SDK tool, you will need to add three tags:

  • deep-link
  • target-section=about: The “about” value here is the section on the page you would like the user to be sent to.
  • target-page=

7. Test Your Experience

• Attach the ?section=one parameter (or whatever you tagged the hotspot with) to the end of your URL to test it out. It should automatically bring you to that section of the experience.
• Continue adding new anchor points, hotspots, and tagging them in the SDK to direct users to different sections of your experience. Just ensure your hotspots have the correct interaction and SDK tag applied.