Blog overzicht

Hoe je kan controleren of de gebruiker een mobiele telefoon of desktop pc gebruikt

Javascript is een krachtige taal die kan worden gebruikt om te detecteren of de gebruiker een mobiel of desktopapparaat gebruikt. Hiermee kun je de workflow wijzigen op basis van het apparaat. In dit artikel zullen we een code maken die controleert of de gebruiker op een desktop-apparaat zit en als dat het geval is, openen we automatisch de Web Widget na 5 seconden. Om de code te laten werken, zullen we deze opnemen door 3 stappen te volgen:

  1. Maak een functie om het apparaat te controleren
  2. Gebruik de functie om het apparaat te controleren
  3. Voeg een vertraagde opening en Event Trigger toe

Javascript kan ook gebruikt worden om te checken of de gebruiker op de Homepage of een andere Specifieke Pagina is, of je kan Functies Combineren, om op die manier te controleren of een desktopgebruiker op je homepage is.

Desktop en Mobiele Chatbot

1. Maak een functie om het apparaat te controleren

Om te controleren of de gebruiker desktop of mobiel is, zullen we in dit voorbeeld de innerWidth controleren door een functie te maken die true of false retourneert. Als de breedte groter is dan 768 px, beschouwen we het als een desktopapparaat, dus dan moet de functie true retourneren wanneer we de functie aanroepen.

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

2. Gebruik de functie om het apparaat te controleren

De functie is gemaakt en we kunnen hem nu oproepen. De functie retourneert een booleaanse waarde (true of false). De onderstaande code kan worden vertaald naar iets als: Als het waar is dat de gebruiker een desktop gebruikt, dan …

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

3. Voeg een vertraagde opening en Event Trigger toe

De laatste stap is om wat code toe te voegen om ervoor te zorgen dat de Web Widget na 5 seconden wordt geopend en de gebeurtenis ‘START_CHAT’ wordt geactiveerd.

<script>

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

</script>

De uiteindelijke code komt er dan zo uit te zien:

<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>
Demo aanvragen