Whatsapp linking - android

Im currently working on a website for a client and am having some trouble getting a whatsapp link working on an Iphone. There is a button that should be redirecting the user to a whatsapp number, and it is doing to on my pc, but when I take it to my iphone suddenly it no longer works. Any ideas on what is happening?
<a id="app" target="_blank" href="https://wa.me/0896168600?text=I'm%20interested%20in%20man%20with%20a%20van"> <div class="whatsapp">
<div class="left">
<p>Contact on WhatsApp</p>
<p>089 61 68 600</p>
</div>
<div class="right">
<img src="/WhatsApp.svg.png" alt="">
</div>
</div>
</a>
Here are some images of the problem in action aswell as the link to the website and the whatsapp documentation used to write the code.
https://i.stack.imgur.com/YW5nW.png
https://faq.whatsapp.com/iphone/how-to-link-to-whatsapp-from-a-different-app/?lang=en
https://fiverrtestsite.netlify.app/

Please try this for mobile
So for a danish number +45 1234 5678 it would be
4512345678
Change 45 to your contry code
<a id="app" target="_blank" href="whatsapp://send?phone=4512345678"> </a>
OR
<a id="app" target="_blank" href="https://api.whatsapp.com/send?phone=4512345678"> </a>
This will only work for mobile, not for desktop. You shuld make a modal so when its clicked they can choose to open mobile or desktop version of the link.

Related

Ionic App not showing assets and ionic components properly on iOS

I have an ionic 3 app working in production on Android.
Now I just build the iOS version but I have a problem with the assets and some ionic components like ion-input.
For example I expect to see that screens:
But, instead I got these:
I already checked the absolute and relative paths for images but I don't have relative paths.
For example I have this type of paths:
<ion-slide class="third-slide">
<div class="flex-container">
<div class="image-container">
<img class="corner-image" src="/assets/img/corner_plants.png" alt="corner">
<img class="center-image" src="/assets/img/mariposa.png" alt="corner">
</div>
<div class="title-container">
<h1 class="title">
Regístrate para comenzar.
</h1>
</div>
<div class="description-container">
<ion-grid class="description-grid">
<ion-row>
<ion-col col-2 class="nav-button-column">
<button class="previous" (click)="onPreviousButtonClick()">
<img src="/assets/img/icons8-chevron_left.png" alt="next">
</button> </ion-col>
<ion-col col-8 class="description-column">
<p class="description">
Meditar te ayudará a cultivar la paciencia, mejorar tu capacidad de adaptación y liberar tensiones.
</p>
</ion-col>
<ion-col col-2></ion-col>
</ion-row>
</ion-grid>
</div>
<div class="access-buttons-container">
<button class="register-button" ion-button block round (tap)="openCreateAccountPage()">
{{ texts.btn_register }}
</button>
<button class="login-button" (tap)="openLoginOptionsPage()">
{{ texts.btn_login }}
</button>
</div>
</div>
</ion-slide>
And another weird thing is that the ionic components are not showing neither. You can see that the register page has three inputs and in the iPhone they don't appear. And I can't see the background image neither.
I researched about this but I could not find anything, because the most of the people only have problems with relative paths. I don't know what is the problem.
PD: Sorry for using images, but it's the only way I can share that.
Anyone can help me, please?
Thanks in advance.
EDIT:
The app works fine if, for example, I do login with facebook and navigate through it. It connects to firebase and then.. the problem is only that I mentioned.
In browsers works fine too.

ionic href inside ion-item not working in android real device

I have a <ion-item> with <a> inside it. I want the apps go to specific href when the <ion-item> is clicked.
The code is working perfectly in browser emulator (ionic serve), but it cant be clicked on the android real device.
This is my <ion-item> :
<ion-item>
<a href="http://google.com">
<img src="img/ionic.png">
<p>Events</p>
</a>
</ion-item>
Note that the above href goes to external html.
The href is working if i try to go to local html :
<ion-item>
<a href="#/jobs">
<img src="img/ionic.png">
<p>Jobs List</p>
</a>
</ion-item>
I have tried change href to ng-href, i also tried specify the href inside the ion-item tag. None of them is working.
I also tried to change the order of the html :
<a href="http://google.com">
<ion-item>
<img src="img/ionic.png">
<p>Forum</p>
</ion-item>
</a>
Its still not working.
Please kindly help me, Thanks for your help
UPDATE
I also tried to use inappbrowser :
<ion-item>
<a href="#"
onclick="window.open('http://google.com', '_system', 'location=yes'); return false;">
<img src="img/ionic.png">
<p>Guide</p>
</a>
</ion-item>
But no luck on the real device
you can install in-app browser plugin in your cordova http://ngcordova.com/docs/plugins/inAppBrowser/
or if you don't want, just use $window.open('http://google.com', '_system'); in your controller
source : http://forum.ionicframework.com/t/linking-to-an-external-url-and-opening-in-browser/30953

Page redirection for mailto and tel links on Android

I have a working Cordova iOS app. Now I am working on an Android app. I have a "contact us" page where I have a link:
<a id="lnkEmail" style="border: none;box-shadow: none;text-align: left;" data-role="button" href="#"> support#website.com </a>
$('#lnkEmail').on('click',function(){
document.location.href = "mailto:support#site.com";
});
The page is redirected to a "webpage not available" error page while the link opens in an email client. How do I stop page redirection? I have tried:
<a style="border: none;box-shadow: none;text-align: left;" data-role="button" **href="mailto:support#site.com"** target="_top">support#site.com </a>
As well as:
<a id="lnkEmail" style="border: none;box-shadow: none;text-align: left;" data-role="button" **href="javascript: void(0);"**>support#site.com</a> support#site.com </a>
How can I fix this ?
There is a bug on how the mailto is handled and it try to navigate to the page before loading the email client.
You can try using inAppBrowser plugin
window.open('mailto:support#site.com', '_system');

Android Webview href not working

I am using the following code in my Webview along with Jquery Mobile, This works fine in the emulator (2.2 ) and on my Nexus one but some users are complaining that when they click on a link they get an error message "Problem with File: Requested file not found". One user reported that she was using Samsung Fascinate with "2.2.1" . This seems to have started when I upgraded jquery mobile 1.0b2 , I have tried the latest 1.0rc but still have the same issue
Any Insights on what might be happening ?
In my Activity
engine.loadUrl("file:///android_asset/book2/www/newindex.html");
In the html ( I have also tried data-ajax="false" )
<link rel="stylesheet" href="jquery/jquery.mobile-1.0rc1.min.css" />
<script type="text/javascript" src="jquery/jquery.mobile-1.0rc1.min.js"></script>
<div data-role="page" id="jqm-home">
<div data-role="content" data-theme="e">
<div class="content-primary">
<nav>
<ul data-role="listview" data-inset="true" data-theme="e" data-dividertheme="d" >
<li data-role="list-divider">Cognitive</li>
<li><a rel="external" href="./cogn/simon2.html">
<img src="cogn/simon.jpg" />
<h3>Simon says</h3>
<p>Memory</p>
</a></li>
From what I know about URL loading, if you are loading a local file, which is what it looks like here, that file needs to be in the same directory as the file its linking from. Because the file is local on your computer, your device and emulator should work fine. for someone else who downloads the app and tries to use the Webview functionality, that source file would need to be stored in their phone and in the appropriate directory...hope that helps.

how to create telephone links in xhtml MP

I'm trying to construct a little mobile optimized web. This web list a set of results for business and I need that android interpret the telephone link.
I have watch other webs and android show an especial intem for telephone links (with a telephone green image in a grey button) but when I try it, it seems like a usual link.
I have tried with microformars (vcard) and it not works.
My code:
<ul id="search-results">
<li class="vcard" id="i53380"><!-- pro//ginecologo_madrid/clinica-dam/ -->
<p class="fn">
<a class="url" href="/ginecologo_madrid/clinica-dam/">Name of bussiness</a>
</p>
<p class="adr"><span class="street-address">Street - zipcode</span> <span class="locality">Locality</span></p>
<p class="tel">
<a href="tel://+34 XXXXXXXXX" class="value" >+34 XXXXXXXXX</a>
</p>
</li>
<!-- more results -->
Any idea?
There should be no // after the :
its
tel:+34 XXXXXXXXX
and NOT tel://+34 XXXXXXXXX

Categories

Resources