1. 第一步:添加客服主管帐号,进入抖音开发者平台选择你的小程序点进去后在 -「能力」-「互动能力」-「消息管理」-「抖音IM客服」-「开启功能」,开启客服功能后,需要绑定客服主管的抖音号。
2. 在Hbuildx中创建项目编写代码:代码如下:
<template>
<view>
<view class="container" :style="{ 'background-image': 'url(' + backgroundUrl + ')' }"></view>
<view class="button-container">
<button open-type="im" :data-im-id="imId" @im="imCallback" @error="onimError" class="animate-button">
点击咨询
</button>
</view>
</view>
</template>
<script>
export default {
data() {
return {
imId: "输入你在后台绑定的客服主管的抖音号",
backgroundUrl: '背景图路径',
}
},
onLoad() {
},
methods: {
imCallback: function(e) {
console.log("跳转IM客服成功", e.detail);
},
onimError: function(e) {
console.log("拉起IM客服失败", e.detail);
}
}
}
</script>
<style>
.container {
/* 背景图覆盖整个元素 */
background-size: cover;
/* 背景图居中 */
background-position: center;
/* 固定定位 */
position: fixed;
/* 顶部对齐 */
top: 0;
/* 左边对齐 */
left: 0;
/* 宽度100% */
width: 100%;
/* 高度100% */
height: 100%;
/* 确保背景在其他内容之下 */
z-index: -1;
}
.button-container {
/* 绝对定位 */
position: absolute;
/* 距离底部10% */
bottom: 25%;
/* 居中水平 */
left: 50%;
/* 水平居中修正 */
transform: translateX(-50%);
}
.animate-button {
/* 内边距 */
width: 150px;
/* 文字大小 */
font-size: 18px;
/* 文字颜色 */
color: #fff;
/* 渐变背景色 */
background-image: linear-gradient(to right, purple, blue);
/* 移除边框 */
border: none;
/* 移除轮廓 */
outline: none;
/* 添加动画 */
animation: pulse 2s infinite;
/* 改变鼠标指针样式 */
cursor: pointer;
/* 圆角半径 */
border-radius: 50px;
}
@keyframes pulse {
0%,
100% {
transform: scale(1);
}
50% {
transform: scale(1.3);
}
}
</style>
3. 常见问题解答:
3.1、拉不起来会话怎么办?查看在hbuildx中配置的appid和在抖音开发者工具中配置的appid是否匹配,不匹配拉不起来我就遇到这个问题了,不知道为什么我在hbuildx里面配置了appid,运行到抖音开发者工具里面就不一样了!
3.2、关于版本问题,使用的基础调试库一定要符合他们文档中说的,具体请查看文档。
3.3、关于只配置了一个客服主管账号,我有多个客服,会自动转接分配吗?答案是会的,客服主管登录后可以添加10个客服号,用户拉起客服会话的时候会自动转发,他们的文档中写了客服消息分配机制:
按照以下优先级进行分配,暂不支持客服主管做设置。
- 上次咨询过的客服
- 当前饱和度较低的客服
- 随机
看一下效果:使用真机的话可以直接发消息啥的,我用的工具能拉起来会话就行了!