Copy these Botpress chatbot scripts into your website as always

That code detects the users language and correct time before the user has send any messages.

This is additional code, to include a button which you can click and get the same results again (mainly for testing purposes)

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

js
    <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 LANGUAGE: " + userLanguage);

        window.botpressWebChat.sendPayload({
          type: 'trigger',
          payload: {
            userLanguage: userLanguage,
            userTimeZone: userTimeZone,
            currentTime: currentTime,
            timeString: timeString,
            currentHour: currentHour
          }
        });
      });
      // REMOVE UNTIL HERE IF YOU DON'T NEED THE TIME BUTTON

    </script>

This is what the chatbot looks like. It may be the opening workflow for your larger use case, as it doesn't do much yet.

first add a Trigger, and select Custom Trigger Advanced

That trigger is listening when data comes from the website into your chatbot. Then add an Expression card with the condition event.payload.payload

Then add another Node with Execute code card and Set User Language gard  Execute code card to set the users language, timely greeting, correct time and timezone

js
let { userLanguage, userTimeZone, timeString, currentTime, currentHour } = event.payload.payload

user.TranslatorAgent.language = event.payload.payload.userLanguage

workflow.userLanguage = userLanguage

let timelyGreeting = '';
if (currentHour >= 0 && currentHour < 12) {
  timelyGreeting = 'Good morning, Boss';
} else if (currentHour >= 12 && currentHour < 18) {
  timelyGreeting = 'Good afternoon, Boss';
} else {
  timelyGreeting = 'Good evening, Boss';
}
 
workflow.timelyGreeting = timelyGreeting
workflow.userTimeZone = userTimeZone
workflow.currentTime = timeString

add these workflow variables

in Set User Language card use this: @workflow.userLanguage

Add another Node with Text card, use this @workflow.timelyGreeting

last Node, an AI Task to write a limerick based on user's timezone or hometown (just for laughs 😂 ) AI Task input: @workflow.userTimeZone Store the result: @workflow.limerick and then a Text card to send the second message (after timely greeting) to the user @workflow.limerick

Code Playground and chatbot https://jsfiddle.net/devmik/sL05co4f/60/

I tested on two computers with different languages (system settings), and both worked correctly. If you test this, and your computer's settings are in a language other than English, please let me know if it works, or better yet, post a picture 🤖

so go to that jsfiddle web page where the chatbot is (that link earlier), and click the bot open. After a few seconds it should greet you in the right language and also give the correct time.

also when you click the TIME button after first opening the bot, you'll get the same results

For example, if the user's computer was originally installed with English as the operating language, and this is still the system setting, but the user has changed to another language (e.g., because of an external keyboard or some other reason). The navigator.language property in JavaScript typically reflects the user's preferred language settings as configured in their browser. However, if the user has changed their device's language settings, and the browser respects those settings, then navigator.language should reflect the updated language. 💡 So, if the user's system settings are originally 'en-US', but they've changed the device's language to something else (e.g., 'fr-FR'), and the browser takes that into account, then navigator.language should return the updated language (e.g., 'fr' for French) rather than the default 'en-US.' The behavior might vary slightly depending on the browser and operating system. It's always good practice to test your code in different environments to ensure it behaves as expected. 🔍 The default here (in this method) is that the user's preferred language for the chatbot is the same as the language in which everything on the user's computer is, including web browsers, menus, folders, etc. If there are a lot of testers who have changed the language to be other than the system settings, or for some other reason it doesn't work, then let's make the next version of this which works for them too (if possible).

There is an example webpage

code included

I would be user usefull for me 🦾⚡︎

Even if it would take him 3 years, no sleep, 3069 cans of red bull and 5.2% of his life expectancy

yeah, @quick-musician-29561 is the goat

@quick-musician-29561 years ago

@quick-musician-29561 don't forget about this 🥲

You can also try it on CodeSandbox. I left my bot details there, which I don't mind sharing now. I'll delete that bot when we have tested enough 🛠️ https://codesandbox.io/p/sandbox/interesting-wiles-pznytk?file=%2Fsrc%2FApp.js%3A65%2C21

So if it works properly, it should show a greeting to the user using the correct language (from the user's device settings, more instructions earlier in this thread), and then use an AI Task to write a limerick based on the user's timezone or hometown (just for laughs).

The toturial you needed

double-check that you have the latest jsfiddle link, and that you've also published your chatbot

Try it here https://jsfiddle.net/devmik/sL05co4f/66/

I tried with this bot file https://cdn.discordapp.com/attachments/1191029818083512380/1231276708733386904/detect-users-language_-_2024_Apr_20.bpz?ex=66365ecb&is=6623e9cb&hm=30d2fcd7e00bddb1d694083e03e2707bfba6610d3b013e291e800e653e6f6f01&

import that and click Publish https://cdn.discordapp.com/attachments/1191029818083512380/1231276864702648390/Screenshot_from_2024-04-20_19-12-37.png?ex=66365ef0&is=6623e9f0&hm=1eea1f9f8e1097b6db01e492b51013d7fad343f51c93f87eda9baa98027c6a0e&

then add your webchat code to the JSFiddle, from here https://cdn.discordapp.com/attachments/1191029818083512380/1231277166986002543/image.png?ex=66365f38&is=6623ea38&hm=09dde2781fda99814cb8ea5b408bf85a3fec3104e5bdd3095ece08bf069fd8c4&

or here https://cdn.discordapp.com/attachments/1191029818083512380/1231277226985652314/image.png?ex=66365f46&is=6623ea46&hm=800a101e89f08a96f6f4efb65ed03f89bc7f43405d4b6ab4306f228ebf25c712&