Universal Links in Sanity.io

Deep Link to your Sanity Content easily with this Branch.io plugin

With today’s ever growing app ecosystem, deep links now often override click behavior if a user has a compatible app. On a mobile device, tapping a YouTube video should launch that content in the YouTube application, not on youtube.com. Branch.io serves as a great tool to lubricate that process, providing Universal Link hosting and a cascade of defaults for how a given link should be handled based on whether a user has the app. However, many steps are still required to inform Branch of your content and dictate its behavior on a given platform.

This post will show how to link users to your Sanity content in-app with the branch-link Sanity plugin. To get started, you’ll need a Sanity.io project, and a Branch.io account.

Connecting your content

To use Branch with Sanity, Branch links need to get the information about the content they represent. This primarily includes

1. App Navigation data for deep linking purposes in a mobile app
2. Open Graph metadata for unfurling (aka “link previews”)
3. Any tracking information that needs to be embedded in the link for analytics

Branch link data dictate all of the above behaviors. These attributes may be configured directly as a query param within a branch link or embedded in shortened links served by branch. The branch-link Sanity plugin allows you to connect your Sanity data to set these attributes in the link.

Setting up the plugin

To install the branch plugin, run:

sanity install branch-link

If you are using image hotspots for your content represented in links, you will also need

yarn add @sanity/image-url

Now, let’s say we run an app where we sell fast fashion shirts, called insta-shirt. We need to sell these shirts as fast as possible before they go out of style, so we launch a Sanity e-commerce site.

To control the branch link for a “shirt” product document, we just add a new url field with a BranchLink custom inputComponent, a branch key and a…