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>
      window.botpressWebChat.init({
        "composerPlaceholder": "Chat with bot",
        "botConversationDescription": "This chatbot was built surprisingly fast with Botpress",
        "botId": "364ce888-4840-4bff-98b7-0a0834e68b08",
        "hostUrl": "https://cdn.botpress.cloud/webchat/v1",
        "messagingUrl": "https://messaging.botpress.cloud",
        "clientId": "364ce888-4840-4bff-98b7-0a0834e68b08",
        "webhookId": "e359d33c-95dd-4b67-9e6b-52be8f6a662b",
        "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>
      //REMOVE IF YOU DON'T...

CSS

body {
  background-color: purple;
  color: white;
}