在线客服代码html

以下是一个简单的在线客服代码示例：


```html
<!-- 在线客服代码 -->
<div id="online-service">
  <a href="#" class="service-btn">在线客服</a>
  <div class="service-box">
    <div class="service-header">
      <h3>在线客服</h3>
      <a href="#" class="close-btn">ￗ</a>
    </div>
    <div class="service-content">
      <p>欢迎来到我们的在线客服系统，有什么可以帮助您的吗？</p>
      <form>
        <input type="text" placeholder="您的姓名">
        <input type="email" placeholder="您的邮箱">
        <textarea placeholder="请输入您的问题"></textarea>
        <button type="submit">发送</button>
      </form>
    </div>
  </div>
</div>


<!-- 在线客服样式 -->
<style>
#online-service {
  position: fixed;
  bottom: 20px;
  right: 20px;
}


.service-btn {
  display: inline-block;
  padding: 10px;
  background-color: #333;
  color: #fff;
  text-decoration: none;
  border-radius: 5px;
}


.service-box {
  display: none;
  position: absolute;
  bottom: 50px;
  right: 0;
  width: 300px;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0,0,0,0.2);
}


.service-header {
  padding: 10px;
  background-color: #333;
  color: #fff;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}


.service-header h3 {
  margin: 0;
  font-size: 18px;
}


.close-btn {
  float: right;
  font-size: 18px;
  color: #fff;
  text-decoration: none;
}


.service-content {
  padding: 10px;
}


.service-content form {
  margin-top: 10px;
}


.service-content input,
.service-content textarea {
  display: block;
  width: 100%;
  padding: 5px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}


.service-content button {
  display: block;
  width: 100%;
  padding: 10px;
  background-color: #333;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
</style>


<!-- 在线客服脚本 -->
<script>
document.querySelector('.service-btn').addEventListener('click', function(e) {
  e.preventDefault();
  document.querySelector('.service-box').style.display = 'block';
});


document.querySelector('.close-btn').addEventListener('click', function(e) {
  e.preventDefault();
  document.querySelector('.service-box').style.display = 'none';
});
</script>
```


这段代码会在页面右下角添加一个“在线客服”按钮，点击按钮会弹出一个对话框，用户可以在对话框中输入姓名、邮箱和问题，并提交给客服人员。对话框可以通过点击“关闭”按钮或点击对话框外的任意区域来关闭。