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”.
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://
- 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
- Get to know the situation: scheme of third party app, app store links, custom download link, fallback web app, etc.
- Generate the desired link for the case (see section "Generate Link")
- Receive the target app URI scheme or create your own
- Fill in all details between the single quotes in the example ' '
- Run the code in any console and receive the deep link
- 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 = true10webURL += '/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 = false16 }17}18console.log(webURL)
- very basic: only forwards to the native app, but doesn't offer any fallback options
- advanced: includes fallback links to app stores if the app is not installed. It even offers an alternative web app!
- What if third party apps are not on the public app stores?: offers a custom download link (e.g. internal app store) as fallback if app is not installed.
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 = true10webURL += '/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 = false16 }17}18console.log(webURL)