自定义访客端接入

如果您当前是自建站或暂时还未支持的平台网站,可以通过自定义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引入链接

引入链接:
  1. 设备关联:https://chat.quickcep.com/native.html?platform=others&accessId=xxx
  2. 帐号关联:https://chat.quickcep.com/native-with-user.html?platform=others&accessId=xxx
说明:
  1. 设备关联:无用户状态情况下,将按设备生成唯一信息进行用户绑定操作(getLoginInfo),聊天记录与设备相关,在app不卸载或清除缓存情况下,会进行惟一性关联查看历史记录;
  2. 帐号关联:必须有用户状态,进行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}
2024-08-07
6 3