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?

How to make a "counter" for variables

How to not display Proactive Message to repeating Visitors

Contact