Untitled

<!DOCTYPE html>
<html>

<head>
  <title>Sample Bot</title>
  <style language="text/css">
    input#userInput {
      padding: 4px;
      font-size: 1em;
      width: calc(100% - 8px);
      border: 0;
    }

    input::placeholder {
      color: #aaa;
    }

    p.userRequest {
      margin: 4px;
      margin-right: 0px;
      padding: 4px 10px 4px 10px;
      min-width: 33%;
      max-width: 80%;
      font-family: sans-serif;
      text-align: right;
      float: right;
      background-color: #febd69;
    }

    p.Response {
      margin: 4px;
      margin-left: 0px;
      padding: 4px 10px 4px 10px;
      font-family: sans-serif;
      min-width: 33%;
      max-width: 80%;
      float: left;
      background-color: #232f3e;
      color: #fff;
    }
    .chat-box {
    position:fixed;
    right:15px;
    bottom:0;
    width: 256px;
    }

    .chat-closed {
        height: 35px;
        background: #232f3e;
        line-height: 35px;
        font-size: 18px;
        text-align: center;
        border:1px solid #232f3e;
        color: #fff;
    }

    .chat-header {
        height: 35px;
        background: #232f3e;
        line-height: 33px;
        text-indent: 12px;
        border:1px solid #232f3e;
        border-bottom:none;
        color: #fff;
    }

    .chat-content{
        height:300px;
        background:#ffffff;
        border:1px solid #232f3e;
        overflow-y:auto;
        word-wrap: break-word;
    }

    .chat-body {
      height: 272px;
      background-color: #eee;
      overflow: scroll;
      overflow-x: hidden;
    }

    #chatform {
      margin: 0;
      padding: 0;
    }

    .clear {
      clear: both;
    }
    .hide {
        display:none;
    }
  </style>
</head>

<body onload="greet()">
  <h1 style="text-align: left">Bot Interface</h1>
  <div class="chat-box">
    <div id="header" class="chat-header" onclick="toggle()">Online Support</div>
    <div id="content" class="chat-content hide">
      <div id="conversation" class="chat-body"></div>
      <form id="chatform" onsubmit="return pushChat();">
        <input type="text" id="userInput" size="80" value="" placeholder="Ask me anything">
      </form>
    </div>
  <div>
</body>
<script type="text/javascript">
  function toggle() {
    content = document.getElementById("content");
    content.classList.toggle("hide");
  }

    function greet(){
      showResponse("Hi!, How can i help you?");
    }
    function pushChat() {
      var inputText = document.getElementById('userInput');
      if (inputText && inputText.value && inputText.value.trim().length > 0) {

        var input = inputText.value.trim();
        inputText.value = '...';
        showRequest(input);
        inputText.locked = false;
        inputText.value = '';
        showResponse("Response");
      }
      return false;
    }

    function showRequest(daText) {

      var conversationDiv = document.getElementById('conversation');
      var requestPara = document.createElement("P");
      var clear = document.createElement("div");
      clear.classList.add("clear");
      requestPara.className = 'userRequest';
      requestPara.appendChild(document.createTextNode(daText));
      conversationDiv.appendChild(requestPara);
      conversationDiv.appendChild(clear);
      conversationDiv.scrollTop = conversationDiv.scrollHeight;
    }

    function showResponse(Response) {

      var conversationDiv = document.getElementById('conversation');
      var responsePara = document.createElement("P");
      responsePara.className = 'Response';
      if (Response) {
        responsePara.appendChild(document.createTextNode(Response));
        responsePara.appendChild(document.createElement('br'));
      }
      var clear = document.createElement("div");
      clear.classList.add("clear");
      conversationDiv.appendChild(responsePara);
      conversationDiv.appendChild(clear);
      conversationDiv.scrollTop = conversationDiv.scrollHeight;
    }
  </script>

</html>