Deep Linking to an App

Deep Link to Another Native App from Within Staffbase

Linking to external websites or even web-applications from the content within Staffbase is easy. Normal links lead users to a website or web app. To create normal linking, editors need to only provide the URL to the website content. Deep links on the other hand lead users to a native app. However, to generate the deep links to an app, you need to define certain parameters.

ParameterDescription
target-appThe URL scheme of the app, including the path to a specific page. For example, target-app:// or target-app://module/example
ios-store-linkThe link to download the target app from the Apple App Store. optional
android-store-linkThe link to download the target app from the Google Play Store. optional
custom-install-linkThe link to download the target app from the download page if the target app is not available in the public app stores. optional
web-linkThe link to open the web app. optional

Based on the parameters you define in deep links, there are two types of deep links:

  • Basic Deep Links: Lead users to a specific page of a mobile app, only if the app is installed.
  • Deferred Deep Links: Lead users to a specific page of a mobile app and if the app is not yet installed, they provide an alternative option. There are two cases of such deferred deep links, where:
    • Users are also provided options to the app store and the web app.
    • Users are also provided with the option to a custom download, in case the app is not available in the public app store.

You can create a deep link by defining the deep link query parameters.

Prerequisites:

  • The target app to which you want to deep link must have:
    • A custom URL scheme for iOS devices
    • A web URI intent for Android devices

If the target app to which you want to deep link does not already have a custom URL scheme and a web URI intent defined, you can define them for the app.

  1. Copy the code snippet and paste it to a browser console or some JavaScript runtime.
let webURL = 'https://{{YourWebAppDomain}}'
const values = {
  'target-app': '',
  'ios-store-link': '',
  'android-store-link': '',
  'custom-install-link': '',
  'web-link': '',
}
let isFirst = true
webURL += '/external/openapp.html'
for (const prop in values) {
  if (values.hasOwnProperty(prop) && values[prop]) {
    webURL += isFirst ? '?' : '&'
    webURL += prop + '=' + encodeURIComponent(values[prop])
    isFirst = false
  }
}


console.log(webURL);

  1. Add the parameter values within the quotes based on the type of deep link you want to generate.

  2. Execute the code in the console and retrieve the deep link.

You have generated the deep link. Now you can provide the deep link to editors of a news channel or a page in the Staffbase Studio.

Make sure to use the following link attribute class=“default-link-handling” in order to have it handled by the device itself that will actually open the other app. When you are using our Links Plugin or Launchpad, make sure the link opens externally.

Google Apps (target app)

  • googlesheets://
  • googledocs://
  • googleslides://
  • googledrive://
  • googlegmail://
  • googlecalendar://

Microsoft Teams (target app, store links and web link)

https://app.staffbase.com/external/openapp.html?target-app=msteams%3A%2F%2F&ios-store-link=https%3A%2F%2Fapps.apple.com%2Fus%2Fapp%2Fmicrosoft-teams%2Fid1113153706&android-store-link=https%3A%2F%2Fplay.google.com%2Fstore%2Fapps%2Fdetails%3Fid%3Dcom.microsoft.teams%26hl%3Den%26gl%3DUS&web-link=https%3A%2F%2Fwww.microsoft.com%2Fen%2Fmicrosoft-teams%2Flog-in

Salesforce (target app, store links and web link)

https://app.staffbase.com/external/openapp.html?target-app=com.salesforce.chatter%3A%2F%2F&ios-store-link=https%3A%2F%2Fapps.apple.com%2Fus%2Fapp%2Fsalesforce%2Fid404249815&android-store-link=https%3A%2F%2Fplay.google.com%2Fstore%2Fapps%2Fdetails%3Fid%3Dcom.salesforce.chatter&web-link=https%3A%2F%2Flogin.salesforce.com

Workday (target app, store links and web link)

https://app.staffbase.com/external/openapp.html?target-app=workday%3A%2F%2F&ios-store-link=https%3A%2F%2Fapps.apple.com%2Fus%2Fapp%2Fworkday%2Fid316800034&android-store-link=https%3A%2F%2Fplay.google.com%2Fstore%2Fapps%2Fdetails%3Fid%3Dcom.workday.workdroidapp%26hl%3Den&web-link=https%3A%2F%2Fwww.workday.com