JavaScript 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 guide 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:
- Create a function to check the device
- Use the function to check the device
- 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.
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>
