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é!
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é:
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:
Kết quả bên dưới nha.
See the Pen Responsive Chat Widget by Rami Lulu (@ramilulu) on CodePen.
Navvy the navigational ChatBot!:
Kết quả bên dưới nha.
See the Pen Navvy the navigational ChatBot! by Mees (@meesrutten) on CodePen.
Chatbox:
Kết quả bên dưới nha.
See the Pen Chatbox by Theodore Kluge (@villa7) on CodePen.
WhatsApp Inspired Bootstrap Chat UI:
Kết quả bên dưới nha.
See the Pen WhatsApp Inspired Bootstrap Chat UI Direct Messaging App by Filip Rastovic (@FilipRastovic) on CodePen.
Daily UI #013: Direct Messaging:
Kết quả bên dưới nha.
See the Pen Daily UI #013: Direct Messaging by Fabio Ottaviani (@supah) on CodePen.
Responsive CSS Chat:
Kết quả bên dưới nha.
See the Pen Responsive CSS Chat by Álvaro Hernández Perales (@Varo) on CodePen.
Chat Box:
Kết quả bên dưới nha.
See the Pen Chat Box by Mehmet mert (@mehmetmert) on CodePen.
floating website chat button:
Kết quả bên dưới nha.
See the Pen floating website chat button (intercom inspired) by neil kalman (@neilkalman) on CodePen.
Swanky Chatbox:
Kết quả bên dưới nha.
See the Pen Swanky Chatbox by Jack Thomson (@Jackthomsonn) on CodePen.
Chat Widget:
Kết quả bên dưới nha.
See the Pen Chat Widget by Andre Madarang (@drehimself) on CodePen.
Chat Interface:
Kết quả bên dưới nha.
See the Pen Weekly Coding Challenge #8 - Chat Interface by Florin Pop (@FlorinPop17) on CodePen.
Responsive chat window:
Kết quả bên dưới nha.
See the Pen Responsive chat window / chat list by Nicolás Demianiw (@ndemia) on CodePen.
React Chat:
Kết quả bên dưới nha.
See the Pen React Chat by ravenbasix (@ravenbasix) on CodePen.
Vue playground #2 - Chatbox:
Kết quả bên dưới nha.
See the Pen Vue playground #2 - Chatbox by Charles Swierczek (@karolsw3) on CodePen.
Black and White Messenger:
Kết quả bên dưới nha.
See the Pen #004 Daily UI Challenge | Black and White Messenger by maria cheline (@mariacheline) on CodePen.
Chat Box:
Kết quả bên dưới nha.
See the Pen Chat Box by Takane Ichinose (@takaneichinose) on CodePen.
chatbot template:
Kết quả bên dưới nha.
See the Pen chatbot template by Landgreen (@lilgreenland) on CodePen.
Chat UI HTML:
Kết quả bên dưới nha.
See the Pen Untitled by Virgil Pana (@virgilpana) on CodePen.
Stylish chat window design:
Kết quả bên dưới nha.
See the Pen Stylish chat window design by Mamun Khandaker (@kh-mamun) on CodePen.
ChatBox UI :
Kết quả bên dưới nha.
See the Pen Chat UI by Shiva Pandey (@shivapandey) on CodePen.
Swanky Chatbox V2:
Kết quả bên dưới nha.
See the Pen Swanky Chatbox V2 by Jack Thomson (@Jackthomsonn) on CodePen.
Responsive Chat UI:
Kết quả bên dưới nha.
See the Pen Chat (WebRTC) by Clint Brown (@clintabrown) on CodePen.
Material Messaging App Concept:
Kết quả bên dưới nha.
See the Pen Material Messaging App Concept by Thomas d'Aubenton (@ThomasDaubenton) on CodePen.
Emotional Chatbot:
Kết quả bên dưới nha.
See the Pen Emotional Chatbot by Cory L (@TheVVaFFle) on CodePen.
Material Live Support:
Kết quả bên dưới nha.
See the Pen Material Live Support by neel (@neel2292) on CodePen.
Chat Interface Concept:
Kết quả bên dưới nha.
See the Pen Chat Interface Concept by Emil (@emilcarlsson) on CodePen.
Cute AI Chatbot (React):
Kết quả bên dưới nha.
See the Pen Day 10: Cute AI Chatbot (React) by Angela He (@zephyo) on CodePen.
Fully responsive chat layout:
Kết quả bên dưới nha.
See the Pen Fully responsive chat layout by Tuomas Pöyry (@Munkkeli) on CodePen.
Chat Concept:
Kết quả bên dưới nha.
See the Pen Chat Concept by Pavel Komiagin (@pavel_komiagin) 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ẻ!
