在您的网页中使用有客

您可以使用有客 Javascript 网页插件快速将有客插入您的网站中。

# 在网页中使用有客

打开有客后台，点击设置 > 配置渠道 > 插件代码 获取您的有客项目代码。

将有客代码放在网站 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>

# 覆盖配置

您可以在调用 $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, // 隐藏聊天窗口的关闭按钮
    }
  }
})

手动打开和关闭对话窗口您可以在网站的 JS 代码中调用$youke('open')打开对话框。

调用$youke('close')关闭对话框。

示例

<a onclick="$youke('open')">点击这里咨询客服</a>
<a href="javascript:$youke('open');">点我也可以打开客服聊天框~</a>
<a onclick="$youke('close')">关闭聊天窗口</a>

# 传递用户信息

在有客对话中，您可以向有客传递顾客的用户信息，如用户头像、手机号、邮箱等，使您系统中的用户信息可以同步到对话后台，在对话的同时，后台客服即可在对话列表中看到用户信息。

示例

<script>
$youke('report', {
    "updateCustomerInfo":{
        "avatar":"https://mark.tinyservices.net/DefaultAvatarUser.png",
        "name":"王小章（高级版）",
        "email":"hi@youke.co",
        "mobile":"13800000000"
    }
})
</script>

# 传递自定义信息

在有客对话中，您可以向有客传递对话的额外信息，如当前用户正在浏览的内容等。在对话的同时，后台客服即可在对话界面客户信息中看到自定义信息。

示例

<script>
  $youke('report', {
      "info": {
      '正在浏览的商品': '小鱼干',
      '用户等级': 'Level.5'
      },
  })
</script>

# 自定义有客对话窗口位置和样式

您可以通过 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>

# 自定义新消息的通知

在用户收到新消息但是并未打开会话窗口或者并未处于当前页面内时，有客会有新消息提示声（可以在设置中停用）如果您希望自定义新消息的提示，可以通过定义 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')
})

# 传递用户身份

如果您希望使用您自有系统的用户身份来创建和维持会话关系，您可以在自有系统的后端生成 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>

有客知识库