Is there a way to know which browser the user is using?

Ask the community
,
1

made this site: https://www.streetsmuseum.com/
and on safari the geo location does not works…any idea how to fix it?
i used for now light box that inform users about this issue,
would love to show this light box only to Safari’s users.

Thanks!

2

As to my knowledge, you cannot do this directly in Wix. But I would give the following a try:

  1. put in html component
  2. in its html bodyonLoad(function) send a message to Wix containing the userAgent
  3. in Wix, wait with onMessage till you got your info and act accordingly

Hope this helps.

3

Thanks Giri, will learn what does it means and try it (:

4

Here’s a good place to start:

There’s also an example which shows how to communicated between Wix Code JS and the JS within an HTML Component - https://www.wix.com/code/home/example/Chart

5

Giri that sounds promising - any chance you could give us a code snippet. Obviously the only reason for the HTML component would be to get the useragent so I’m not entirely sure what you are meaning by onMessage() ?

6

Wix fan here, but Wix should have a simple API for this by now.
I did this implementation of 2fa for JS, and I found it almost easier than getting simple browser info :wink:

Maybe this will help some noobs like myself.

Place this into your HTML element (you can see the options in the comments):

<!doctype html>
<html>
<head>

<script type="text/javascript">
function init () {
  // when a message is received from the page code
  window.onmessage = (event) => {
    if (event.data) {
      // console.log("HTML Code Element received a message!");
      //insertMessage(event.data);
      var msg = "";
      msg = {                  
        //  formatting for an object for logging in wix collections
        "Browser CodeName":navigator.appCodeName,
        "Browser Name":navigator.appName,
        "Browser Version":navigator.appVersion,
        "Cookies Enabled":navigator.cookieEnabled,
        "Browser Language":navigator.language,
        "Browser Online":navigator.onLine,
        "Platform":navigator.platform,
        "User-agent header":navigator.userAgent
      }

/*    formatting for an HTML text field:
      msg += "<p>Browser CodeName: " + navigator.appCodeName + "</p>";
      msg += "<p>Browser Name: " + navigator.appName + "</p>";
      msg += "<p>Browser Version: " + navigator.appVersion + "</p>";
      msg += "<p>Cookies Enabled: " + navigator.cookieEnabled + "</p>";
      msg += "<p>Browser Language: " + navigator.language + "</p>";
      msg += "<p>Browser Online: " + navigator.onLine + "</p>";
      msg += "<p>Platform: " + navigator.platform + "</p>";
      msg += "<p>User-agent header: " + navigator.userAgent + "</p>";
*/
      window.parent.postMessage(msg, "*");
// console.log(msg);
    }
  }
}

// display received message
function insertMessage(msg) {
  // document.getElementById('demo').innerHTML = msg;
  // sendReturnMessage("Message from the HTML Component!");
}

// send message to the page code
function sendReturnMessage(msg) {
  window.parent.postMessage(msg, "*");
}
</script>

</head>

<body <body onload="init();" >
//<p id="demo">Msg</p>
</body>
</html>

Then, place this code inside the “On ready” function:

// when a message is received from the HTML element
$w("#html1").onMessage( (event) => {
    let browser_info = event.data;
    console.log("ON READY browser data1: " , browser_info);
} );

Finally, call the “get browser info” function inside the HTML element from wherever you need it (within the same page).

$w("#html1").postMessage("Get browser info");
1 Like
7

Thank you for this! (:

8

I may be being daft here but it always returns Mozilla Netscape for me. Regardless of the browser. Any ideas?

9

@lhoarnold see:

10

@brainstorrrm how and where can I view the browser details? You said in a comment that I can log it in a wix collection (if I understood alright), which is exactly what I’m trying to do but I’m not getting there. Right now, I only see the browser info show up in the console. Any insights would be appreciated :slight_smile: thank you.

11

Store browser_info in a text field inside a collection. That’s it.

12

Sorry, I don’t know how. It sounds very straightforward but it’s not working. Do I just add a new column called browser_info? Or do I have to do something with the code in order to connect it with that field?

13

Thank you! I was getting worried I was going to have to transfer my website over to another platform. Phew!