自定义访客端接入

如果您当前是自建站或暂时还未支持的平台网站,可以通过自定义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'}); ```
demo.html
2.8 KB
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

2. JSBridge使用教程:

JSBridge名字: WebViewJavascriptBridge,
JSBridge方法对应方法名
ready事件名WebViewJavascriptBridgeReady
h5调用app方法callHandler
app调用h5方法registerHandler
h5调用的api
// 获取访客信息, 记录到cep系统
getLoginInfo
入参:无
返回参数:
{ code: 1, data: {     ID: string;//访客id     email?: string;//访客邮箱     phone?: string;//访客手机号     firstName?: string;     lastName?: string; isClickChatIcon?: boolean;//是否触发机器人点击聊天按钮事件,不传则默认要触发 } } // 打开商品详情,传给app
openPage
入参:
{link: string}
返回参数:
{ code: 1, data: null }
visitoerClickChatIcon 
//访客点击聊天按钮,需要触发机器人流程,效果等同于getLoginInfo中的isClickChatIcon:true
入参:null
返回参数
{ code: 1, data: null }
给访客添加添加自定义数据
方法:setCustomParameters
入参:any
如何调用:quickChatApi.setCustomParameters({key:value})
// demo code quickChatApi.setCustomParameters({age:18})
2024-07-16
4 2