Micro-apps typically open within the web view of Blink in an iFrame on all devices, allowing users to open links but stay within Blink. This is different than a shortcut in the Hub which always opens in a separate browser window. In cases where embedding within Blink is not feasible, using a shortcut to open the link in a separate browser window may be a preferable alternative.
We're aware that a number of applications do not support opening in an iFrame on desktop or the web app. Therefore, we developed a prefix URL that will allow the link to open within the app on mobile as well as open in a new browser window on the desktop and web versions. Additionally, some external systems may block loading within embedded frames (xFrame/iFrame), which can cause the link to fail when accessed through Blink. Troubleshooting these issues involves verifying the system's compatibility with embedded frames.
How to format micro-app URLs in the Hub
For the sake of this example, let's assume that your URL is https://my-wonderful-third-party-app.com?client=mycustomer&weather=beautiful.
This is how the microapp URL will be structured:
The encoded URL for your URL:
To encode a URL use this tool
Paste
https://my-wonderful-third-party-app.com?client=mycustomer&weather=beautifulinto the top box and click ENCODEYou will end up with the encoded URL:
https%3A%2F%2Fmy-wonderful-third-party-app.com%3Fclient%3Dmycustomer%26weather%3DbeautifulJoin the 2 together to generate your final link:
https://microapps.joinblink.com/utils/x-frame-options-handler?openDesktopInWindow=true&redirect=https%3A%2F%2Fmy-wonderful-third-party-app.com%3Fclient%3Dmycustomer%26weather%3DbeautifulAdd the above as the url for the microapps and you are done 🎉
Troubleshooting and Alternative Solutions
Troubleshooting Steps
Verify Link Formatting: Ensure the microapp link complies with Blink’s formatting requirements. Incorrect formatting is a common cause of link failures.
Check External System Compatibility: Confirm that the external system allows embedding within frames. If it does not, the link will not function within Blink.
Alternative Solutions
Use a Shortcut: Configure the destination as a shortcut with the URL. This method opens the link in the device’s web browser outside of Blink and only requires the URL.
Implement Single Sign-On (SSO): If users need to authenticate into the external system, set it up with SSO. This allows users to access the system seamlessly from Blink.
How to re-format micro-app URLs in the Hub to auto populate user details
Example URL provided by client:
Remove everything prior to the .com/ so you are left with this: abellioldn/pages/driver_vir_login.aspx?ff_aa_dr_employee_number=[employee_number]&ff_aa_dr_surname=[employee_surname]&ff_aa_category_id=NR
Then you need to url encode it so we can pass it as a query param using the following tool https://www.urlencoder.org/
Paste in
abellioldn/pages/driver_vir_login.aspx?ff_aa_dr_employee_number=[employee_number]&ff_aa_dr_surname=[employee_surname]&ff_aa_category_id=NRinto the top box and click ENCODEYou will end up with the encoded URL:
abellioldn%2Fpages%2Fdriver_vir_login.aspx%3Fff_aa_dr_employee_number%3D%5Bemployee_number%5D%26ff_aa_dr_surname%3D%5Bemployee_surname%5D%26ff_aa_category_id%3DNRJoin the 2 together to generate your final link: https://microapps.joinblink.com/tracerit/parse?url=abellioldn%2Fpages%2Fdriver_vir_login.aspx%3Fff_aa_dr_employee_number%3D%5Bemployee_number%5D%26ff_aa_dr_surname%3D%5Bemployee_surname%5D%26ff_aa_category_id%3DNR
Add the above as the url for the micro-apps and you are done 🎉.
Best Practices for Microapp Links
Test Links Regularly: Periodically test microapp links to ensure they are functioning correctly.
Stay Updated on External System Policies: Be aware of any changes in the external system’s policies regarding embedding or authentication.
Provide Clear Documentation: Ensure users have access to clear instructions on how to use microapp links and troubleshoot common issues.