deep-link.js

deep-link.js is designed to add deep links to the web in an easy and stable way.

Mobile deep links are links that refer to apps instead of another web page. Opening things in apps can vastly improve a user’s experience.

Install

bower install deep-link.js

Or download deep-link.js from the GitHub repository and embed the script at the bottom of your body tag.

<script src="js/deep-link.js"><script>

Usage

<a href        ="..."
data-app       ="..."
data-app-[os]  ="..."
data-store-[os]="...">
Fallback  (and unsupported OSs)
Deep link (cross-OS)
Deep link (OS-specific)
Store ID  (OS-specific)

Mobile deep links are not intended for desktops, so there are several fallbacks, in this order:

  1. Open the deep link
  2. Open the app in the store (if present)
  3. Go to the href attribute (if present)
  4. Absolutely nothing

The more information you supply, the better.

Getting data

Personally, I found GotSchemes a very good resource to find different schemes and paths for apps.

Mobile-only link

Send “deep-link.js is awesome” via WhatsApp.

<a data-app        ="whatsapp://send?text=Hello"
data-store-android ="com.whatsapp"
data-store-ios     ="310633997">
Send message via WhatsApp

Works on mobile, but not on desktop due to the missing href attribute.

Cross-device link to a shop

Open product_id in the Ebay app.

<a href            ="http://www.ebay.com/sch/i.html?_nkw=keywords"
data-app           ="ebay://www.ebay.com/sch/i.html?_nkw=keywords"
data-store-android ="com.ebay.mobile"
data-store-ios     ="282614216">
Search on Ebay

Open Twitter account

Open a specific Twitter account.

<a href            ="https://twitter.com/username"
data-app           ="twitter://user?screen_name=username"
data-store-android ="com.twitter.android"
data-store-ios     ="333903271">
@TimSeverien on Twitter