Detect if a visitor is on Mobile/Tablet or Desktop

Pau Sanchez Updated by Pau Sanchez

To suit a better experience or a different solution depending on the device the user is browsing with, we can set up a "detector" and a condition to redirect the user one way or another. Also we can keep this information for later use.

Landbot v3

This is going to be our flow:

  1. As we want to detect the device used as soon as the bot loaded, we will need to add the following code in the Design / Custom Code / Add JS section:

<script>
var landbotScope = this;
  this.onLoad(function() { 
    let checkMobile = (/Mobile|iP(hone|od|ad)|Android|BlackBerry|IEMobile|Kindle|Silk-Accelerated|(hpw|web)OS|Opera M(obi|ini)/.test(navigator.userAgent)) ? landbotScope.setCustomData({mobile: "true"}) : landbotScope.setCustomData({mobile: "false"})
  })  
</script>

  1. Right after the Welcome Message, we will have available the value (true or false) in the variable "mobile" that we need to create in Landbot, with the format of a String:

  1. Now, right after the welcome message, add Conditional block as below:

That's it, now you have created 2 flows to redirect users based on their device. Also the variable mobile will be available for you.

Landbot v2

This is going to be our flow:

  1. As we want to detect the device used as soon as the bot loaded, we will need to add the following code in the Design / Advanced / Add JS section:

<script>

let checkMobile = (/Mobile|iP(hone|od|ad)|Android|BlackBerry|IEMobile|Kindle|Silk-Accelerated|(hpw|web)OS|Opera M(obi|ini)/.test(navigator.userAgent)) ? Landbot.exec('landbot-custom-data',{"mobile": "true"}) : Landbot.exec('landbot-custom-data',{"mobile": "false"});

</script>

  1. Right after the Welcome Message, we will have available the value (true or false) in the variable "mobile" that we need to create in Landbot, with the format of a String:

  1. Now, right after the welcome message, add Conditional block as below:

That's it, now you have created 2 flows to redirect users based on their device. Also the variable mobile will be available for you.

How did we do?

Hide time stamp (under avatar)

Proactive Message Customizations with Javascript and CSS

Contact