Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
Thiết Kế Chatbox Bằng CSS Javascript Cho Trang Web (2020)

Thiết Kế Chatbox Bằng CSS Javascript Cho Trang Web (2020)


Ngày 22 Tháng 7 Năm 2020

Thiết Kế Chatbox Bằng CSS Javascript Cho Trang Web (2020)

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 2020 để 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é!

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.

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

vi-du-ve-chat-box

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">
    <h1>Chatbox</h1>
    <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.

Responsive Chat Widget:

See the Pen Responsive Chat Widget by Rami Lulu (@ramilulu) on CodePen.

Navvy the navigational ChatBot!:

See the Pen Navvy the navigational ChatBot! by Mees (@meesrutten) on CodePen.

Chatbox:

See the Pen Chatbox by Theodore Kluge (@villa7) on CodePen.

WhatsApp Inspired Bootstrap Chat UI:

See the Pen WhatsApp Inspired Bootstrap Chat UI Direct Messaging App by Filip Rastovic (@FilipRastovic) on CodePen.

Daily UI #013: Direct Messaging:

See the Pen Daily UI #013: Direct Messaging by Fabio Ottaviani (@supah) on CodePen.

Responsive CSS Chat:

See the Pen Responsive CSS Chat by Álvaro Hernández Perales (@Varo) on CodePen.

Chat Box:

See the Pen Chat Box by Mehmet mert (@mehmetmert) on CodePen.

floating website chat button:

See the Pen floating website chat button (intercom inspired) by neil kalman (@neilkalman) on CodePen.

Swanky Chatbox:

See the Pen Swanky Chatbox by Jack Thomson (@Jackthomsonn) on CodePen.

Chat Widget:

See the Pen Chat Widget by Andre Madarang (@drehimself) on CodePen.

Chat Interface:

See the Pen Weekly Coding Challenge #8 - Chat Interface by Florin Pop (@FlorinPop17) on CodePen.

Chat:

See the Pen Chat by Lesha V. (@ok2ju) on CodePen.

Responsive chat window:

See the Pen Responsive chat window / chat list by Nicolás Demianiw (@ndemia) on CodePen.

React Chat:

See the Pen React Chat by ravenbasix (@ravenbasix) on CodePen.

Vue playground #2 - Chatbox:

See the Pen Vue playground #2 - Chatbox by Charles Swierczek (@karolsw3) on CodePen.

Black and White Messenger:

See the Pen #004 Daily UI Challenge | Black and White Messenger by maria cheline (@mariacheline) on CodePen.

Chat Box:

See the Pen Chat Box by Takane Ichinose (@takaneichinose) on CodePen.

Tổng kết:

Qua đây mình mong bài viết sẽ cung cấp thêm cho bạn các chatbox hữu ích dành cho việc phát triển, thiết kế web và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!