Skip to main content

Customer Service Chat

CustomerService

Applicable Scenarios#​

On the Mini Program side, after clicking, the customer service chat component directly accesses the Mini Program customer service chat interface. The customer service chat feature is one of the most convenient entry points for communicating and connecting with Mini Program end users. By simply configuring one component, you can complete the full functionality of the customer service system within 3 minutes, enabling two-way communication between users and customer service personnel.

The final runtime result on both the user side and customer service personnel side is as follows.

Mini Program User-Side Effect​

Developers add the customer service chat component within the Mini Program. Users can invoke the customer service chat page and send messages to the Mini Program within the app.

If the customer service chat component enables in-chat message cards, after the user enters the chat area, a message card will appear in the lower right corner. Clicking it allows sending the card information to customer service personnel with one click.

image-20230330120816101

Customer Service Personnel Side Effect​

Customer service personnel can implement customer service access capabilities through the official [Customer Service Assistant]. You only need to configure customer service staff on the WeChat Official Account Platform.

image-20230330140514951

Component Usage Limitations​

  • The customer service chat component is only supported on the Mini Program side. It will be hidden in PC/H5.
  • The editor does not support simulating the message session entry effect. Please publish the application and preview/experience it in the actual WeChat Mini Program environment.

Usage Instructions​

  1. Please confirm that the selected application supports mini-program-side building. For specific operations, refer to Create Application Guide.

  2. Add the Customer Service Chat component in the editor.

    image

  3. Go to the WeChat Official Account Platform, navigate to the [Features > Customer Service] module, and add Mini Program customer service staff according to the instructions. After adding, when Mini Program users send customer service messages, the customer service staff will receive notifications. Once customer service access is established, communication can begin. At this point, customer service personnel and users can engage in two-way communication through the customer service chat.

    image

  4. After enabling the display of in-chat message cards for customer service sessions, users can send pre-configured message cards with one click upon entering the chat interface. This allows customer service personnel to quickly understand the context of the user's inquiry (e.g., the triggering page, product information, etc.). If the display of in-chat message cards for customer service sessions is enabled but the card's title, redirect link, and image are not configured, the title, redirect link, and snapshot of the current page will be displayed by default.

  5. WeDa provides two pre-configured templates for common customer service chat scenarios. If you select [Floating at Bottom Right], the component will remain fixed in the bottom-right corner and will not move with screen scrolling.

  6. If you wish to customize the style of the customer service chat component, you can adjust the style of its child icon component. To display other information such as text or images within the customer service chat component, delete the default icon component and drag your desired components into the customer service chat area.

Properties​

组件接收的外部传入的属性

属性名
属性标识
类型
说明
模板templatestring

客服会话样式的预设模板

示例："suspend"

是否显示会话内消息卡片(小程序)showMessageCardboolean

示例：false

消息卡片标题(小程序)sendMessageTitlestring

示例：""

消息卡片点击跳转小程序路径(小程序)sendMessagePathstring

示例：""

消息卡片图片(小程序)sendMessageImgstring

示例：""

会话来源(小程序)sessionFromstring

示例：""

Events​

组件暴露的事件，可以监听组件的事件来触发一些外部的动作

事件名
事件code
事件出参 event.detail
适用情况
说明
客服消息回调contactobject
  • errMsg: string错误信息

    错误信息
  • path: string小程序消息指定的路径

    小程序消息指定的路径
  • query: object 小程序消息指定的查询参数

    小程序消息指定的查询参数
    		小程序

    -

    Method API​

    无

    Style API​

    通过样式 API，可以覆盖组件中内部元素的样式来实现自定义，例如在低代码编辑器中中通过 #wd-page-root .wd-btn 即可为所有的按钮组件编写样式，通过 :scope 可以控制单个组件样式， 详细说明请参考样式 API

    名称
    类名
    说明和示例
    根元素.wd-customer-service组件根元素
    /* :scope 指的是当前组件元素 */
/* 具体可参考样式 API 文档 */
:scope.wd-customer-service {
  /* 在这里编写CSS 样式 */
}
    小程序端根元素.wd-mp-customer-service可以为小程序端的组件编写样式
    /* :scope 指的是当前组件元素 */
/* 具体可参考样式 API 文档 */
:scope.wd-mp-customer-service {
  /* 在这里编写CSS 样式 */
}

    了解样式 API