Extensions | Deep Linking

Deep Linking

Use deep linking to send users to an anchor point using a URL parameter

What You Need

  • The custom HTML snippet
  • A Ceros experience with one or more anchors

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

Import Demo Experience

How to implement

Add the Custom HTML

In the Settings panel, paste the script below in the Custom HTML field:

<script id="ceros-deep-link" src="//creative-services.ceros.com/customer-success/url-params-plugin/url-params-plugin-with-page-v4.js?r=1" data-use-referrer="yes"></script>

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.

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

SDK Tagging

  • 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=1 as this name will also be used as the parameter in your URL. For example http://view.ceros.com/developer-portal/deep-linking?section=1 will scroll to the first anchor on the page, per our SDK setup.

Test Your Experience

  • Attach the ?section=1 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.