# 一、如何获取插件代码
打开有客后台， 从左侧菜单栏进入“设置”——“配置渠道” ——即可见您项目专属的“插件代码
# 二、如何使用插件代码
将复制的插件代码，放在您网站的 HTML 代码中，即可加载有客。
示例：
<script>
(function(y,o,u,k,e){y['YoukeInstance']=k;y[k]=y[k]||function(){(y[k].e=y[k].e||[]).push(arguments)};e=o.createElement('script');e.async=1;e.src=u;o.currentScript.parentNode.insertBefore(e,o.currentScript);})(window,document,'https://api.youke.co/js/widget.js','$youke');$youke('load','【您的项目Id】')
</script>
# 三、如何定制插件样式
1、覆盖后台设置的插件配置
您可以在调用 $youke('load', '【您的项目Id】') 时传入第三个参数，自定义配置来修改插件的展现内容，覆盖后台设置的插件配置。
示例：
$youke('load', '【您的项目Id】', {
config: {
pluginConfig: {
themeColor: '#00BCD4', // 主题颜色
themeTextColor: '#ffffff', // 文字颜色
triggerStyle: 'default', // default, floatingIcon
onlineText: '客服在线', // 在线状态文字
offlineText: '客服已离线', // 离线状态文字
hideLauncher: false, // 隐藏客服按钮
hideHeader: false, // 隐藏头部（客服头像和名称）
fullScreenMode: false, // 全屏显示聊天窗口
hideCloseButton: false, // 隐藏聊天窗口的关闭按钮
}
}
})
2、自定义有客对话窗口位置和样式
您可以通过 CSS 自定义有客的对话按钮与窗口样式，使窗口风格符合您的需求。 通过 .youke-chat-window-frame 类可以修改对话窗口样式， 通过 .youke-launcher-frame 类可以修改对话按钮样式。
示例:
<style>
/* 将有客对话窗口放到窗口左边 */
.youke-chat-window-frame {
right: initial;
left: 24px;
}
/* 将有客对话按钮放到窗口左边 */
.youke-launcher-frame{
right: initial;
left: 24px;
}
</style>
# 四、如何手动打开和关闭对话窗口
您可以在网站的 JS 代码中调用$youke('open')打开对话框，调用$youke('close')关闭对话框。
示例：
<a onclick="$youke('open')">点击这里咨询客服</a>
<a href="javascript:$youke('open');">点我也可以打开客服聊天框~</a>
<a onclick="$youke('close')">关闭聊天窗口</a>
# 五、如何传递用户信息
您可以将用户信息传递给有客，让客服在有客上能看到相关内容。
1、传递基础信息
在会话列表中，可以展示头像、名称、手机号、邮箱等基础信息，让客服在接入会话前，初步了解用户身份。
示例：
<script>
$youke('report', {
"updateCustomerInfo":{
"avatar":"https://mark.tinyservices.net/DefaultAvatarUser.png",
"name":"王小章（高级版）",
"email":"hi@youke.co",
"mobile":"13800000000"
}
})
</script>
2、传递自有系统中的用户身份
如果希望使用您自有系统的用户身份，来创建和维持会话关系，可以在自有系统的后端生成 JSON Web Token 并在加载插件时传入。
获取 JwtSecret 请访问有客工作台 设置 > 获取代码。
生成 JWT 的 PAYLOAD 为：
{
"customerId": "1234567890" // 自有系统的用户id, 类型：String
}
支持算法： ['HS256', 'HS512']
生成 JWT 的方法请参见：https://jwt.io/
示例：
<script>
$youke('load','【您的项目Id】', {
jwtToken: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJwbGF0Zm9ybUlkIjoiMTIzMTIzMTIzIn0.JdnDd_FAORSAZQcGoMC9qzMFU9NXlaP7IMzxQqE0EYs'
})
</script>
3、传递自定义信息
在有客会话中，您可以向有客传递额外信息，如当前用户正在浏览的内容等。在对话的同时，让客服在会话内“客户信息”中看到这些自定义信息。
示例：
<script>
$youke('report', {
"info": {
'正在浏览的商品': '小鱼干',
'用户等级': 'Level.5'
},
})
</script>
# 六、自定义新消息的通知
在用户收到新消息但是并未打开会话窗口或者并未处于当前页面内时，有客会有新消息提示声（可以在设置中停用）。
如果您希望自定义新消息的提示，可以通过定义 onNewMessage 来自行提示用户。
如下示例展示了如何将未读的消息数量展示在网页标题栏，并在3秒后自动恢复标题。
示例：
<script>
$youke('onNewMessage', function (unreadCount) {
const originalTitle = /^\(\d*\) (.*)/.exec(document.title) ? /^\(\d*\) (.*)/.exec(document.title)[1] : document.title
document.title = `(${unreadCount}) ${originalTitle}`;
setTimeout(() => {
document.title = originalTitle
}, 3000);
})
</script>
# 七、有客插件事件
有客插件提供以下事件，方便开发者针对性的完成业务：
open：对话窗口打开close：对话窗口关闭ready：有客插件完成准备unreadCount：未读消息数变更newMessage：有新消息
$youke('on', 'open', () => {
console.log('open')
})
$youke('on', 'close', () => {
console.log('close')
})
$youke('on', 'ready', () => {
console.log('ready')
})
$youke('on', 'unreadCount', (...arg) => {
console.log('unreadCount', ...arg)
})
$youke('on', 'newMessage', () => {
console.log('newMessage')
})
如需调整会话按钮大小，可以在设置——基础信息——对话按钮样式中选择自定义，上传自定义大小的图片作为对话按钮；
按钮大小会与图片大小一致。
例如：上传图片大小为50px * 50px，则按钮大小为50px * 50px。