How To Design A Chatbot? 2024 Updated

\n<p>In this lecture of how to design a chatbot we will at first make the HTML page.</p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img src=\"https://academy.webotapp.com/wp-content/uploads/2024/06/how-to-design-a-chatbot-1024x584.png\" alt=\"How to design a chatbot\" class=\"wp-image-5211\"/></figure>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\nhttps://www.youtube.com/watch?v=bcCBwRF4CwU\n</div></figure>\n\n\n\n<pre class=\"wp-block-code\"><code>\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Chat with Panda AI</title>\n</head>\n\n<body>\n <div>\n <div>Chat with Panda AI</div>\n <div>\n \n </div>\n <form method=\"POST\">\n <button type=\"submit\">Send</button>\n </form>\n </div>\n</body>\n</html></code></pre>\n\n\n\n<p>We will now add style to the background and the chat container.</p>\n\n\n\n<pre class=\"wp-block-code\"><code><!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Chat with Panda AI</title>\n\n <style>\n body {\n font-family: Arial, sans-serif;\n background-color: #f0f0f0;\n margin: 0;\n padding: 0;\n }\n\n .chat-container {\n max-width: 400px;\n margin: 20px auto;\n background-color: #fff;\n border-radius: 10px;\n box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);\n }\n\n </style>\n\n \n\n</head>\n<body>\n <div class=\"chat-container\">\n <div>Chat with Panda AI</div>\n <div>\n \n </div>\n <form method=\"POST\">\n <button type=\"submit\">Send</button>\n </form>\n </div>\n \n</body>\n</html></code></pre>\n\n\n\n<p>Let us now add color to the chat header, add voice selection drop down and typing field</p>\n\n\n\n<pre class=\"wp-block-code\"><code>\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Chat with Panda AI</title>\n <link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css\" integrity=\"sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==\" crossorigin=\"anonymous\" referrerpolicy=\"no-referrer\" />\n\n <style>\n body {\n font-family: Arial, sans-serif;\n background-color: #f0f0f0;\n margin: 0;\n padding: 0;\n }\n\n .chat-container {\n max-width: 400px;\n margin: 20px auto;\n background-color: #fff;\n border-radius: 10px;\n box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);\n }\n\n .chat-header {\n background-color: #9c27b0; /* Purple color */\n color: #fff;\n padding: 10px;\n text-align: center;\n font-weight: bold;\n border-top-left-radius: 10px;\n border-top-right-radius: 10px;\n }\n \n .chat-input {\n display: flex;\n padding: 10px;\n background-color: #f3e5f5; /* Light purple color */\n border-top: 1px solid #e1bee7; /* Border color */\n }\n .chat-input input {\n flex-grow: 1;\n padding: 10px;\n border: 1px solid #e1bee7; /* Border color */\n border-radius: 20px; /* Rounded corners */\n margin-right: 10px;\n outline: none; /* Remove default outline */\n font-size: 16px; /* Font size */\n }\n .chat-input input:focus {\n border-color: #9c27b0; /* Purple color when focused */\n }\n .chat-input button {\n padding: 10px 20px;\n background-color: #9c27b0; /* Purple color */\n color: #fff;\n border: none;\n border-radius: 20px; /* Rounded corners */\n cursor: pointer;\n font-size: 16px; /* Font size */\n outline: none; /* Remove default outline */\n transition: background-color 0.3s; /* Transition effect */\n }\n .chat-input button:hover {\n background-color: #7b1fa2; /* Darker purple color when hovered */\n }\n\n </style>\n\n \n\n</head>\n<body>\n <div class=\"chat-container\">\n <div class=\"chat-header\">Chat with Panda AI</div>\n <div class=\"\">\n \n </div>\n <form class=\"chat-input\" method=\"POST\">\n <select class=\"chat-input input\">\n <option value=\"en-US\">English</option>\n <option value=\"hi-IN\">Hindi</option>\n \n \n </select>\n <input type=\"text\" class=\"chat-input\" name=\"userMessage\" placeholder=\"Type your message or speak...\" required>\n <button type=\"submit\"><i class=\"fa-regular fa-paper-plane\"></i></button>\n </form>\n </div>\n \n</body>\n</html>\n</code></pre>\n\n\n\n<p>Final Design Of The ChatBot</p>\n\n\n\n<pre class=\"wp-block-code\"><code>\n\n\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Chat with Panda AI</title>\n <link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css\" integrity=\"sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==\" crossorigin=\"anonymous\" referrerpolicy=\"no-referrer\" />\n\n <style>\n body {\n font-family: Arial, sans-serif;\n background-color: #f0f0f0;\n margin: 0;\n padding: 0;\n }\n\n .chat-container {\n max-width: 400px;\n margin: 20px auto;\n background-color: #fff;\n border-radius: 10px;\n box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);\n }\n\n .chat-header {\n background-color: #9c27b0; /* Purple color */\n color: #fff;\n padding: 10px;\n text-align: center;\n font-weight: bold;\n border-top-left-radius: 10px;\n border-top-right-radius: 10px;\n }\n\n .chat-messages {\n padding: 10px;\n max-height: 400px;\n overflow-y: auto;\n }\n .message {\n margin: 10px 0;\n padding: 10px;\n border-radius: 10px;\n }\n .message.user {\n background-color: #f3e5f5; /* Light purple color */\n text-align: right;\n }\n .message.assistant {\n background-color: #ececec;\n }\n \n .chat-input {\n display: flex;\n padding: 10px;\n background-color: #f3e5f5; /* Light purple color */\n border-top: 1px solid #e1bee7; /* Border color */\n }\n .chat-input input {\n flex-grow: 1;\n padding: 10px;\n border: 1px solid #e1bee7; /* Border color */\n border-radius: 20px; /* Rounded corners */\n margin-right: 10px;\n outline: none; /* Remove default outline */\n font-size: 16px; /* Font size */\n }\n .chat-input input:focus {\n border-color: #9c27b0; /* Purple color when focused */\n }\n .chat-input button {\n padding: 10px 20px;\n background-color: #9c27b0; /* Purple color */\n color: #fff;\n border: none;\n border-radius: 20px; /* Rounded corners */\n cursor: pointer;\n font-size: 16px; /* Font size */\n outline: none; /* Remove default outline */\n transition: background-color 0.3s; /* Transition effect */\n }\n .chat-input button:hover {\n background-color: #7b1fa2; /* Darker purple color when hovered */\n }\n\n </style>\n\n \n\n</head>\n<body>\n <div class=\"chat-container\">\n <div class=\"chat-header\">Chat with Panda AI</div>\n <div class=\"chat-messages\">\n \n </div>\n <form class=\"chat-input\" method=\"POST\">\n <select id=\"language\" class=\"chat-input input\">\n <option value=\"en-US\">English</option>\n <option value=\"hi-IN\">Hindi</option>\n \n \n </select>\n <input type=\"text\" class=\"chat-input\" name=\"userMessage\" placeholder=\"Type your message or speak...\" required>\n <button type=\"submit\"><i class=\"fa-regular fa-paper-plane\"></i></button>\n </form>\n </div>\n \n</body>\n</html>\n</code></pre>\n