你可以选择 NPM 包的安装方式来集成浩客 SDK，NPM 包地址：https://github.com/howxm/howxm-js
NPM 包的集成方式支持 react 和 vue，我们在 github 上放置了浩客的集成 demo repo 代码库，可以进行查看.
npm install --save howxm-js
NPM 包的接口方法依然遵循了 X-SDK WEB 端的接口，参数和回调都是类似的，详细可以参看：https://howxm.com/help/articles/web-sdk-intro#x-sdk
示例代码如下
import React from 'react'
import { initHowxm } from 'howxm-js'
const myLogger = console.info
const HowxmReadyApp = () => {
const appId = '<Your App ID>'
useEffect(() => {
initHowxm(appId, myLogger)
}, [])
return <App />
}
接口信息，详细可查看：identify
示例代码如下
import React from 'react'
import { identifyHowxm } from 'howxm-js'
const myLogger = console.info
const MyCustomComponent = () => {
const customerInfo = {
uid: '00000001', // 用户唯一ID, 默认字段, 必填，string 类型
}
const handleUserInfo = (userInfo) => {
identifyHowxm(customerInfo)
}
}
接口信息，详细可查看：event
示例代码如下
import React from 'react'
import { eventHowxm } from 'howxm-js'
const myLogger = console.info
const MyCustomComponent = () => {
const eventCode = '<event code>'
const eventAttrs = {
plan: 'free',
age: 17,
}
const handleTriggerEvent = () => {
eventHowxm(eventCode, eventAttrs, () => {
myLogger('triggerEvent success')
})
}
}
接口信息，详细可查看：checkOpen
示例代码如下
import React from 'react'
import { checkOpenHowxm } from 'howxm-js'
const myLogger = console.info
const MyCustomComponent = () => {
const campaignId = '<You Campaign ID>'
const uid = '00000001'
const handlecCheckOpenCampaign = () => {
checkOpenHowxm(
campaignId,
customerInfo,
() => {
myLogger('checkOpenHowxm success')
},
(data) => {
myLogger('checkOpenHowxm faield', data)
}
)
}
}
接口信息，详细可查看：open
示例代码如下
import React from 'react'
import { openHowxm } from 'howxm-js'
const myLogger = console.info
const MyCustomComponent = () => {
const campaignId = '<You Campaign ID>'
const customerInfo = {
uid: '00000001', // 用户唯一ID, 默认字段, 必填，string 类型
}
const extra = {
plan: 'free',
}
const handleOpenCampaign = () => {
openHowxm(campaignId, customerInfo, extra, () => {
myLogger('openHowxm finished')
})
}
}
通过此方法可注册全局回调事件，在问卷展示和回收过程的不同阶段进行自定义处理。调用方法如下：
onBeforeOpenHowxm((campaignId, uid, attributes) => {
console.log('onBeforeOpenHowxm: ', campaignId, uid, attributes)
})
onOpenHowxm((campaignId, uid, attributes) => {
console.log('onOpenHowxm: ', campaignId, uid, attributes)
})
onCloseHowxm((campaignId, uid) => {
console.log('onCloseHowxm: ', campaignId, uid)
})
onPageCompleteHowxm((campaignId, uid, fieldsEntry) => {
console.log('onPageCompleteHowxm: ', campaignId, uid, fieldsEntry)
})
onCompleteHowxm((campaignId, uid) => {
console.log('onCompleteHowxm: ', campaignId, uid)
})
回调阶段定义
| 名称 | 说明 |
|---|---|
| onBeforeOpenHowxm | 问卷展示前调用 |
| onOpenHowxm | 问卷展示后调用 |
| onCloseHowxm | 问卷在屏幕消失后调用 |
| onPageCompleteHowxm | 用户提交了最后一页题目后调用 |
| onCompleteHowxm | 用户每提交一页，系统调用一次 |