[THIS IS OUTDATED]
Please check the new post here: https://www.siberiancms.com/community/d/1474-links-in-source-code-custom-tab-in-app-browser-or-external-app
Using the source code module, you can creates links to open external apps, like what's app or google map.
Here are some samples of examples about how to realize this using the source code module:
In your Source code modules, add the following:
<!-- What's app share message-->
<a href="whatsapp://send?text=Hello%2C%20World!" target="_system">Send message to WhatsApp</a>
<br><br>
<!-- What's app to specific number android & ios-->
<a href="whatsapp://send?text=Hello%2C%20World!&phone=+3312345678&abid=+3312345678">Whatsapp me please</a>
<br><br>
<!-- Tel -->
<a href="tel://+33012345678" target="_system">tel</a>
<br><br>
<!-- Sms -->
<a href="sms://+3312345678?body=Hello%2C%20World!.">Send a SMS message</a>
<br><br>
<!-- Email-->
<a href="mailto://bob@bob.fr" target="_system">mailto</a>
<br><br>
<!-- open app for navigation - geo:latitude,longitude - more on https://developers.google.com/maps/documentation/urls/android-intents -->
<a href="geo:48.858370,2.294481" target="_system">Tour eiffel</a>
<br><br>
<!-- search for restaurant - geo:latitude,longitude?q=restaurants - more on https://developers.google.com/maps/documentation/urls/android-intents -->
<a href="geo:48.858370,2.294481?q=restaurants" target="_system">Resturants next to the Tour Eiffel</a>
<br><br>
<!-- waze-->
<a href="waze://?ll=43.5367,1.52806&navigate=yes" target="_system">waze</a>
<br><br>
With some more work on design:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
box-sizing: border-box;
}
a {
color: white;
}
.row::after {
content: "";
clear: both;
display: table;
}
[class*="col-"] {
float: left;
padding: 15px;
}
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
html {
font-family: "Lucida Sans", sans-serif;
font-size: 10px;
}
.header {
background-color: #6b46e5;
color: #ffffff;
padding: 15px;
}
.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.menu li {
padding: 8px;
margin-bottom: 7px;
background-color: #33b5e5;
color: #ffffff;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.menu li:hover {
background-color: #0099cc;
}
</style>
</head>
<body>
<div class="header">
<h1>External links</h1>
</div>
<div class="row">
<div class="col-3 menu">
<ul>
<li><!-- What's app share message-->
<a href="whatsapp://send?text=Hello%2C%20World!" target="_system"><img src="https://img.icons8.com/officel/80/000000/whatsapp.png" height="80px"></a></li>
<li><!-- What's app to specific number android & ios-->
<a href="whatsapp://send?text=Hello%2C%20World!&phone=+3312345678&abid=+3312345678"><img src="https://img.icons8.com/officel/80/000000/whatsapp.png" height="80px"></a></li>
<li><!-- Tel -->
<a href="tel://+33012345678" target="_system"><img src="https://image.flaticon.com/icons/svg/273/273501.svg" height="80px"</a> </li>
<li><!-- Sms -->
<a href="sms://+3312345678?body=Hello%2C%20World!."><img src="https://image.flaticon.com/icons/svg/234/234129.svg" height="80px"></a></li>
<li><!-- Email-->
<a href="mailto://bob@bob.fr" target="_system"><img src="https://image.flaticon.com/icons/svg/204/204322.svg" height="80px"></a> </li>
<li><!-- open app for navigation - geo:latitude,longitude - more on https://developers.google.com/maps/documentation/urls/android-intents -->
<a href="geo:48.858370,2.294481" target="_system"><img src="https://image.flaticon.com/icons/svg/382/382522.svg" height="80px"></a> </li>
<li><!-- search for restaurant - geo:latitude,longitude?q=restaurants - more on https://developers.google.com/maps/documentation/urls/android-intents -->
<a href="geo:48.858370,2.294481?q=restaurants" target="_system"><img src="https://image.flaticon.com/icons/svg/608/608671.svg" height="80px"></a> </li>
<li><!-- waze-->
<a href="waze://?ll=43.5367,1.52806&navigate=yes" target="_system"><img src="https://image.flaticon.com/icons/svg/1527/1527531.svg" height="80px"></a> </li>
</ul>
</div>
<div class="col-9">
<h1>Examples of links opening in external apps</h1>
<p>You create custom pages with rich links</p>
<p>There are more possibilites, you can search google to find mode usages of those links</p>
</div>
</div>
</body>
</html>
This has been tested on Android only. If you have suggestions, ideas about that, feel free to share to everyone