Features - Deep Links
Deep Links
Finding the right content record to edit in your commerce, DAM, PIM or CMS can be challenging. Save time and reduce risk of errors with our deep link & navigation tools that leads you straight to the live content in the underlying system from your preview site.
How it works
Deep links
give business users the ability to engage with specific sections or components within the interface through mouse interactions. This is enabled by selecting elements that are connected to a designated provider. Upon hovering, an outline becomes visible, and supplementary action buttons appear. These buttons provide direct access to edit the corresponding content record in the underlying system or allow for seamless navigation between different elements on the page. To enable deep links
, developers need to configure content providers
and add data-pf attributes to their HTML elements.
Known Providers
- Contentful
- Contentstack
- Commercetools
- Hygraph
- Kontent.ai
- Prismic
- Content Hub One
- Sitecore XM Cloud (Content Editor)
- Sitecore XM Cloud (Pages)
- Storyblok
- Strapi Cloud
- Ultra Commerce
Custom Providers
A Custom Providers can be created to configure your own source repository integration from scratch (CMS, Dam, Commerce, PIM etc...).
In order to deeplink from the outline around a component straight to the entry in your provider, the provider has to be capable to direct link to content entries.
To configure a provider capable of deeplinking, you need to know the URL pattern used by your provider to direct link to a content entry.
Example
Here is an example of a custom provider url that you need to provide in the Admin Panel, this one has two tokens modelId
and entryId
:
https://preview.domain.io/{modelId}/?id={entryId}
Take the following HTML snippet as an example:
<div data-pf='{"providerId": "mycustomprovider", "componentKey": "promoCard", "groupId": "abc1234", "modelId": "xxxxxxxxxx", "entryId": "xxxxxxxxxx"}'>
<h1>Promo Title</h1>
<p>Text</p>
</div>
To see others available properties accepted in data-pf
attributes, please read this article