Create App Deep Links

Deep Link to Another Native App from Within Staffbase

Read this if: You're still experimenting, prototyping and exploring.
You should know about: 
api
User API

Linking to external websites or even web-applications from within Staffbase is easy: users can paste an URL to the Link feature and be done with it. However, the process of generating a link to another native app requires some additional steps.

Required: URL schemes

Please keep in mind that the third party app needs to support URL schemes in order to use this integration option. If that is not the case yet, it needs to be added to the third party app first.

These guides can help:

The Section “Register Your URL Scheme” in the official Apple documentation should be all that is needed. More guides can be found by googling “ios app url scheme”.

Tutorial: Find the custom URL scheme

Guide for Android

More guides can be found by googling “android app url scheme”

To find the custom URL scheme (Android) inspect the AndroidManifest.xml (you could use this App), search for "android:scheme" (e.g.: android:scheme="myexampleapp"). To link in the app use this custom url scheme like this: myexample app://

Available Parameters

  • target-app - URL scheme of the app incl. any deeplinking if necessary, e.g. sapfiori:// or sapfiori://module/payroll
  • ios-store-link - link to download the third-party app on the Apple App Store
  • android-store-link - link to download the third-party app on the Google Play Store
  • custom-install-link - alternative installation link, usually an internal app store or download page if no public app store is used
  • web-link - alternative link to a web app to be shown below app store links

Usage

  1. Get to know the situation: scheme of third party app, app store links, custom download link, fallback web app, etc.
  2. Generate the desired link for the case (see section "Generate Link")
  3. Receive the target app URI scheme or create your own
  4. Fill in all details between the single quotes in the example ' '
  5. Run the code in any console and receive the deep link
  6. Add the link to a static page or news post in your Staffbase-App by using the HTML attribute class="default-link-handling" on the link element.
1var webURL = 'https://app.staffbase.com/external/openapp.htm'
2var values = {
3 'target-app': '',
4 'ios-store-link': '',
5 'android-store-link': '',
6 'custom-install-link': '',
7 'web-link': '',
8}
9var isFirst = true
10webURL += '/external/openapp.html'
11for (var prop in values) {
12 if (values.hasOwnProperty(prop) && values[prop]) {
13 webURL += isFirst ? '?' : '&'
14 webURL += prop + '=' + encodeURIComponent(values[prop])
15 isFirst = false
16 }
17}
18console.log(webURL)

Example

Generate Link

As you can see all the special characters in the URL above, this is called escaping in order to safely use links within a URL. In order to do something like this, please use this JS console script to generate links for the customers. Just replace the web url and target app / link values on the top and then run it to get the desired link.

1var webURL = 'https://otiselevatorcompany-live.staffbase.com'
2var values = {
3 'target-app': 'com.sap.fiori.client.xcallbackurl://',
4 'ios-store-link': 'https://itunes.apple.com/app/id824997258',
5 'android-store-link': 'https://play.google.com/store/apps/details?id=com.sap.fiori.client',
6 'custom-install-link': '',
7 'web-link': 'https://www.sapfioritrial.com/sites?helpset=trial&sap-client=001',
8}
9var isFirst = true
10webURL += '/external/openapp.html'
11for (var prop in values) {
12 if (values.hasOwnProperty(prop) && values[prop]) {
13 webURL += isFirst ? '?' : '&'
14 webURL += prop + '=' + encodeURIComponent(values[prop])
15 isFirst = false
16 }
17}
18console.log(webURL)