index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Chatbot UI</title>
</head>
<body>

<!-- Version 1 Webchat
<script>!(function () {
  let e = document.createElement("script"),
    t = document.head || document.getElementsByTagName("head")[0];
  (e.src =
    "https://cdn.jsdelivr.net/npm/rasa-webchat/lib/index.js"),
    (e.async = !0),
    (e.onload = () => {
      window.WebChat.default(
        {
          customData: { language: "en" },
          socketUrl: "https://bf-botfront.development.agents.botfront.cloud",
          title: 'Marvin Bot',
          subtitle: 'A Personal Assistant Bot',
          // add other props here
        },
        null
      );
    }),
    t.insertBefore(e, t.firstChild);
})();
</script>
-->

<!-- Version 2 Webchat2
<div id="webchat"/>
<script src="https://storage.googleapis.com/mrbot-cdn/webchat-latest.js"></script>>
<script>
    WebChat.default.init({
        selector: "#webchat",
        initPayload: "/get_started",
        customData: {"language": "en"}, // arbitrary custom data
        socketUrl: "http://localhost:5500",
        socketPath: "/socket.io/"
        title: "Title",
        subtitle: "Subtitle",
    })
</script>
-->

<head>
  <link rel="stylesheet" href="./style.css" />
</head>
<body>
  <div class="chat-container"></div>

  <script src="https://npm-scalableminds.s3.eu-central-1.amazonaws.com/@scalableminds/chatroom@master/dist/Chatroom.js"/></script>
  <script type="text/javascript">
    var chatroom = new window.Chatroom({
      host: "http://localhost:5005",
      title: "Marvin Bot",
      container: document.querySelector(".chat-container"),
      welcomeMessage: "Hi, I am Marvin. How may I help you?",
      speechRecognition: "en-US",
      voiceLang: "en-US"
    });
    chatroom.openChat();
  </script>
</body>

</body>
</html>