JSFiddle - React, Tailwind, and code Playground

by devmik

HTML

<html>

  <body>
    <h1>
      Detect users language
    </h1>
    <script src="https://cdn.botpress.cloud/webchat/v1/inject.js"></script>
<script src="https://cdn.botpress.cloud/webchat/v1/inject.js"></script>
<script src="https://mediafiles.botpress.cloud/3aefab65-e900-4d87-a4ca-660e425f9ca8/webchat/config.js" defer></script>

    <button id="timeButton">TIME</button>


    <script>
      window.botpressWebChat.onEvent(
        function(event) {
          const userTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
          const currentTime = new Date();
          const currentHour = currentTime.getHours();
          const timeString = currentTime.toString();
          console.log("TIMEZONE: " + userTimeZone)
          console.log("TIME: " + currentTime)
          console.log("HOUR: " + currentHour)
          const userLanguage = (navigator.language || navigator.userLanguage).substring(0, 2);
          console.log("USER LANGUAGE: " + userLanguage);

          window.botpressWebChat.sendPayload({
            type: 'trigger',
            payload: {
              userLanguage: userLanguage,
              userTimeZone: userTimeZone,
              currentTime: currentTime,
              timeString: timeString,
              currentHour: currentHour
            }
          });


        },
        ['LIFECYCLE.READY']
      )

    </script>

    <script>
      //REMOVE IF YOU DON'T NEED THE TIME BUTTON
      document.getElementById('timeButton').addEventListener('click', function() {

        const userTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
        const currentTime = new Date();
        const currentHour = currentTime.getHours();
        const timeString = currentTime.toString();
        console.log("TIMEZONE: " + userTimeZone)
        console.log("TIME: " + currentTime)
        console.log("HOUR: " + currentHour)
        const userLanguage = (navigator.language || navigator.userLanguage).substring(0, 2);
        console.log("USER...

CSS

body {
  background-color: brown;
  color: yellow;
}