JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.botpress.cloud/webchat/v1/inject.js"></script>
<script>
  var userLanguage = "",
      userTimeZone = "",
      currentDateTime = "",
      year = "",
      month = "",
      day = "",
      timeString = "",
      currentHour = "",
      currentMinute = "",
      country = "",
      countryCode = "",
      city = "",
      region = "",
      globalIP = "",
      longitude = "",
      latitude = "",
      organization_name = "",
      user_question = "Does it work";

  window.botpressWebChat.init({
      "composerPlaceholder": "Chat with bot",
      "botConversationDescription": "This chatbot was built surprisingly fast with Botpress",
      "botId": "c3d72c4a-974c-49b9-a735-983acbfc4993",
      "hostUrl": "https://cdn.botpress.cloud/webchat/v1",
      "messagingUrl": "https://messaging.botpress.cloud",
      "clientId": "c3d72c4a-974c-49b9-a735-983acbfc4993",
      "webhookId": "d0df9831-1f74-4bd8-a9ee-f771f40183b7",
      "lazySocket": true,
      "themeName": "prism",
      "frontendVersion": "v1",
      "showPoweredBy": true,
      "theme": "prism",
      "themeColor": "#2563eb",
       "userData": {
                "userLanguage": userLanguage,
                "userTimeZone": userTimeZone,
                "currentDateTime": currentDateTime,
                "currentYear": year,
                "currentMonth": month,
                "currentDay": day,
                "timeString": timeString,
                "currentHour": currentHour,
                "currentMinute": currentMinute,
                "country": country,
                "countryCode": countryCode,
                "city": city,
                "region": region,
                "ipAddress": globalIP,
                "longitude": longitude,
                "latitude": latitude,
                "organizationName": organization_name,
                "userQuestion": user_question
    },
  });
</script>