📌 Crisp 客服

SunSeekerX ... 2021-8-6 大约 6 分钟

# 📌 Crisp 客服

# 简介

插件市场的文档解析有问题!方法名都解析出问题!查看在线文档:https://doc.yoouu.cn/front-end/uni-app/nativeplugins/crisp/ (opens new window)

官网: https://crisp.chat/en/ (opens new window)

Github: https://github.com/crisp-im (opens new window)

更多插件:https://doc.yoouu.cn/front-end/uni-app-nativeplugins/ (opens new window)

# 平台兼容性

Android iOS
5.0 - 13.0 13 - 16

# 使用示例

  1. 选中原生插件
  2. 在可视化区域配置 websiteId 参数
  3. 直接调用 onStartCrisp() 即可启动。

2.0 以前只能初始化一次,实际上是不正确的,2.0 的版本使用体验和官方保持了一直,可以动态去修改 websiteId,如果未设置 websiteId 会出现安卓闪退,ios 没有反应。原因是因为没办法去判断是否已经设置了 websiteId。已经提了需求可以点这里查看: https://github.com/crisp-im/crisp-sdk-android/issues/138 (opens new window) 如果官方后续支持了的话,我会跟进修改。

const superModuleCrisp = uni.requireNativePlugin('Super-Module-Crisp')

/**
 * 初始化 Crisp, 2.0 以后 可以重复初始化
*/
onInitConfigureCrisp() {
  const res = superModuleCrisp.onInitConfigure({
    websiteId: 'YOUR_WEBSITE_ID',
  })
  toast('onInitConfigureCrisp', res)
}

/**
 * 启动 Crisp
*/
onStartCrisp() {
  const res =  superModuleCrisp.onStartCrisp()
  toast('onStartCrisp', res)
}

/**
 * Toast 提示
 */
const toast = (title, val) => {
  try {
    if (typeof val === 'object') {
      val = JSON.stringify(val)
    } else {
      val = String(val)
    }
  } catch (e) {
    val = e.message
  } finally {
    uni.showToast({
      icon: 'none',
      title: `${title}: ${val}`,
      duration: 3000,
    })
  }
}

/**
 * 安全运行
 */
const safeRunning = (name, fun) => {
  try {
    fun()
  } catch (e) {
    toast(name, e.message)
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

# 模块方法

# onInitConfigure(options): result

初始化 Crisp。

  • options <Object>
    • websiteId <String> 网站 id
  • result <Object> 执行返回信息
    • success <Boolean> 操作是否成功
    • code <Number> 状态码
      • 200 初始化 Crisp 成功!
      • 400 请传入 "websiteId"!
      • 401 请勿重复初始化!
    • msg <String> 请求信息

# onStartCrisp(options?): result

启动 Crisp。

请注意在原生插件设置了 websiteId 或者传入 websiteIdisInittrue 才能启动成功,否则安卓会闪退,ios 没有反应。

options <Object> 启动参数,可选

  • isInit <Boolean> 是否进行初始化
  • websiteId <String> 网站 id

result <Object> 执行返回信息

  • success <Boolean> 操作是否成功
  • code <Number> 状态码
    • 200 启动成功!
  • msg <String> 请求信息

# onInvokeCrispFun(options): result

调用 SDK 其他的方法。ios 方法名参考 android sdk 方法名调用。官方 Android 文档: https://docs.crisp.chat/guides/chatbox-sdks/android-sdk/ (opens new window)

options <Object> 参数

  • name <String> 方法名
  • params <Object> 方法参数,根据官网文档参数顺序设置

result <Object> 执行返回信息

  • success <Boolean> 操作是否成功
  • code <Number> 状态码
    • 200 启动成功!
    • 400 请先初始化!
  • msg <String> 请求信息

示例

const res = superModuleCrisp.onInvokeCrispFun({
  name,
  params,
})
toast(`onInvokeCrispFun - ${name}`, res)
1
2
3
4
5
1
2
3
4
5

# 权限列表

Ios

 [
         "NSCameraUsageDescription",
         "NSPhotoLibraryAddUsageDescription"
       ]
1
2
3
4
1
2
3
4

Android

本插件采集的数据、发送的服务器地址、以及数据用途说明

Crisp sdk 隐私政策:https://crisp.chat/en/privacy/ (opens new window)

# 演示截图

Ios

ios-screenshot

Android

android-screenshot

# 测试文件代码

<template>
  <view class="content">
    <!-- Crisp -->
    <view class="gap"><text>📌 Crisp</text></view>
    <!-- 初始化 Crisp -->
    <view class="input">
      <input v-model="crisp.websiteId" type="text" placeholder="请输入 websiteId" />
    </view>
    <button type="primary" @click="onInitConfigureCrisp">初始化 Crisp</button>

    <!-- 设置 configure -->
    <view class="input">
      <input v-model="crisp.configureWebsiteId" type="text" placeholder="请输入 websiteId" />
    </view>
    <button
      type="primary"
      @click="
        onInvokeCrispFun({
          name: 'configure',
          params: {
            websiteId: crisp.configureWebsiteId,
          },
        })
      "
      >configure</button
    >

    <!-- setTokenID -->
    <view class="input">
      <input v-model="crisp.tokenID" type="text" placeholder="请输入 tokenID" />
    </view>
    <button
      type="primary"
      @click="
        onInvokeCrispFun({
          name: 'setTokenID',
          params: {
            websiteId: crisp.tokenID,
          },
        })
      "
      >setTokenID</button
    >

    <!-- resetChatSession -->
    <button
      type="primary"
      @click="
        onInvokeCrispFun({
          name: 'resetChatSession',
        })
      "
      >resetChatSession</button
    >

    <!-- setUserAvatar -->
    <view class="input">
      <input v-model="crisp.avatar" type="text" placeholder="请输入 avatar" />
    </view>
    <button
      type="primary"
      @click="
        onInvokeCrispFun({
          name: 'setUserAvatar',
          params: {
            avatar: crisp.avatar,
          },
        })
      "
      >setUserAvatar</button
    >

    <!-- setUserCompany -->
    <view class="input">
      <input v-model="crisp.name" type="text" placeholder="请输入 name" />
    </view>
    <view class="input"> <input v-model="crisp.url" type="text" placeholder="请输入 url" /> </view>
    <view class="input">
      <input
        v-model="crisp.companyDescription"
        type="text"
        placeholder="请输入 companyDescription"
      />
    </view>
    <view class="input">
      <input v-model="crisp.employment.role" type="text" placeholder="请输入 employment.role" />
    </view>
    <view class="input">
      <input v-model="crisp.employment.title" type="text" placeholder="请输入 employment.title" />
    </view>
    <view class="input">
      <input v-model="crisp.geolocation.city" type="text" placeholder="请输入 geolocation.city" />
    </view>
    <view class="input">
      <input
        v-model="crisp.geolocation.country"
        type="text"
        placeholder="请输入 geolocation.country"
      />
    </view>
    <button
      type="primary"
      @click="
        onInvokeCrispFun({
          name: 'setUserCompany',
          params: {
            name: crisp.name,
            url: crisp.url,
            companyDescription: crisp.companyDescription,
            employment: {
              role: crisp.employment.role,
              title: crisp.employment.title,
            },
            geolocation: {
              city: crisp.geolocation.city,
              country: crisp.geolocation.country,
            },
          },
        })
      "
      >setUserCompany</button
    >

    <!-- 设置用户邮箱 -->
    <view class="input">
      <input v-model="crisp.email" type="text" placeholder="请输入用户邮箱" />
    </view>
    <button type="primary" @click="onCrispSetUserEmail">设置用户邮箱</button>

    <!-- setUserNickname -->
    <view class="input">
      <input v-model="crisp.nickname" type="text" placeholder="请输入 nickname" />
    </view>
    <button
      type="primary"
      @click="
        onInvokeCrispFun({
          name: 'setUserNickname',
          params: {
            nickname: crisp.nickname,
          },
        })
      "
      >setUserNickname</button
    >

    <!-- setUserPhone -->
    <view class="input">
      <input v-model="crisp.phone" type="text" placeholder="请输入 phone" />
    </view>
    <button
      type="primary"
      @click="
        onInvokeCrispFun({
          name: 'setUserPhone',
          params: {
            phone: crisp.phone,
          },
        })
      "
      >setUserPhone</button
    >

    <!-- setSessionBool -->
    <view class="input">
      <input
        v-model="crisp.setSessionBool.key"
        type="text"
        placeholder="请输入 setSessionBool.key"
      />
    </view>
    <view class="input">
      <text>setSessionBool.value</text>
      <u-switch
        v-model="crisp.setSessionBool.value"
        @change="
          (val) => {
            crisp.setSessionBool.value = val
          }
        "
      />
    </view>

    <button
      type="primary"
      @click="
        onInvokeCrispFun({
          name: 'setSessionBool',
          params: {
            key: crisp.setSessionBool.key,
            value: crisp.setSessionBool.value,
          },
        })
      "
      >setSessionBool</button
    >

    <!-- setSessionInt -->
    <view class="input">
      <input v-model="crisp.setSessionInt.key" type="text" placeholder="请输入 setSessionInt.key" />
    </view>
    <view class="input">
      <input
        v-model="crisp.setSessionInt.value"
        type="text"
        placeholder="请输入 setSessionInt.value"
      />
    </view>

    <button
      type="primary"
      @click="
        onInvokeCrispFun({
          name: 'setSessionInt',
          params: {
            key: crisp.setSessionInt.key,
            value: crisp.setSessionInt.value,
          },
        })
      "
      >setSessionInt</button
    >

    <!-- setSessionString -->
    <view class="input">
      <input
        v-model="crisp.setSessionString.key"
        type="text"
        placeholder="请输入 setSessionString.key"
      />
    </view>
    <view class="input">
      <input
        v-model="crisp.setSessionString.value"
        type="text"
        placeholder="请输入 setSessionString.value"
      />
    </view>

    <button
      type="primary"
      @click="
        onInvokeCrispFun({
          name: 'setSessionString',
          params: {
            key: crisp.setSessionString.key,
            value: crisp.setSessionString.value,
          },
        })
      "
      >setSessionString</button
    >

    <!-- segment -->
    <view class="input">
      <input v-model="crisp.segment" type="text" placeholder="请输入 segment" />
    </view>

    <button
      type="primary"
      @click="
        onInvokeCrispFun({
          name: 'setSessionSegment',
          params: {
            segment: crisp.segment,
          },
        })
      "
      >segment</button
    >

    <!-- pushSessionEvent -->
    <view class="input">
      <input
        v-model="crisp.pushSessionEvent.text"
        type="text"
        placeholder="请输入 pushSessionEvent.text"
      />
    </view>
    <view class="input" @tap="state.isShowColorPicker = true">
      <text>crisp.pushSessionEvent.color: {{ crisp.pushSessionEvent.color }}</text>
      <!-- <input v-model="crisp.pushSessionEvent.color" disabled type="text" placeholder="请输入 pushSessionEvent.color" /> -->
    </view>

    <button
      type="primary"
      @click="
        onInvokeCrispFun({
          name: 'pushSessionEvent',
          params: {
            text: crisp.pushSessionEvent.text,
            color: crisp.pushSessionEvent.color,
          },
        })
      "
      >pushSessionEvent</button
    >

    <!-- 启动 Crisp -->
    <view class="input">
      <text>是否设置 websiteId</text>
      <u-switch
        v-model="crisp.isInit"
        @change="
          (val) => {
            crisp.isInit = val
          }
        "
      />
    </view>
    <button type="primary" @click="onStartCrisp">启动 Crisp</button>

    <u-picker
      :show="state.isShowColorPicker"
      :defaultIndex="colorIndex"
      @confirm="
        (val) => {
          crisp.pushSessionEvent.color = val.value[0]
          state.isShowColorPicker = false
          colorIndex[0] = val.indexs[0]
        }
      "
      :columns="[['black', 'blue', 'brown', 'green', 'grey', 'orange', 'pink', 'purple', 'red', 'yellow']]"
    />
  </view>
</template>

<script>
  import { toast, safeRunning } from '@/utils'

  // #ifdef APP-PLUS
  const superModuleCrisp = uni.requireNativePlugin('Super-Module-Crisp')
  // #endif

  export default {
    name: 'SuperModuleCrisp',
    data() {
      return {
        state: {
          isShowColorPicker: false,
        },
        colorIndex: [9],

        // Crisp
        crisp: {
          websiteId: '7a30b69a-ec9e-4957-9ffa-b6635d2ba069',
          isInit: false,

          // configure
          configureWebsiteId: '7a30b69a-ec9e-4957-9ffa-b6635d2ba069',

          // setTokenID
          tokenID: '',

          // setUserAvatar
          avatar: 'https://p.qqan.com/up/2021-2/16137992359659254.jpg',

          // setUserCompany
          name: 'SunSeekerX 公司',
          url: 'https://yoouu.cn/',
          companyDescription: '天下第一。',
          employment: {
            role: '总经理',
            title: '我是标题',
          },
          geolocation: {
            city: '上海',
            country: '中国',
          },

          // setUserEmail
          email: '1647800606@qq.com',

          // setUserNickname
          nickname: '不知道起啥昵称',

          // setUserPhone
          phone: '13800000000',

          // setSessionBool
          setSessionBool: {
            key: '',
            value: false,
          },

          // setSessionInt
          setSessionInt: {
            key: '',
            value: 0,
          },

          // setSessionString
          setSessionString: {
            key: '',
            value: '',
          },

          // setSessionSegment
          segment: '',

          // pushSessionEvent
          pushSessionEvent: {
            text: '',
            /*
           @SerializedName("black")
            BLACK,
            @SerializedName("blue")
            BLUE,
            @SerializedName("brown")
            BROWN,
            @SerializedName("green")
            GREEN,
            @SerializedName("grey")
            GREY,
            @SerializedName("orange")
            ORANGE,
            @SerializedName("pink")
            PINK,
            @SerializedName("purple")
            PURPLE,
            @SerializedName("red")
            RED,
            @SerializedName("yellow")
            YELLOW;
           */
            color: 'yellow',
          },
        },
      }
    },
    methods: {
      /**
       * 初始化 Crisp
       */
      onInitConfigureCrisp() {
        safeRunning('onInitConfigureCrisp', () => {
          const res = superModuleCrisp.onInitConfigure({
            // 4650b9b7-111f-4548-9e09-94dede5be9ed Cowbitex,
            // 7a30b69a-ec9e-4957-9ffa-b6635d2ba069 sunseekerx,
            websiteId: this.crisp.websiteId,
          })
          toast('onInitConfigureCrisp', res)
        })
      },

      /**
       * 启动 Crisp
       */
      onStartCrisp() {
        safeRunning('onStartCrisp', () => {
          // superModuleCrisp.onStartCrisp()
          const res = superModuleCrisp.onStartCrisp({
            isInit: this.crisp.isInit,
            websiteId: this.crisp.websiteId,
          })
          toast('onStartCrisp', res)
        })
      },

      /**
       * 设置用户邮箱
       */
      onCrispSetUserEmail() {
        safeRunning('onCrispSetUserEmail', () => {
          const res = superModuleCrisp.onInvokeCrispFun({
            name: 'setUserEmail',
            params: {
              email: this.crisp.email,
            },
          })
          toast('onCrispSetUserEmail', res)
        })
      },

      /**
       * onInvokeCrispFun
       */
      onInvokeCrispFun({ name, params }) {
        safeRunning(`onInvokeCrispFun - ${name}`, () => {
          const res = superModuleCrisp.onInvokeCrispFun({
            name,
            params,
          })
          toast(`onInvokeCrispFun - ${name}`, res)
        })
      },
      confirm(e) {
        console.log(e)
      },
    },
  }
</script>

<style lang="scss" scoped>
  .content {
    padding: 12px 24rpx;

    button {
      margin-top: 6px;
      font-size: 16px;
    }

    .gap {
      margin-top: 18px;

      text {
        font-size: 18px;
      }

      &:first-child {
        margin-top: 0;
      }
    }

    .input {
      margin-top: 12px;
      padding: 12rpx 24rpx;
      border: 1px solid #eee;
      color: #333;

      &:first-child {
        margin-top: 0;
      }
    }
  }
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526

# 更新日志

# 2.0.0 2022-09-24

功能(Features)

  • 【重要】支持调用 sdk 其他的方法,已经全部支持官方提供的方法

  • 【重要】支持可视化配置 websiteId

  • 【重要】支持动态修改 websiteId

  • 【重要】升级到最新的可用的 sdk 版本

  • Android 使用的 sdk 版本:crisp-sdk-1.0.11.aar

  • Ios 使用的 sdk 版本:Crisp_1.6.4.zip

# 1.0.1

功能(Features)

  1. 更新插件采集数据说明

Bug 修复 (Bug Fixes)

# 1.0.0

功能(Features)

  • Android 使用的 sdk 版本:crisp-sdk-1.0.7.aar
  • Ios 使用的 sdk 版本:Crisp_1.0.14.zip

Bug 修复 (Bug Fixes)

# 问题反馈

虽然插件已经经过开发者测试和使用,但不排除某些场景下产生问题的可能性,如遇到 Bug 可以在评论区留言,或添加 QQ: 1647800606 进行反馈。

上次编辑于: 2022年9月24日 09:34
贡献者: SunSeekerX