Whats App link problem in iFrame

0 favourites
  • 6 posts
From the Asset Store
Firebase: Analytics, Dynamic Links, Remote Config, Performance, Crashlytics on Android, iOS & Web Browser
  • Hi, I have an iFrame that displays a web page which contain Whats App links.

    When I open the page normally on mobile (without construct 3) the WHats App link works perfectly and sends me straight to the WhatsApp app.

    EDIT: This also works perfectly well from Construct 3 IF using the remote preview.

    However, when I click the same link within a built APK it says that I haven't got whats app installed and it takes me to a page to download it and login to Google Play etc.

    How can I make this as seamless as it is when using the remote preview?

    Something to do with security or something? I tried allow * in my iFrame Allow permissions but it didn't help. I also tried allowing external write access when creating the build but that didn't help either.

    Thanks

    Tagged:

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads
  • I made some changes to my original post so I hope you don't mind me bumping this. I have a clear disparity between remote preview with iframe links and a debug apk.

    I'm sure it must be some kind of iframe parameter I need but I have no idea. Can anyone help?

    Thanks

  • If you play your app from your smartphone (APK installed), and the iframe display correctly, (you see the links) then it works fine. If there is a problem with the Allow Origin, the iframe wouldn't load at all. If you host the page on your server, you would need to configure your web server (Apache, for example) or simply edit the .htaccess and set the Access Control Allow Origin to *.

    If the iframe works correctly, and the problem is when the user click on the links, like they are getting redirected somewhere else (like the play store), then it means you need to change some configuration, or you can try to edit your link. You can try to edit the link and add the target as _blank, or you can try to use a shortener URL as well. If these options don't work, then you can try this way: https://stackoverflow.com/questions/32928318/using-cordova-how-can-i-open-external-urls-in-chrome-instead-of-the-in-app-bro

    There might be some other configuration you would need to set. You can add the JS provided in the solution directly into construct (if it apply also on the iframe, just add an alert to make sure) or directly into the iframe. I didn't test it, so you would need to try all of them. Hope this help

  • Thanks, the iFrame is working correctly so its an issue when clicking the button within the iFrame. I tried those suggestions but I'm still way off getting it working. (For a start a cant even access the iframe buttons via script..when I use getElementsByClassName on my iFrame I just get a returned array of length:0)

    As for changing the link, the problem is the link is something like "https://wa.me/1234567890" and its embedded into a google sheet. If I edit that link to something like:

    wa.me/1234567890 (with ?target=_blank appended)

    The link still takes me to the "Looks like you dont have Whats App installed" page on a built APK.

    I also tried ?target=_self but it has the same result.

  • I tried everything and in the end I'm having to re-create the content of the iframe inside C3 as new html just so this will work properly.

    Not sure its the best way to go but I couldn't find another solution.

  • I did notice that the iFrame is not the issue.

    Even if I tried to call the Whats app link through my own js/html the link would still fail. (I tried with all targets _blank,_self,_parent etc)

    However, if I make a js function call to my event sheet which in turn opens the URL then the link opens correctly.

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)