在現代化的網站設計中，很多在線商家都會給自己的網站添加在線客服功能。這種功能的核心就是一段嵌入網頁中的 CSS 代碼，可以實現自動彈出客服聊天窗口以及用戶與客服之間的交互。 以下是實現在線客服功能的 CSS 代碼：

<style>
.chat {
position: fixed;
right: 20px;
bottom: 50px;
z-index: 9999;
}
.chat-box {
display: none;
position: fixed;
bottom: 100px;
right: 20px;
background-color: #fff;
width: 300px;
height: 400px;
border: 1px solid #ccc;
z-index: 9999;
}
.chat-header {
height: 36px;
border-bottom: 1px solid #ccc;
background-color: #f6f6f6;
text-align: center;
line-height: 36px;
}
.chat-body {
height: 320px;
overflow-y: auto;
margin: 0 10px;
}
.chat-input {
height: 36px;
border-top: 1px solid #ccc;
margin: 10px;
}
.chat-input input {
width: 232px;
height: 30px;
padding: 0 5px;
border: none;
background-color: #f6f6f6;
float: left;
}
.chat-input button {
width: 60px;
height: 30px;
background-color: #4CAF50;
color: #fff;
border: none;
float: left;
}
</style>

這段代碼設置了聊天窗口的位置、大小、顏色等基本屬性。其中，`.chat`類設置了客服按鈕在頁面右下角的位置，`position: fixed;`則表示該元素的位置是固定的，不受頁面滾動影響。 `.chat-box`類則是聊天窗口的容器，`display: none;`是讓它一開始不顯示，等到用戶點擊客服按鈕時才會彈出。這個類還設置了聊天窗口的大小、位置、顏色、邊框等基本樣式。 接下來的`.chat-header`類、`.chat-body`類和`.chat-input`類則分別是聊天窗口中頂部、中部和底部的樣式設置。`.chat-input`類還包括了用戶輸入框和發送按鈕的樣式設置。 總之，通過以上 CSS 代碼的設置，我們可以輕松在網站上實現在線客服功能，為用戶提供更好的使用體驗。