title: Javascript - How to transform index chat into a chat window
body: <p>Actually I have some chat and I want to put it inside a window, I found an example but Not loading the chat inside window.</p>
  
  <p>My chat works perfectly with just the index. Check the images.</p>
  
  <p><strong>Old index.ejs code (just chat):</strong></p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
            &lt;script src="jquery-3.1.1.js"&gt;&lt;/script&gt;
            &lt;script src="app.js"&gt;&lt;/script&gt;
            &lt;base href="/"&gt;
            &lt;title&gt;XXXXXXXXXXXXXXXX&lt;/title&gt;
            &lt;meta ------ /&gt;
            &lt;link rel="shortcut icon" href="favicon.ico" type="image/x-icon"&gt;
            &lt;link rel="stylesheet" href="css/app.css"&gt;
          &lt;/head&gt;
          &lt;body&gt;
            &lt;div id="view-change-button" class="button" onclick="Payloadxxxxxxx.togglePanel(event, this)"&gt;
              &lt;img class="option full" src="../img/Chat Button.png"&gt;
              &lt;img class="option not-full" src="../img/Code Button.png"&gt;
            &lt;/div&gt;
            &lt;div id="contentParent" class="responsive-columns-wrapper"&gt;
              &lt;div id="chat-column-holder" class="responsive-column content-column"&gt;
                &lt;div class="chat-column"&gt;
                  &lt;div id="scrollingChat"&gt;&lt;/div&gt;
                  &lt;label for="textInput" class="inputOutline"&gt;
                    &lt;input id="textInput" class="input responsive-column"
                      placeholder="Type something" type="text"
                      onkeydown="xxxxxxxxxxxxxxxxPanel.inputKeyDown(event, this)"&gt;
                  &lt;/label&gt;
                &lt;/div&gt;
              &lt;/div&gt;
              &lt;div id="payload-column" class="fixed-column content-column"&gt;
                &lt;div id="payload-initial-message"&gt;
                  xxxxxxxxxxxxxxxxxxxxxxxxxxxxxOtherDescription.
                &lt;/div&gt;
                &lt;div id="payload-request" class="payload"&gt;&lt;/div&gt;
                &lt;div id="payload-response" class="payload"&gt;&lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
  
    &lt;script src="js/xxxxx.js"&gt;&lt;/script&gt;
    &lt;script src="js/xxxxxxxx.js"&gt;&lt;/script&gt;
    &lt;script src="js/xxxxxxxxxx.js"&gt;&lt;/script&gt;
    &lt;script src="js/xxxxxxxxxx.js"&gt;&lt;/script&gt;
    &lt;script src="js/xxxxxxxxx.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>Image old (I'm use bootstrap for responsive page):</strong> </p>
  
  <p><em>Web maximize</em></p>
  
  <p><a href="https://i.stack.imgur.com/XGcbZ.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/XGcbZ.jpg" alt="enter image description here"></a></p>
  
  <p><em>If I decrease or increase the browser window</em></p>
  
  <p><a href="https://i.stack.imgur.com/Vxa4s.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Vxa4s.jpg" alt="enter image description here"></a></p>
  
  <p><strong>And new Index with the button click for open the chat, the all code of chat i put inside chat.ejs:</strong></p>
  
  <pre><code>    &lt;!DOCTYPE html&gt;
   &lt;html&gt;
   &lt;head&gt;
    &lt;base href="/"&gt;
    &lt;title&gt;Web Chat - ITSM&lt;/title&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
    &lt;meta property="og:image" content="conversation.svg" /&gt;
    &lt;meta property="og:title" content="Conversation Chat Simple" /&gt;
    &lt;meta property="og:description" content="Sample application that shows how to use the Conversation API to identify user intents" /&gt;
    &lt;link rel="shortcut icon" href="favicon.ico" type="image/x-icon"&gt;
    &lt;link rel="stylesheet" href="css/app.css"&gt;
   &lt;meta charset="UTF-8"&gt;
   &lt;title&gt;Title of the document&lt;/title&gt;
    &lt;script   
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"&gt;  
    &lt;/script&gt;
   &lt;script type="text/javascript"&gt;
  function open_chatbox() {
    $('#chat').fadeOut(500);
    $('#chatBox').fadeIn(1000);
   }
  function closeChat() {
    $('#chatBox').fadeOut(500);
    $('#chat').fadeIn(1000);
   }
   &lt;/script&gt;
       &lt;style&gt;
       #chat
   {
   position:absolute;
   width:200px;
   height:auto;
   padding:10px;
   background:#088A68;
   color:#EDEDED;
   text-align:center;
   font-family:Cambria;
   font-size:20px;
   bottom:0px;
   right:15px;
   cursor:pointer;
   }
   #chatBox
   {
   display:none;
   position:absolute;
   width:200px;
   height:300px;
   padding:10px;
   background:#EDEDED;
   color:#FF7700;
   text-align:center;
   font-family:Cambria;
   font-size:20px;
   bottom:0px;
   right:15px;
   cursor:pointer;
   }
   #close
   {
   position:absolute;
   width:15px;
   height:15px;
   padding:6px 5px 10px 5px;
   text-align:center;
   background:rgba(0,0,0,0.8);
   color:#FF7700;
   font-family:Cambria;
   right:0px;top:0px;
   } &lt;/style&gt;
  
   &lt;/head&gt;
  
   &lt;body&gt;
   &lt;div id="chat" onClick="open_chatbox();"&gt; Chat Now &lt;/div&gt;
   &lt;div id="chatBox"&gt;&lt;div onclick="closeChat()" id="close"&gt;X&lt;/div&gt; &lt;br&gt;&lt;br&gt;&lt;div id="view-change-button" class="button" onclick="PayloadPanel.togglePanel(event, this)"&gt;
      &lt;img class="option full" src="../img/Chat Button.png"&gt;
      &lt;img class="option not-full" src="../img/Code Button.png"&gt;
    &lt;/div&gt;
    &lt;div id="contentParent" class="responsive-columns-wrapper"&gt;
      &lt;div id="chat-column-holder" class="responsive-column content-column"&gt;
        &lt;div class="chat-column"&gt;
          &lt;div id="scrollingChat"&gt;&lt;/div&gt;
          &lt;label for="textInput" class="inputOutline"&gt;
            &lt;input id="textInput" class="input responsive-column"
              placeholder="Type something" type="text"
              onkeydown="ConversationPanel.inputKeyDown(event, this)"&gt;
          &lt;/label&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;script src="js/common.js"&gt;&lt;/script&gt;
    &lt;script src="js/api.js"&gt;&lt;/script&gt; 
    &lt;script src="js/conversation.js"&gt;&lt;/script&gt;
    &lt;script src="js/global.js"&gt;&lt;/script&gt;
   &lt;/body&gt;
  
   &lt;/html&gt;
  </code></pre>
  
  <p>I see <a href="https://stackoverflow.com/questions/29790154/how-to-show-live-chat-dialog-box-on-click-of-button">that</a> example for it.</p>
  
  <p>And the error is:</p>
  
  <blockquote>
    <p>Synchronous XMLHttpRequest on the main thread is deprecated because of
    its detrimental effects to the end user's experience. For more help,
    check <a href="https://xhr.spec.whatwg.org/" rel="nofollow noreferrer">https://xhr.spec.whatwg.org/</a>. 
    Uncaught TypeError: Cannot read property 'classList' of null
        at displayPayload (eval at  (jquery.min.js:2), :80:23)
        at Object.Api.setRequestPayload (eval at  (jquery.min.js:2), :52:7)
        at Object.sendRequest (eval at  (jquery.min.js:2), :55:11)
        at geoSuccess (eval at  (jquery.min.js:2), :47:9) displayPayload @ VM901:80 Api.setRequestPayload @
    VM901:52 sendRequest @ VM899:55 geoSuccess @ VM900:47 VM901:80
    Uncaught TypeError: Cannot read property 'classList' of null
        at displayPayload (eval at  (jquery.min.js:2), :80:23)</p>
  </blockquote>
  
  <p>Obs.: The old file index.ejs is the new chat.ejs to load the chat inside window if click the button.</p>
  
  <p>I try see other post with same example but None of them are trying the same as me</p>