Skip to main content
Supported Regions:上海

Customer Service Chat Session

CustomerService

Applicable Scenarios#​

On the Mini Program side, after clicking the Customer Service Chat Session component, you can directly go to the Mini Program Customer Service Chat Session page. The Customer Service Chat Session feature is one of the most convenient entry points to communicate and connect with Mini Program end users. By configuring just one component, you can complete the functional closure of the customer service system within 3 minutes, achieving two-way communication between users and customer service personnel.

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

Mini Program User-Side Effect​

Developers add the Customer Service Chat Session component in the Mini Program, allowing users to open the Customer Service Chat Session page and send messages to the Mini Program.

If the Customer Service Chat Session component enables the in-session message card feature, after the user enters the chat area, a message card will appear in the bottom-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 the customer service access capability through the officially provided [Customer Service Assistant]. You simply need to set up customer service personnel on the WeChat Official Accounts Platform.

image-20230330140514951

Component Usage Limits​

  • The Customer Service Chat Session component is only supported on the Mini Program side. It will be hidden in PC/H5 environments.
  • The editor does not support simulating the effect of entering a message session. Please publish the application and preview/experience it in the real WeChat Mini Program environment.

Usage Instructions​

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

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

    Image 30bd756e5463d9578585ffa66bbbb08e

  3. Go to the WeChat Official Accounts Platform, access the [Features - Customer Service] module, and add Mini Program customer service staff according to the instructions. After adding, if a Mini Program user sends a customer service message, the customer service staff will receive a notification. After the customer service is connected, communication can begin immediately. At this point, both customer service personnel and users can engage in two-way communication through the customer service chat session.

    Image c1b3e8090a0eaed30d3b27dd99c803e7

  4. After enabling the display of in-session message cards in customer service chat, users can send pre-configured message cards with one click when they go to the session page. Customer service personnel can then quickly understand the context of the user's contact (trigger page, product information, etc.). If the display of in-session message cards in customer service chat is enabled and the card's title, redirect link, and image are not configured, the system will display the current page's title, redirect link, and snapshot by default.

  5. WeDa has predefined two templates based on common customer service chat scenarios. If you select [Floating at the bottom right corner], the component will be fixed floating at the bottom right corner and does not move with screen scrolling.

  6. If you wish to customize the style of the Customer Service Chat Session component, you can adjust the styles of its subordinate icon components. To display other information such as text or images in the Customer Service Chat component, delete the default icon component and drag your desired components into the Customer Service Chat session.

Properties​

External properties received by the component

Property Name
Property Identifier
Type
Description
Templatetemplatestring

Customer service conversation style preset template

Example: "suspend"

Whether to display message cards in session(Mini Program)showMessageCardboolean

Example: false

Message card title(Mini Program)sendMessageTitlestring

Example: ""

Message card click redirect Mini Program Path(Mini Program)sendMessagePathstring

Example: ""

message card image(Mini Program)sendMessageImgstring

Example: ""

Session source(Mini Program)sessionFromstring

Example: ""

Events​

Events exposed by the component. You can listen to component events to trigger external actions

Event Name
Event Code
Event Output Parameters event.detail
Applicable Scenarios
Description
Customer service message callbackcontactobject
  • errMsg: string错误信息

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

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

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

    -

    Method API​

    None

    Style API​

    Through the Style API, you can override the styles of internal elements in components to achieve customization. For example, in the low-code editor, you can write styles for all button components using #wd-page-root .wd-btn, and control individual component styles with :scope. For detailed instructions, please refer toStyle API

    Name
    Class Name
    Description and Examples
    root element.wd-customer-servicecomponent root element
    /* :scope refers to the current component element */
/* For details, refer to the Style API documentation */
:scope.wd-customer-service {
  /* Write CSS styles here */
}
    Mini program root element.wd-mp-customer-serviceWrite style for mini program component
    /* :scope refers to the current component element */
/* For details, refer to the Style API documentation */
:scope.wd-mp-customer-service {
  /* Write CSS styles here */
}

    Learn about Style API