在现代化的网站设计中，很多在线商家都会给自己的网站添加在线客服功能。这种功能的核心就是一段嵌入网页中的 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 代码的设置，我们可以轻松在网站上实现在线客服功能，为用户提供更好的使用体验。