Hướng dẫn code chatbox html - mã chatbox html

Question

Ngày hôm nay chúng ta sẽ đi vào tìm hiểu cách thiết kế chatbox cũng như các thư viện để giúp bạn có thể dễ dàng tạo ra các chatbox cho trang web. Đồng thời mình sẽ đưa ra một số ví dụ về các chatbox được sử dụng phổ biến trong năm 2022 để chúng ta có thể học hỏi thêm. Bây giờ để hiểu rõ hơn thì bạn hãy cùng mình đi vào tìm hiểu nhé!

Nội dung chính Show

Cách Tạo Chatbox Cơ Bản Bằng HTML CSS Javascript
Một Số Ví Dụ Về Thiết Kế Chatbox
AI chatbot dễ thương (React):

Cách Tạo Chatbox Cơ Bản Bằng HTML CSS Javascript

Chatbox là một hộp thư thoại trực tuyến giúp bạn có thể giao tiếp với khách hàng một cách dễ dàng. Chúng ta chắc hẳn đã từng sử dụng hộp thoại này trên các ứng dụng như là Facebook, Skype, Zalo...Việc sử dụng chatbox trong website sẽ giúp bạn có thể tiết kiệm chi phí phát sinh từ điện thoại, dễ dàng hỗ trợ khách hàng, giúp bạn lưu trữ các đơn dặt hàng của khách hàng một cách dễ dàng... Ngày nay người ta cũng tạo thêm các chatbot để có thể trả lời khách hàng một cách tự động giúp bạn có thể giảm được số lượng message trả lời cho khách hàng.Bài viết này chúng ta sẽ đi vào cách thiết kế chatbox để thu hút sự chú ý của người dùng, mang lại cảm giác hiện đại, thú vị cho khách hàng khi sử chatbox trong website của bạn. là một hộp thư thoại trực tuyến giúp bạn có thể giao tiếp với khách hàng một cách dễ dàng. Chúng ta chắc hẳn đã từng sử dụng hộp thoại này trên các ứng dụng như là Facebook, Skype, Zalo...
Việc sử dụng chatbox trong website sẽ giúp bạn có thể tiết kiệm chi phí phát sinh từ điện thoại, dễ dàng hỗ trợ khách hàng, giúp bạn lưu trữ các đơn dặt hàng của khách hàng một cách dễ dàng... Ngày nay người ta cũng tạo thêm các chatbot để có thể trả lời khách hàng một cách tự động giúp bạn có thể giảm được số lượng message trả lời cho khách hàng.
Bài viết này chúng ta sẽ đi vào cách thiết kế chatbox để thu hút sự chú ý của người dùng, mang lại cảm giác hiện đại, thú vị cho khách hàng khi sử chatbox trong website của bạn.

Và để dễ hình dung bạn xem một ví dụ về chatbox ở dưới đây nhé:

Bây giờ chúng ta sẽ đi vào xây dựng một chatbox cơ bản bằng HTML, CSS, Javascript cho website nhé!

Tạo cấu trúc HTML cho chatbox:

 <button class="nut-mo-chatbox" onclick="moForm()">Chat</button>
 <div class="Chatbox" id="myForm">
   <form action="" class="form-container">
     <h2>Chatbox</h2>
    <label for="msg"><b>Lời Nhắn</b></label>
     <textarea placeholder="Bạn hãy nhập lời nhắn.." name="msg" required></textarea>
    <button type="submit" class="btn">Gửi</button>
     <button type="button" class="btn nut-dong-chatbox" onclick="dongForm()">Đóng</button>
   </form>

Thiết lập style CSS cho chatbox:

{box-sizing: border-box;}
/* Nút Để Mở Chatbox */
 .nut-mo-chatbox {
   background-color: #555;
   color: white;
   padding: 16px 20px;
   border: none;
   cursor: pointer;
   opacity: 0.8;
   position: fixed;
   bottom: 23px;
   right: 28px;
   width: 280px;
 }
/* Ẩn chatbox mặc định */
 .Chatbox {
   display: none;
   position: fixed;
   bottom: 0;
   right: 15px;
   border: 3px solid #f1f1f1;
   z-index: 9;
 }
/* Thêm style cho form */
 .form-container {
   max-width: 300px;
   padding: 10px;
   background-color: white;
 }
/* thiết lập style textarea */
 .form-container textarea {
   width: 100%;
   padding: 15px;
   margin: 5px 0 22px 0;
   border: none;
   background: #f1f1f1;
   resize: none;
   min-height: 200px;
 }
/*thiết lập style cho textarea khi được focus */
 .form-container textarea:focus {
   background-color: #ddd;
   outline: none;
 }
/* Thiết lập style cho nút trong form*/
 .form-container .btn {
   background-color: #4CAF50;
   color: white;
   padding: 16px 20px;
   border: none;
   cursor: pointer;
   width: 100%;
   margin-bottom:10px;
   opacity: 0.8;
 }/* Thiết lập màu nền cho nút đóng chatbox */
 .form-container .nut-dong-chatbox {
   background-color: red;
 }
/* Thêm hiệu ứng hover cho nút*/
 .form-container .btn:hover, .nut-mo-chatbox:hover {
   opacity: 1;
 }

Thiết lập Javascript cho chatbox:

 /*Hàm Mở Form*/
 function moForm() {
   document.getElementById("myForm").style.display = "block";
 }
 /*Hàm Đóng Form*/
 function dongForm() {
   document.getElementById("myForm").style.display = "none";
 }

Kết quả chatbox:

See the Pen tạo chatbox bằng HTML CSS Javascript by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nếu bạn không thấy rõ kết quả thì có thể chuyển sang chế độ xem 0.5 hoặc 0.25x nhé!(Nguồn W3School)

Một Số Ví Dụ Về Thiết Kế Chatbox

Tiếp theo đây chúng ta sẽ đi vào những ví dụ khác về chatbox do các bạn lập trình viên trên Codepen thiết kế và phát triển nhé!Trước khi đi vào ví dụ thì mình có một số chú ý sau là để xem rõ kết quả hơn bạn chuyển sang chế độ screen 0.5x, 0.25x hay nếu nó không hiển thị thì bạn nhớ xác minh mình là con người trong Codepen mới xem được nhé. Nếu file là SCSS thì bạn có thể chuyển sang CSS ở đây nhé : SCSS to CSS. Nếu chúng ta muốn xem các nguồn được sử dụng trong Codepen để bạn thiết lập ở dưới máy tính thì nhấp vào chữ Resources ở dưới cùng bên trái của Codepen để xem các đường dẫn CDN nha.
Trước khi đi vào ví dụ thì mình có một số chú ý sau là để xem rõ kết quả hơn bạn chuyển sang chế độ screen 0.5x, 0.25x hay nếu nó không hiển thị thì bạn nhớ xác minh mình là con người trong Codepen mới xem được nhé. Nếu file là SCSS thì bạn có thể chuyển sang CSS ở đây nhé : SCSS to CSS. Nếu chúng ta muốn xem các nguồn được sử dụng trong Codepen để bạn thiết lập ở dưới máy tính thì nhấp vào chữ Resources ở dưới cùng bên trái của Codepen để xem các đường dẫn CDN nha.