added the chat agent

index.html

@@ -27,7 +27,7 @@
   <section class="colored-section2" id="title">
 
     <div class="container-fluid">
-      <img src="images/logo2.png" style="float:left;width:42px;height:42px; margin-right:20px; margin-top:10px">
+      <img src="images/logo2.png" style="float:left;width:42px;height:42px; margin-right:20px; margin-top:10px" alt="brand-img">
 
       <!-- Nav Bar -->
       <nav class="navbar navbar-expand-lg navbar-dark">
@@ -437,10 +437,18 @@
         <br>
         <button type="button" class="btn btn-lg btn-outline-success" id="submitButton" onclick="validateForm()">Submit</button>
       </form>
+
+      <!-- Dialog flow bot  -->
+      <div class="agent-box">
+        <iframe id="chat-bot" height="400" width="500" src="https://bot.dialogflow.com/d854ce2a-8fb4-41a4-9fa8-9e498be1accf"></iframe>
+        <div id="bot-display"> 
+            <i class="fas fa-comments-alt fa-3x bot-icon"></i>
+        </div>
+      </div>
+      
     </div>
   </section>
 
-
   <!-- Footer -->
 
   <footer class="colored-section2" id="footer">
@@ -457,6 +465,17 @@
   <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
   <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
   <script src="scripts/index.js" charset="utf-8"></script>
+
+  <script>
+
+    const chatBot = document.getElementById("chat-bot")
+    const botBtn = document.getElementById("bot-display")
+
+    botBtn.addEventListener('click', () => {
+      chatBot.style.display === 'none' ? chatBot.style.display = 'inline-block' : chatBot.style.display = 'none';
+    })
+
+  </script>
 </body>