Back to Blog

How to check if the user is on mobile or desktop PC

Java script is a powerful language that can be used to detect if the user is on a mobile or desktop device. That allows you to change the work flow based on the device. In this article we will create code that will check if the user is on a desktop device and if that’s the case we will automatically open the Web Widget after 5 seconds. To get the code working we will incorporate it by following 3 steps:

  1. Create a function to check the device
  2. Use the function to check the device
  3. Add delayed opening & trigger event

Javascript can also be used to check if the user is on a Homepage or Specific Page or you can Combine Functions to check if the user is one the homepage with a desktop device.

Desktop and Mobile Chatbot

1. Create function to check the device

To check if the user is desktop or mobile, in this example, we will check for the innerWidth by creating a function that will return true or false. If the width is greater than 768 px we consider it as a desktop device the function should return true when we call the function

<script>
window.desktopcheck = function() {
  var check = false;
  if(window.innerWidth>768){
      check=true;
  }
  return check;
}
</script>

2. Check if on desktop

The function is created and we can now call it. The function returns a boolean (true or false). The code below can be translated to something like: If it’s true that user is on desktop then …

<script>
if(window.desktopcheck()){
  // add code here
}
</script>

3. Add delayed opening and start event

The last step is to add some code to make sure the Web Widget will open after 5 seconds and the event ‘START_CHAT’ will be triggered.

<script>

// Delayed Opening
setTimeout(function() {
   __flowai_webclient_app.open()
  }, 5000) // 5 secs
  
  // Trigger Event
  window.__flowai_webclient_autoTriggerEvent = 'START_CHAT'

</script>

Find the complete code below

<script>
  window.desktopcheck = function() {
  var check = false;
  if(window.innerWidth>768){
    check=true;
    }
    return check;
  }

  if(window.desktopcheck()){
    setTimeout(function() {
      __flowai_webclient_app.open()
      }, 5000) // 5 secs

    window.__flowai_webclient_autoTriggerEvent = 'START_CHAT'
  }

</script>
Get StartedContact us