Custom URL Scheme Not A Link In Outlook (iOS/Android)

Our app can be started with a custom URL Scheme like myapp://mainpage?param=123. This works when it is included as a link in a web page. And, on iOS, it works in the mail client th

Solution 1:

iOS too supports Universal links. So, Instead of using custom scheme implement Universal link in iOS too.

It's an old repo, but might be helpful github.com/Satish/iOS-Universal-Links

You need to host apple-app-site-association at http://your-site.com/ domain (ie. http://your-site.com/apple-app-site-association).

 {
    "applinks": {
        "apps": [],
        "details": [
            {
                "appID": "XXXX.nnnn",
                "paths": [
                    "/yourpath"
                ]
            }
        ]
    }
 }

You can host this file on a single domain and send a URL with same domain http://your-site.com and send an identifier as a param to identify your business and take action in your app code.

Solution 2:

In email, we can hide content to a degree depending on the email client.

If you add this to your style sheet:

<style>
  .android {display: block;}
  .webkit {display: none;}

  @media screen and (-webkit-min-device-pixel-ratio:0) {
    .android {display: none;}
    .webkit {display: block !important;}
  }
</style>
<!--[if (gte mso 9)|(IE)]>
 <style type="text/css">
   .android {display: none;}
   .webkit {display: none;}
</style>
<![endif]-->  

This tells the email client if it's android or any email client, display the class .android The media query tells all webkit clients (Apple Mail, IOS) to hide android and display the webkit link.

<!--[if (gte mso 9)|(IE)]> creates a special style sheet to hide .android and .webkit classes from Outlook.

In the body of the email, do this:

<!--[if mso | IE]>
  Outlook Only: url://that-works-with-outlook
<![endif]-->
<!--[if !mso 9]><!-->
  <span class="android">All Email Clients: https://myapp/mainpage?param=123</span>
  <span class="webkit" style="display: none;">Webkit-only: myapp://mainpage?param=123</span>
<![endif]-->

<!--[if !mso 9]><!--> hides the Apple and other device urls from Outlook so they do not display in Outlook in your email.

<!--[if mso | IE]> hides Outlook-only urls from non Outlook clients.

.webkit class hides the Apple / IOS link from other clients.

.android hides the url that works for other clients from Outlook.

This way you can target Outlook, Apple and works for all other email clients without confusion to the end-user.

• https://jsfiddle.net/wallyglenn/w4z8tp8g/

Good luck.