在线咨询
热线电话: 400-9650651
热线电话
网页插件接入

拓聊云客服支持多网页插件接入,通过代码嵌入您所需要的的网站页面body标签后,进行使用。针对于不同的网站网页插件接入,您可自主设置多样化的插件外观,具体说明如下:

1.1 默认模版的使用

系统初始化提供默认模版,点击复制代码;将复制成功的代码嵌入网站body标签后,启用即可 (技术人员操作)。

  • 编辑默认模版

模版编辑分为基本设置、窗口外观设置、新消息提醒、声音提示四个部分。

   1) 基础设置

模版名称—用于区分应用于不同网站的网页插件(默认模版不支持修改)

模版备注——用于针对当前版本进行备注说明

指定客服分配——支持选到客服组或组内某一客服

机器人设置——当应用于网页插件的机器人开启时,将显示此配置项目(机器人高级设置而来),可以选择当前网页插件渠道应用的机器人欢迎语以及常见问题

   2) 窗口外观设置

窗口外观设置分为桌面网站外观以及手机网站外观设置

桌面网站外观——

涉及窗口样式、窗口主题色、窗口位置、样式按钮、按钮主题色、按钮位置、按钮文案、按钮图标的自定义设置

手机网站外观——

涉及窗口样式、窗口主题色、按钮样式、按钮主题色、按钮图标的自定义设置

   3)新消息提醒

新消息提醒用于访客最小化聊天框,新消息的提醒方式

【访客端】显示未读消息——

只要座席端发送新消息,访客端即展示未读消息数量以及最新消息预览

 

【访客端】展开聊天框——

只有座席端发送新消息,访客端即自动展开聊天框

 

   4)声音提示

用于配置访客端声音提示。开启时,顾客在收到消息时, 对话框会播放提示音提醒他。

 

1.2 添加模版

添加模版即为新增除默认模版外的其余版本,可应用于不同网站或网站不同页面的接入

添加模版与编辑默认模版配置相同,由基础设置、窗口外观设置、新消息提醒、声音提示四部分组成。除基础设置模版名称可以编辑外,其余一致。

聊天链接接入

添加模版与编辑默认模版配置相同,由基础设置、窗口外观设置、新消息提醒、声音提示四部分组成。除基础设置模版名称可以编辑外,其余一致。

2.1 默认链接

拓聊云客服提供默认的聊天链接,可快速接入使用。

  • 默认链接

打开以上链接即可进行对话。您也可以把该链接应用到所需之处,或者通过生成二维码的形式,扫码进行对话。

  • 默认链接配置

配置聊天链接,针对拓聊提供的默认聊天链接进行自定义风格设置,包含基础设置、窗口外观设置、声音提示三大部分。

(1)基础设置

网页名称—默认取组织名称,支持修改;用于展示聊天链接打开的网页名称

默认链接——拓聊提供的默认聊天链接

指定客服分配——支持选到客服组或组内某一客服

机器人设置——当应用于聊天链接接入渠道的机器人开启时,将显示此配置项目(机器人高级设置而来),可以选择当前聊天链接接入渠道应用的机器人欢迎语以及常见问题

(2)窗口外观设置

窗口外观设置分为桌面窗口外观和手机窗口外观

桌面窗口外观——

涉及窗口样式、窗口主题色、背景颜色、背景图片的自定义设置

手机窗口外观——

涉及窗口样式、窗口主题色的自定义设置

(3)声音提示

用于配置访客端声音提示。开启时,顾客在收到消息时, 对话框会播放提示音提醒他。

  • 模版链接管理

模版链接管理支持多模版联机饿的添加与维护,针对于不同模版链接风格的自定义配置。

添加模版——

添加模版即为新增除默认模版外的其余版本,可应用于不同所需之处。添加模版与配置默认聊天链接模配置相同,由基础设置、窗口外观设置、声音提示三部分组成。除基础设置新增模版名称用于区分链接外,其余一致。

 

2.2 高级设置

高级设置支持您通过添加自定义域名的形式,生成对应聊天链接进行访问。

1)添加域名链接

添加域名链接分为填写基本信息、解析验证两个步骤

  • 填写基本信息

输入您的域名链接名称及地址。

  • 解析并验证

将生成的对应配置项目数据信息添加到需要解析的配置中,完成后进行验证即可

2)模版管理

模版管理即针对与当前域名下的多模版链接进行维护与自定义风格设置。添加/配置模版与默认域名添加模版配置相同,由基础设置、窗口外观设置、声音提示三大部分构c成。

微信公众号接入

拓聊云客服支持以微信公众号绑定方式的进行接入,需要企业微信公众号扫描绑定接入并且授权给拓聊。当微信公众号有访客消息时,将在拓聊坐席端进行统一接待。

接入步骤如下:

点击【去微信平台授权绑定】——》微信公众平台扫码授权——》绑定成功,公众号对话检测

  • 点击【去微信平台授权绑定】

⚠️ 注意:企业公众号必须是认证过的微信订阅号或服务号,否则无法正常回复顾客对话

  • 微信公众平台扫码授权

  • 绑定成功,公众号对话检测

对话检测——

【访客端】

【座席端】

⚠️ 注意:微信公众号接入由于平台方限制,暂不支持文件接收

微信小程序接入

拓聊云客服支持以微信小程序绑定方式的进行接入,需要企业微信小程序扫描绑定接入并且授权给拓聊。当微信小程序有访客消息时,将在拓聊坐席端进行统一接待。

微信小程序接入步骤同微信公众号接入如下:

点击【去微信平台授权绑定】——》微信公众平台扫码授权——》绑定成功,小程序对话检测

  • 点击【去微信平台授权绑定】

⚠️ 注意:接入前您的小程序需要在微信平台-小程序管理菜单完成认证

  • 微信公众平台扫码授权

  • 绑定成功,公众号对话检测

对话检测——

【访客端】

【座席端】

⚠️ 注意:微信小程序接入由于平台方限制,暂不支持文件接收

微博接入

拓聊云客服支持微博接入,访客可通过微博私信与座席进行沟通。

接入步骤如下:

点击【绑定企业微博账号】——》信息录入并生成URL和APPKEY——》微博后台信息录入并获取access_token——》客服工作台录入access_token并保存——》绑定成功,对话检测

号对话检测

  • 点击【绑定企业微博账号】

⚠️  注意:由于微博开放平台 API 的限制,只有企业微博「 蓝V 」才能正常接入拓聊;绑定后,所有粉丝消息会被转发到拓聊,但这并不影响微博的客户端中正常使用私信功能

  • 信息录入并生成URL和APPKEY

填写微博名称——需要绑定的企业微博名称

  • 填写微博ID——【微博平台】企业微博 > 点击微博名称进入管理中心 > 查看浏览器地址栏 > weibo.com/后的数字即帐号即是微博ID;输入后将获取到对应的URL和APPKEY

请根据输入框下方提示指引进行操作!

  • 微博后台信息录入并获取access_token

  • 客服工作台录入access_token并保存

  • 绑定成功,微博对话检测

⚠️ 注意:微博接入由于平台方限制,暂不支持文件接收

添加客服组

管理员可以在客服与分组页面,进行客服组的添加与维护。系统初始化默认展示默认组;企业可根据自己的需求进行客服组的设置。当管理员进行客服账号添加时,可进行该客服归属组配置。

添加客户账号

目前邮箱账号作为拓聊系统内唯一身份标识,是登录系统的唯一途径。管理员可通过添加客服邮箱进行对应账号的开通(请务必确保邮箱的真实性);添加成功后该邮箱会收到一封邀请邮件,激活后,客服进行邮箱账号密码的设置,即可完成。

角色权限

系统初始化默认管理员、客服组长、客服专员三种角色,客户可根据自身业务需求进行角色的新增/修改,以及对应角色权限的设置(除初始化默认角色外,均可修改角色名称以及删除操作);当管理员进行客服账号添加时,可进行该客服角色的配置。

自动消息

自动消息用于预设一些系统自动会触发回复的内容,如推广语、欢迎语、无应答消息等;初始化时各配置项均关闭,开启时正式启用。

推广消息——

每段对话开启时系统自动向顾客发送一组推广消息,推广消息可是文字、图片,最多支持添加5条。

企业欢迎消息——

每段对话开启,系统自动向顾客发送欢迎语,默认“【系统消息】您好,有什么需要帮助的?”;欢迎语支持编辑。

 

客服无应答时消息——

顾客一段时间没响应客服消息时,系统自动发送一段消息 ,默认20s(可自行设置,设置时间不得少于20s);默认消息为“我还在等待你的消息哟~请问还有什么可以帮到您的吗?”;支持编辑调整。

手动初始化

在加载了拓聊网站插件的前提下,你可以在自己的 JavaScript 中通过调用 _TLKJ(‘init’) 来实现手动初始化。

使用方法如下:

在拓聊的嵌入代码后加入 _TLKJ('manualInit'); ,这个设置将会阻止拓聊插件代码在下载完毕后自动执行初始化操作。 当你需要初始化拓聊插件的时候,在 JavaScript 代码中调用 _TLKJ('init')即可。
注意:

_TLKJ('manualInit') 必须紧跟在拓聊的嵌入代码后面。
没有设置 _TLKJ('manualInit') 是无法使用 _TLKJ('init')的。
如果你在拓聊的代码还没有下载完毕的情况下调用了 _TLKJ('init'),它会等到拓聊代码下载完毕时才被响应。

(function (w, t, l, k, j, g, s) {
	w[k] = w[k] || function () {
		(w[k][j] = w[k][j] || []).push(arguments)
	};
	g = t.createElement(l),
	s = t.getElementsByTagName(l)[0];
	g.charset = 'UTF-8';
	g.id = 'tlkj_1587115010388'
	g.src = 'https://livechat.tlkj.com/sessionFrame.js?random='+ new Date().getTime();
	s.parentNode.insertBefore(g, s);
	g.onload = function () {
		w[k][j] && w[k][j].forEach(function(item) {
        		w[k] && w[k].apply(null, item)
            	})
            	delete w[k][j]
	}
})(window, document, 'script', '_TLKJ', '_TEMP_');

_TLKJ('tid', '我是企业ID')
	
// 在这里开启手动模式(必须紧跟拓聊的嵌入代码)
_TLKJ('manualInit');
<!-- 这是你自己的 JavaScript 代码 -->
<script>
    // 你可以自己的代码中选择合适的时机来调用手动初始化
    _TLKJ('init');
</script>
不使用拓聊的聊天按钮

有时候,也许你不想要显示拓聊自带的聊天按钮,那么你可以使用 _TLKJ('withoutBtn')

	(function (w, t, l, k, j, g, s) {
		w[k] = w[k] || function () {
			(w[k][j] = w[k][j] || []).push(arguments)
		};
		g = t.createElement(l),
			s = t.getElementsByTagName(l)[0];
		g.charset = 'UTF-8';
		g.id = 'tlkj_1587115010388'
		g.src = 'https://livechat.tlkj.com/sessionFrame.js?random='+ new Date().getTime();
		s.parentNode.insertBefore(g, s);
		g.onload = function () {
			w[k][j] && w[k][j].forEach(function(item) {
                w[k] && w[k].apply(null, item)
            })
            delete w[k][j]
		}
	})(window, document, 'script', '_TLKJ', '_TEMP_');
	_TLKJ('tid', '我是企业ID')
	
    	// 在这里开启无按钮模式(常规情况下,需要紧跟在拓聊嵌入代码之后)
    	_TLKJ('withoutBtn');

注意:

本接口不一定要紧跟在拓聊的嵌入代码后面,但必须在拓聊插件初始化之前使用。

<script type='text/javascript'>
    // 当你使用了「手动初始化」时,就可以在自己的逻辑中选择合适的时机调用 withoutBtn
    // 只要是在拓聊初始化之前,就可以被正确执行
    _TLKJ('withoutBtn');
    _TLKJ('init');
</script>
初始化成功时的回调

有时候,也许你需要在拓聊网站插件加载成功后执行一些事件,那么可以使用 _TLKJ('allSet', callback)

注意:

本接口不一定要紧跟在拓聊的嵌入代码后面,但必须在拓聊插件初始化之前使用。

示例:

<!-- 这是你的代码 -->
<script type='text/javascript'>
    function yourFunction() {
        // 你可以根据自己的需求编写相应的代码
        console.log('拓聊网站插件初始化完毕。');
    }
</script>
	(function (w, t, l, k, j, g, s) {
		w[k] = w[k] || function () {
			(w[k][j] = w[k][j] || []).push(arguments)
		};
		g = t.createElement(l),
			s = t.getElementsByTagName(l)[0];
		g.charset = 'UTF-8';
		g.id = 'tlkj_1587115010388'
		g.src = 'https://livechat.tlkj.com/sessionFrame.js?random='+ new Date().getTime();
		s.parentNode.insertBefore(g, s);
		g.onload = function () {
			w[k][j] && w[k][j].forEach(function(item) {
                w[k] && w[k].apply(null, item)
            })
            delete w[k][j]
		}
	})(window, document, 'script', '_TLKJ', '_TEMP_');
	_TLKJ('tid', '我是企业ID')
	
	// 初始化成功时的回调
    	_TLKJ('allSet', yourFunction);
<script type='text/javascript'>
    // 当你使用了「手动初始化」时,就可以在自己的逻辑中选择合适的时机调用 allSet
    // 只要是在拓聊初始化之前,就可以被正确执行
    _TLKJ('allSet', yourFunction);
    _TLKJ('init');
</script>
强制对话

如果你想让拓聊加载成功后直接打开聊天窗口可以如下设置:

示例:

	function (w, t, l, k, j, g, s) {
		w[k] = w[k] || function () {
			(w[k][j] = w[k][j] || []).push(arguments)
		};
		g = t.createElement(l),
			s = t.getElementsByTagName(l)[0];
		g.charset = 'UTF-8';
		g.id = 'tlkj_1587115010388'
		g.src = 'https://livechat.tlkj.com/sessionFrame.js?random='+ new Date().getTime();
		s.parentNode.insertBefore(g, s);
		g.onload = function () {
			w[k][j] && w[k][j].forEach(function(item) {
                w[k] && w[k].apply(null, item)
            })
            delete w[k][j]
		}
	})(window, document, 'script', '_TLKJ', '_TEMP_');
	_TLKJ('tid', '我是企业ID')
	
 	// 初始化成功后调用拓聊 showPanel
    	_TLKJ('allSet', function(){
      	      _TLKJ('showPanel');
    	});
会话开始时的回调

有时候,你可能需要在会话建立的时候做一些操作。

示例:

<!-- 这是你的代码 -->
<script type='text/javascript'>
    function handleStart() {
        console.log('会话开始回调')
    }
</script>
	(function (w, t, l, k, j, g, s) {
		w[k] = w[k] || function () {
			(w[k][j] = w[k][j] || []).push(arguments)
		};
		g = t.createElement(l),
			s = t.getElementsByTagName(l)[0];
		g.charset = 'UTF-8';
		g.id = 'tlkj_1587115010388'
		g.src = 'https://livechat.tlkj.com/sessionFrame.js?random='+ new Date().getTime();
		s.parentNode.insertBefore(g, s);
		g.onload = function () {
			w[k][j] && w[k][j].forEach(function(item) {
                w[k] && w[k].apply(null, item)
            })
            delete w[k][j]
		}
	})(window, document, 'script', '_TLKJ', '_TEMP_');
	_TLKJ('tid', '我是企业ID')
	
    	//会话开始时的回调
   	 _TLKJ('startConversation',handleStart)	
会话结束时的回调

有时候,你可能需要在会话建立的时候做一些操作。

<!-- 这是你的代码 -->
<script type='text/javascript'>
    function handleEnd() {
        console.log('会话开始回调')
    }
</script>
	(function (w, t, l, k, j, g, s) {
		w[k] = w[k] || function () {
			(w[k][j] = w[k][j] || []).push(arguments)
		};
		g = t.createElement(l),
			s = t.getElementsByTagName(l)[0];
		g.charset = 'UTF-8';
		g.id = 'tlkj_1587115010388'
		g.src = 'https://livechat.tlkj.com/sessionFrame.js?random='+ new Date().getTime();
		s.parentNode.insertBefore(g, s);
		g.onload = function () {
			w[k][j] && w[k][j].forEach(function(item) {
                w[k] && w[k].apply(null, item)
            })
            delete w[k][j]
		}
	})(window, document, 'script', '_TLKJ', '_TEMP_');
	_TLKJ('tid', '我是企业ID')
	
    	// 会话结束时的回调
    	_TLKJ('endConversation',handleEnd)
打开聊天窗

在某些需求下,你可能希望在自己编写的代码中掌控拓聊聊天窗。

在拓聊网站插件初始化成功的前提下,调用 _TLKJ('showPanel') 就可以打开拓聊聊天窗。

注意:

如果你在拓聊插件还没有初始化成功的情况下调用了本接口,它将无法被正确执行。 如果你想要在拓聊插件加载完毕后立即调用聊天窗,那么可以组合「初始化成功时的回调」接口来实现。

示例:

<!-- 你可以直接在 HTML 元素中绑定 showPanel -->
<a href="javascript:void(0)" onclick="_TLKJ('showPanel')">联系客服</a>

<!-- 当然也可以在 Javascript 中调用 -->
<script>
    _TLKJ('showPanel');
</script>
隐藏聊天窗

在拓聊网站插件初始化成功的前提下,调用 _TLKJ(‘hidePanel’) 就可以隐藏拓聊聊天窗。

示例:

<!-- HTML -->
<button onclick="_TLKJ('hidePanel')">隐藏窗口</button>

<!-- Javascript -->
<script>
    _TLKJ('hidePanel');
</script>
获取聊天窗口可见性

如果你想在拓聊聊天窗口显示或隐藏时处理一些自己的事件,那么可以使用 _TLKJ('getPanelVisibility', callback) 来获取聊天窗口可见性。

可以结合自定义聊天按钮使用 比如你编写了自己的聊天按钮,想在拓聊聊天窗口显示时隐藏聊天按钮(相反也是这样),那么这个接口可以帮助你实现需求。

注意:

本接口不一定要紧跟在拓聊的嵌入代码后面,但必须在拓聊插件初始化之前使用。

<!-- 你需要根据实际情况编写你自己的处理函数 -->
<script>
    /**
     * [根据聊天窗口的可见状态执行相应的事件]
     * @param  {string} visibility [聊天窗口的可见状态,visible || invisible]
     */
    function yourFunction(visibility) {
        if (visibility === 'visible') {
            console.log('聊天窗口处于显示状态');
            // 例如:
            document.getElementById('yourCustomChatBtn').style.display = 'none'
        } else {
            console.log('聊天窗口处于隐藏状态');
            // 例如:
            document.getElementById('yourCustomChatBtn').style.display = 'block'
        }
    }
</script>

	(function (w, t, l, k, j, g, s) {
		w[k] = w[k] || function () {
			(w[k][j] = w[k][j] || []).push(arguments)
		};
		g = t.createElement(l),
			s = t.getElementsByTagName(l)[0];
		g.charset = 'UTF-8';
		g.id = 'tlkj_1587115010388'
		g.src = 'https://livechat.tlkj.com/sessionFrame.js?random='+ new Date().getTime();
		s.parentNode.insertBefore(g, s);
		g.onload = function () {
			w[k][j] && w[k][j].forEach(function(item) {
                w[k] && w[k].apply(null, item)
            })
            delete w[k][j]
		}
	})(window, document, 'script', '_TLKJ', '_TEMP_');
	_TLKJ('tid', '我是企业ID')
	
	// 获取聊天窗口可见性
    _TLKJ('getPanelVisibility', yourFunction);

<script type='text/javascript'>
    // 当你使用了「手动初始化」时
    // 就可以在自己的逻辑中选择合适的时机调用 getPanelVisibility
    // 只要是在拓聊插件初始化之前,就可以被正确执行
    _TLKJ('getPanelVisibility', yourFunction);
    _TLKJ('withoutBtn')
    _TLKJ('init');
</script>
传递客户信息

在拓聊工作台中,你可以手动为对话中的顾客添加个人信息,而通过 _TLKJ(‘metadata’, {}) 接口,可以将这个工作自动化。

拓聊默认的顾客个人信息包括:

vName    //姓名
vAge     // 年龄
vGender  // 性别
vPhone   // 电话
vQq      // QQ
vWx      // 微信
vAddress // 地址
vEmail   // 邮箱
vRemark  // 备注
vLinkman // 联系人

注意:

如果你在拓聊的代码还没有下载完毕的情况下调用了本接口,它会等到拓聊代码下载完毕后才被执行。

示例:

<!-- 这是你的代码 -->
<script type='text/javascript'>
    /**
     * [在顾客访问你的网站期间,当他触发了某些特定事件时,你可以即时的调整顾客信息]
     * [假设 doSomething 是你用来处理某个特定事件的函数]
     */
    function doSomething () {
        // 传递顾客信息
        _MEIQIA('metadata', {
            action: '触发了 doSomething'
        });
    }
</script>

例如你的顾客在访问你的网站期间点击了付费按钮,你可以更新工作台的顾客信息进行进一步的追踪

<a href="javascript:void(0)" onclick="_TLKJ('metadata', {action: '点击了付费按钮'})">付费按钮</a>
<!-- 这是拓聊的嵌入代码 -->
<script type="text/javascript">
    	(function (w, t, l, k, j, g, s) {
		w[k] = w[k] || function () {
			(w[k][j] = w[k][j] || []).push(arguments)
		};
		g = t.createElement(l),
			s = t.getElementsByTagName(l)[0];
		g.charset = 'UTF-8';
		g.id = 'tlkj_1587115010388'
		g.src = 'https://livechat.tlkj.com/sessionFrame.js?random='+ new Date().getTime();
		s.parentNode.insertBefore(g, s);
		g.onload = function () {
			w[k][j] && w[k][j].forEach(function(item) {
                w[k] && w[k].apply(null, item)
            })
            delete w[k][j]
		}
	})(window, document, 'script', '_TLKJ', '_TEMP_');
	_TLKJ('tid', '我是企业ID')
</script>

// 传递顾客信息
    _TLKJ('metadata', {
        vName: '小拓', // 拓聊默认字段
        vLinkman: '马云', // 拓聊默认字段
        orderId: 'bla bla bla', // 自定义字段
        isPayed: 'lalala' // 自定义字段,
        abc: 'xxxxx' //自定义字段 
    });
访客id由外部传入

注意: 如果访客id是由外部传入的话,请选择手动初始化

 _TLKJ('manualInit');

这时候插件不会初始化,等到在获取并传入了访客id,再调用 _TLKJ('init'); 走后面的流程

(function (w, t, l, k, j, g, s) {
    w[k] = w[k] || function () {
       (w[k][j] = w[k][j] || []).push(arguments);
    };
    g = t.createElement(l),
    s = t.getElementsByTagName(l)[0];
    g.charset = 'UTF-8';
    g.id = 'tlkj_1587115010388';
    g.src = 'https://livechat.tlkj.com/sessionFrame.js?random='+ new Date().getTime();
    s.parentNode.insertBefore(g, s);
    g.onload = function () {
      w[k][j] && w[k][j].forEach(function(item) {
          w[k] && w[k].apply(null, item)
      });
      delete w[k][j];
    }
  })(window, document, 'script', '_TLKJ', '_TEMP_');
     _TLKJ('manualInit');
     _TLKJ('tid', "我是企业id");
     _TLKJ('customUserId', '自定义的访客id');
     _TLKJ('init');

在有些情况,用户可能是登录了账号 再使用的插件访客端,那么我们可以由外部传入一个字段customUserId ,标识是同一个访客,它的值可以由插件使用者自定义的传入,传入以后,只要customUserId 不变,就指向同一个访客,无论在哪里执行插件,都能拿到访客的历史会话记录

插件销毁

在某些场景下,你可能希望在插件可以被销毁,比如说退出登录了,不再显示插件访客端或者想要重新初始化

<!-- 可以在 Javascript 中调用 -->
<script>
    _TLKJ('destroyWidget');
</script>

执行了这个方法,会将插件嵌入在页面的html代码删除,动态嵌入的script节点也会删除。
如果你想要重新初始化插件,则重新运行插件代码即可。