I have a massive Hype document with several hyperlinks to specific URLs.
My client wants to be able to access one URL when viewing content on an iPad, and a different URL when viewing content on a desktop using Firefox or Chrome.
I can create two separate Hype documents, but I’m guessing that there’s a way to Javascript to detect the browser and based on that information, open the appropriate URL — all within the same Hype document.
Can someone help?
Thanks in advance.
Joe
The way I would do this is use a regular navigator detection, and then show a timeline which swaps out a different element based on what is detected (you can have the animation be instant, but in this demo I animate it in):
checker.hype.zip (12.0 KB)
var ua = navigator.userAgent;
// console.log(ua)
var checker = {
iphone: ua.match(/(iPhone|iPod)/),
firefox: ua.match(/(Firefox)/),
android: ua.match(/Android/),
chrome: ua.match(/Chrome/)
};
if (checker.android){
//
}
if (checker.chrome){
hypeDocument.startTimelineNamed('chrome', hypeDocument.kDirectionForward);
}
if (checker.firefox){
hypeDocument.startTimelineNamed('firefox', hypeDocument.kDirectionForward)
}
else if (checker.iphone){
//
}
else {
// none of the browsers listed were detected, so do something for all else here
}
To make more detection scripts, you’ll need to see what the browser’s name is, or some other unique identifier. (Don’t use the browser version since that changes).
Here’s a nice way to see that onscreen which you can load from your device: https://jsfiddle.net/kmturley/Gd6c8/
What are the different URLs that you’re sending folks to? If there’s some query string you’re adding to the end of a URL this could be a lot simpler. (For example, sending iPads to:https://example.com/site.html?ipad )
Thanks Daniel!
There are hyperlinks in the document that currently point to URLs within a sales enablement platform. I can’t change those URLs.
When outside of the sales enablement platform, the user would access public-facing URLs, also outside of my ability to change.
Will dig in deeper to what you’ve shared. Than you so much!
Joe
Back for more 
So I added a timeline for iOS and modified the javascript to start that timeline when there's a match. Hype file attached; also at https://joezeff.design/checker_joe
iPhone, mobile Safari: starts iOS timeline
iPad, Chrome browser: starts iOS timeline, not Chrome timeline
iPad, mobile Safari: starts no timeline
Hmmm.
How can I tweak so that instead of recognizing the browser, I recognize the OS?
TIA.
Joe
checker_joe.hype.zip (12.5 KB)
You can use https://developer.mozilla.org/en-US/docs/Web/API/NavigatorID/platform to detect that.
So in https://jsfiddle.net/kmturley/Gd6c8/ you can see what your current machine is showing and you can run the same kind of checker with that value.
var ua = navigator.userAgent;
var platform = navigator.platform.toUpperCase();
console.log(ua)
var checker = {
iphone: ua.match(/(iPhone|iPod|iPad)/),
firefox: ua.match(/(Firefox)/),
android: ua.match(/Android/),
chrome: ua.match(/Chrome/),
mac: platform.match(/Mac/),
};
if (platform.indexOf('MAC')>=0) {
hypeDocument.startTimelineNamed('Mac', hypeDocument.kDirectionForward);
}
if (checker.iphone){
hypeDocument.startTimelineNamed('ios', hypeDocument.kDirectionForward);
//
}
if (checker.chrome){
hypeDocument.startTimelineNamed('chrome', hypeDocument.kDirectionForward);
}
if (checker.firefox){
//
hypeDocument.startTimelineNamed('firefox', hypeDocument.kDirectionForward)
}
else if (checker.android){
//
}
else {
}
checker_joe.hype.zip (14.1 KB)
Yeah, it's me again. Thought you were done with me 
I've attached code that works like a charm. With one exception: the buttons don't work in iOS.
I see that others have had this issue — not sure how to fix. Can you help?
checker_joe4x.hype.zip (16.1 KB)
Thanks in advance, Daniel!
Joe
The links go to ipresent://resource?resource=Lower+Costs.+Stronger+401(k)+plans.&guid=adab62b3-2077-4b1c-937e-49216f327cfe
While the desktop versions go to regular URLS -- so the iOS device would likely need the ipresent app installed?
I see this:
So the link 'works' but I don't have an app that handles that URL scheme.
Is this loaded inside of an app? Do you have iPresent installed?
Hi Daniel
Yes, I have placeholder links in. If I view in iOS, the buttons don’t respond to touch. Why would you be able to access in iOS and i can’t? Hmmm....
Joe
So, the behavior you’re seeing is desired. Which is good.
I uploaded to joezeff.design/checker_joe4x
On my phone, I get what you get.
On my iPad, I get the Mac timeline, not the iOS timeline.
Which is weird but at least I get one timeline that I can target with specific behaviors.
When you use Hype Reflect on your phone using the Hype file I sent, are the buttons clickable?
For me, they’re not.
Thanks, and sorry.
Replying from forums to avoid signature line . . .
So, the behavior you’re seeing is desired. Which is good.
I uploaded to joezeff.design/checker_joe4x
On my phone, I get what you get.
On my iPad, I get the Mac timeline, not the iOS timeline. Not sure why.
But at least I get one timeline that I can target with specific behaviors.
When you use Hype Reflect on your phone using the Hype file I sent, are the buttons clickable? For me, they’re not. And I'm guessing that the answer to that question answers why those buttons aren't responding in iPresent.
Thanks, and sorry.
Reflect does not support opening links in new windows unfortunately. I recommend previewing in Safari from Hype Reflect to truly replicate how Safari will handle your custom URLs.
Hi Daniel,
Thanks for your "Browser detection to hyperlink to corresponding URL" I can work with it very well! I only have one problem with the "iPad detection". The iPad always responds to Mac detection.
var ua = navigator.userAgent;
var platform = navigator.platform.toUpperCase();
console.log(ua)
var checker = {
Macintosh: ua.match(/Mac/),
iphone: ua.match(/(iPhone)/),
iPad: ua.match(/(iPad)/),
firefox: ua.match(/(Firefox)/),
android: ua.match(/Android/),
chrome: ua.match(/Chrome/),
Opera: ua.match(/opera/),
};
if (checker.Macintosh){
hypeDocument.startTimelineNamed('Mac', hypeDocument.kDirectionForward);
}
if (checker.iphone){
hypeDocument.startTimelineNamed('ios', hypeDocument.kDirectionForward);
}
if (checker.iPad){
hypeDocument.startTimelineNamed('iPad', hypeDocument.kDirectionForward);
}
if (checker.chrome){
hypeDocument.startTimelineNamed('chrome', hypeDocument.kDirectionForward);
}
if (checker.android){
hypeDocument.startTimelineNamed('android', hypeDocument.kDirectionForward)
}
if (checker.firefox){
hypeDocument.startTimelineNamed('firefox', hypeDocument.kDirectionForward)
}
if (checker.Opera){
hypeDocument.startTimelineNamed('opera', hypeDocument.kDirectionForward)
}
else {
}
AR-Vermittler-000.hype.zip (13,7 KB)
The script runs very well on iPhone, Mac Chrome + Firefox, have a look here:
https://www.nextgreen.de/A/Sa/18/w0AR/
I tested the iPad at: https://jsfiddle.net/kmturley/Gd6c8/
os.name = iPad
os.version = 14.42
browser.name = Safari
browser.version = 14.03
navigator.userAgent = Mozilla/5.0 (iPad; CPU OS 14_4_2 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.0.3 Mobile/15E148 Safari/604.1
navigator.appVersion = 5.0 (iPad; CPU OS 14_4_2 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.0.3 Mobile/15E148 Safari/604.1
navigator.platform = iPad
navigator.vendor = Apple Computer, Inc.
Do you have any idea what might be the cause? Thanks Ralf
This is the result of iOS 13's "Request Desktop Site" being turned on by default via the Settings > Safari > Request Desktop Site.
TBH I don't know what jsfiddle is doing to still be treated like an iPad. I tried copying their meta tags but had no luck in getting the same behavior.
It doesn't look like there's a great way to detect being on an iPad -- in this SO question it looks like folks are looking for iOS-only properties like navigator.maxTouchPoints or navigator.standalone.
My general recommendation would be to base your behaviors on a width rather than device if you can.
Hi jonathan,
Thanks for the information. "navigator.standalone" and "navigator.maxTouchPoints"
let the sin build into the script? rather not?
I need the exact specification of the respective device to find out whether the device is AR compatible or not. iPhone yes works immediately! Desktopn no!
Android only with ARCore from Google.
look here the ihone is AR-working
https://www.nextgreen.de/A/Sa/18/w0AR/index.html
That's very cool!
It looks like Apple's page on AR for Safari has feature detection code:
const a = document.createElement("a");
if (a.relList.supports("ar")) {
// AR is available.
}
Jonathan
You're right that's a good approach. The AR icon is only displayed if it is also an AR device! I am still looking for a solution if it is not an AR device a QR code is displayed. Like this: https://www.nextgreen.de/0000/
I found something at Stackoverflow.https://stackoverflow.com/questions/46717533/detecting-arkit-compatible-device-from-user-agent
I wrote this here. The script reads out AR divices. The AR-Icon is visible by Ar-divices.
At not AR-Divices is no AR-Icon displayed. That's works ... But, if the timeline should only run if it is not an AR capable device then it should be called: isRelAR = false ... But then the timeline does not work
var a = document.createElement('a');
if (a.relList.supports('ar')) {
isRelAR = true;
}
if (isRelAR = true){
hypeDocument.startTimelineNamed('Mac', hypeDocument.kDirectionForward);
}
what am I doing wrong here. I have no idea, am too inexperienced in javascript. do you have any idea?w0usdz-javadetection.hype.zip (71,6 KB)
The first problem is that in your if (isRelAR = true){ statement, you only use a single equals. Single is for assignment, and double is for equality. So that should be if (isRelAR == true){. The second problem will be that isRelAR hasn't been defined in that check if it is true, which will lead to an error. So you'll need to declare the variable first. Adjusted code for your 333 function:
var isRelAR = false;
var a = document.createElement('a');
if (a.relList.supports('ar')) {
isRelAR = true;
}
if (isRelAR == true){
hypeDocument.startTimelineNamed('Mac', hypeDocument.kDirectionForward);
}
thank Jonathan, it runs ! Juuuhuuuuu ...
I just changed "== false"
var isRelAR = false;
var a = document.createElement('a');
if (a.relList.supports('ar')) {
isRelAR = true;
}
if (isRelAR == false){
hypeDocument.startTimelineNamed('Mac', hypeDocument.kDirectionForward);
}
Now all AR capable devices can directly access the AR product and all non AR capable divices see the text after starting the timeline.
Here is the hype document for the solution
w0usdz-javadetection.hype.zip (71,4 KB)
Oh ha, I should have realized the logic was also reverse! I'm glad you got it!