Content based on mobile OS?

I am looking for a solution to display specific content to users based on their device operating system that they are using.

My question: Is there a way to recognize if a user is using iOS or Android while looking at a Landing Page?

The goal here would be to, for example, to display different buttons to App stores (Apple Store, Google Play store) on a sticky banner. Or activate/deactivate sections on the LP if it’s, let’s say, an Android user.

1 Like

Hi @RobE

You can use window.navigator property to expose the userAgent that’ll get you what you need.
So try doing console.log(window.navigator.userAgent) . You can then hide/show elements on your page using Javascript/Jquery.

Hope this helps!
Malik

Hi @Malik

thank you for the info. I was able to read about the navigator functionality and it looks like it could work for me. I’m not a programmer and would like to understand the code better so i can midufy it by myself. Could you provide me an example of how this JS would works in unbounce?

Thank you!

Hey @RobE

Here is a quick JS for you;

<script>
  var userAgent = window.navigator.userAgent;
  console.log(userAgent);
  if (userAgent.search("Mac") > 0 ) {

    $( "#lp-pom-text-398").hide(); //ID of whatever element you want to hide on Mac

    
  } else if (userAgent.search("Windows") > 0)  {
     $( "#lp-pom-text-9" ).hide(); // //ID of element you want to hide on Windows
  }
 </script> 

In this Javascript I am indetifying between Windows and Mac and displaying a message on the featured section accordingly.

You can see this in action here:
http://unbouncepages.com/os-identifier/

Hope that helps!

I’ll throw my input in here as well. I work with apps so I use this script all the time.

In my case I have multiple buttons that say “open in app” all stacked on each other in the builder and each button has it’s own url.

<script>
  var isMobile = {
            Android: function() {
                return navigator.userAgent.match(/Android/i);
            },
            BlackBerry: function() {
                return navigator.userAgent.match(/BlackBerry/i);
            },
            iOS: function() {
                return navigator.userAgent.match(/iPhone|iPad|iPod/i);
            },
            Opera: function() {
                return navigator.userAgent.match(/Opera Mini/i);
            },
            Windows: function() {
                return navigator.userAgent.match(/IEMobile/i);
            },
            any: function() {
                return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
            }
        };
         if(isMobile.iOS()){
     $("#lp-pom-button-20").css('display', 'none');
     $("#lp-pom-button-16").css('display', 'block');
    }else if(isMobile.Android()){
     $("#lp-pom-button-16").css('display', 'none');
     $("#lp-pom-button-20").css('display', 'block');
    }else{
     $("#lp-pom-button-16").css('display', 'none');
     $("#lp-pom-button-20").css('display', 'block');
    }
</script>
2 Likes