如果您当前是自建站或暂时还未支持的平台网站,可以通过自定义JavaScript的方式进行集成。
web/h5 方式
1.首先登录QuickCEP后台,进入设置模块>>集成管理页面>>自定义javascript。
2.复制javascript标签,引入到需要的页面。在您网站的HTML中,粘贴在</head>标记之前,即可。
参数说明
参数 | 说明 |
platform | 平台标记,可选值: shopify、shoplazza、other |
medium | 渠道来源,可自定义,对应值将展示在座席聊天对话框中 |
accessId | 店铺唯一标记 |
3.定义hook,访客端初始化完成后会执行
quickChatReadyHook函数
window.quickChatReadyHook = () => {
console.log('访客端初始化完成')
}
4. 初始化完成后会生成1个全局对象 quickChatApi
5.quickChatApi介绍
5.1 聊天框相关
聊天框操作 | 方法名 |
隐藏聊天插件 | quickChatApi.close(); |
显示聊天插件 | quickChatApi.open(); |
显示聊天插件,并打开聊天框 | quickChatApi.chat(); |
监听聊天插件事件 | quickChatApi.on('close', fn) |
Tips:监听聊天插件事件,目前只支持'close',关闭聊天框时触发。
5.2 访客行为相关
设置访客唯一id:
quickChatApi.identify(id)
更新(添加)客户属性:目前支持email, phone, firstName, lastName 4个字段,示例如下:
quickChatApi.setContactProperties({email: '123@gmail.com'})
访客事件:quickChatApi.track(eventType) 目前支持
SHOP_CART_ADD_SKU:添加购物⻋
SHOP_CHECKOUT_CREATE:开始结账
SHOP_CHECKOUT_CANCEL:放弃结账
SHOP_CHECKOUT_FINISH:结账完成
order_id 订单id
order_key 订单token
自定义上报事件名称 | 事件常量标识 | 参数名称 | 参数概述 | 参数类型 | 备注 |
添加购物⻋ | SHOP_CART_ADD_SKU | \ | \ | \ | |
开始结账 | SHOP_CHECKOUT_CREATE | $checkoutToken(选填) | 生成订单的唯一标识 | string | |
放弃结账 | SHOP_CHECKOUT_CANCEL | \ | \ | \ | 注:woocommerce平台,放弃结账事件可以不上报,但前提是保证开始结账事件的上报,是在支付页面完成的。 |
结账完成 | SHOP_CHECKOUT_FINISH | $checkoutToken(选填)(注:如果开始结账没有上报checkoutToken,在结账完成事件中必须上报checkoutToken数据。)(woocommerce中的checkoutToken是平台中的order_key)$order_id(订单id,与checkoutToken任选其一) | 生成订单的唯一标识 | string | 如果整个下单结算过程中,在开始结账生成订单的时候不能上传checkoutToken,那在结账完成时候,必须在结账完成事件中添加checkoutToken参数。(注:woocommerce 平台订单完成事件可以不上报,要保证支付完成页面的url格式是 /checkout/order-received/{order_id}?key={order_key}) |
示例如下:
quickChatApi.track(eventName, {[prop]: value}(可选参数))
// 例子: 开始结账事件
```
quickChatApi.track('SHOP_CHECKOUT_CREATE', {checkoutToken: 'XXXXXXXXXX'});
```
Tips:
1. 设置访客id和客户属性需要一起使用,否则会生成多个游客
2. 测试时请注意使用新的无痕浏览器,否则会通过识别浏览器cookie进行客户资料的合并
3. 客户合并的逻辑优先级 cookie>id>邮箱号/手机号
4. woocommerce平台建站,添加购物⻋和开始结账,必须主动上报事件
5. 自建站,添加购物⻋、开始结账、放弃结账、结账完成 四个事件必须主动上报。
APP引入H5
1.APP引入链接
引入链接:
- 设备关联:https://chat.quickcep.com/native.html?platform=others&accessId=xxx
- 帐号关联:https://chat.quickcep.com/native-with-user.html?platform=others&accessId=xxx
说明:
- 设备关联:无用户状态情况下,将按设备生成唯一信息进行用户绑定操作(getLoginInfo),聊天记录与设备相关,在app不卸载或清除缓存情况下,会进行惟一性关联查看历史记录;
- 帐号关联:必须有用户状态,进行bridge对接时,无论何种状态均需要返回ID,quickCEP将用ID与用户绑定,与设备无关;历史记录与帐号关联;
2. JSBridge使用教程:
JSBridge名字: WebViewJavascriptBridge
bridge上需要提供以下信息
JSBridge方法或事件 | 对应方法名 | 详情说明 |
ready事件 | WebViewJavascriptBridgeReady | 桥接准备好以后触发事件,需要准备此事件只在android下有效,ios请使用WVJBCallbacks |
h5调用app方法 | callHandler(handlerName,params,callback):void; | handlerName :调用方法
params : 调用参数callback :h5调用app方法后,接受返回数据的回调函数 |
h5注册方法,提供给app调用 | registerHandler(handlerName:string,hanlder:(data:any,callback:(data:any)=>void)):void; | handlerName :注册方法handler :注册函数,接受两个参数,第一个app调用h5方法传入的数据,第二个为回调函数,当h5执行后会通过回调函数返回执行结果,结构为{code:1,data:any}; |
app需要向h5提供以下方法
1、获取访客信息, 记录到cep系统。其中ID为必传,其它信息根据需求判断是否需要。ID将做为会话惟一标识进行。
注意此函数必须注册到bridge,否则会话信息无法关联
。 方法:getLoginInfo
入参:无
返回参数:
{
code: 1,
data: {
ID: string;//访客id
email?: string;//访客邮箱
phone?: string;//访客手机号
firstName?: string;
lastName?: string;
isClickChatIcon?: boolean;//是否触发机器人点击聊天按钮事件,不传则默认要触发
custom:Record<string,string>;// 自定义属性值,与setCustomParameters作用一致
}
}
2、打开商品详情页面
方法:openPage
入参:
{link:string}
返回参数:
{code:1,data:null}
h5向app提供的方法
1、访客点击聊天按钮,需要触发机器人流程,效果等同于getLoginInfo中的isClickChatIcon:true
方法:visitorClickChatIcon
入参:无
返回参数:
{code:1,data:null}
2、给访客添加添加自定义数据,效果等同于getLoginInfo中的custom字段值
方法:setCustomParameters
入参:{key:any}
返回参数:
{code:1,data:null}