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>
  window.botpressWebChat.init({
      "composerPlaceholder": "Chat with bot",
      "botConversationDescription": "This chatbot was built surprisingly fast with Botpress",
      "botId": "0f775c98-2565-40f8-8b3e-e3d7a2a8c3a2",
      "hostUrl": "https://cdn.botpress.cloud/webchat/v1",
      "messagingUrl": "https://messaging.botpress.cloud",
      "clientId": "0f775c98-2565-40f8-8b3e-e3d7a2a8c3a2",
      "webhookId": "d94ba799-728b-4b2e-a2df-b4c0bca5fde4",
      "lazySocket": true,
      "themeName": "prism",
      "frontendVersion": "v1",
      "useSessionStorage": true,
      "enableConversationDeletion": true,
      "showPoweredBy": true,
      "theme": "prism",
      "themeColor": "#2563eb"
  });
</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>
   ...

CSS

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