ChatBI DingTalk H5 Integration Solution

1. Overview

This article guides how to integrate ChatBI with DingTalk H5 application for intelligent data querying.

2. Prerequisites

The customer has completed DingTalk account integration configuration in the BI platform. For DingTalk account integration solution, see DingTalk Complete Integration Solution.

3. Integration Solutions

Solution 1: Add ChatBI Query in BI Mobile Portal

Add ChatBI query in the BI mobile portal lightweight application. Currently, it's implemented through "Mobile Portal Add Application > Add External Link in Application Page > Embed /chatbi route in External Link Card".

Operation Steps

Entry: Data Application > Mobile > Portal

1. Click "Edit" to enter the edit interface.

2. Find the application group where you want to place the ChatBI entry, click "Add > External Link". For mobile portal related operations, refer to Mobile Portal.
   

   

3. Configure the external link "Name" and "Link" and click "OK". Each topic corresponds to one external link.

   • Name: Custom application name, recommended to keep consistent with topic name.
   • Link: {environment domain}/m/chatbi/{topic ID}. For how to obtain topic ID, refer to How to Get Topic ID.
     
     

4. Click "Save" to complete configuration.

Implementation Effect

Different ChatBI query topic entries are distinguished in the portal, and users enter specific topics for querying according to actual needs.

Notes

If iOS phones experience card sliding issues, it can be resolved by adding frontend plugins (requires iOS version 16.0.0 or above).

Frontend Plugin Addition Entry

Management Center > Open Platform > Plugin Management. For detailed operations, refer to Plugin Management.

Code Example

GD.on('gd-ready', () => {

// pageMobileLayout

GD.dispatch('style', { title: 'Black and White', content: 'html, body, body *{ overscroll-behavior: none; }' })

})

Solution 2: Application Integration in DingTalk Open Platform

Operation Steps

1. Log in to DingTalk Developer Backend, apply for "Developer Permissions", then in the "Application Development > Internal Enterprise Applications > DingTalk Applications" interface, find the ChatBI application that has completed integration with GuanYuan Data, click "..." > "Application Details" on the right, and enter the application details interface.

   

2. Find "Add Application Capability > Web Application", click "Add" below.
   

   

3. Fill in the "Application Homepage Address" and click "Save". Homepage address: {environment domain}/chatbi/address.
   

   
   
   If password-free login is needed, configure the password-free login link. Copy the password-free login link from the BI platform "Management Center > System Integration > Office OA > DingTalk" interface and concatenate the highlighted content.
   • Application Homepage Address Example: https://oapi.dingtalk.com/connect/oauth2/sns_authorize?appid=dingkyrvdtjmuozxwwaq&response_type=code&scope=snsapi_auth&state=app&redirect_uri=https%3A%2F%2Fapp.guandata.com%2F==m%2FchatBI%2F==%3Fprovider%3Ddingtalk%26domain%3Djpyy`
   • PC Homepage Address Example: https://oapi.dingtalk.com/connect/oauth2/sns_authorize?appid=dingkyrvdtjmuozxwwaq&response_type=code&scope=snsapi_auth&state=pc&redirect_uri=https%3A%2F%2Fapp.guandata.com%2F==chatBI%2F==%3Fprovider%3Ddingtalk%26domain%3Djpyy&ddtab=true
   

4. In the "Development Configuration > Permission Management" interface, enable "Member Information Read Permission: qyapi_get_member".
   

   

Implementation Effect

There is a ChatBI entry in the DingTalk workbench.

4. Appendix

How to Get Topic ID

Click "Nine-grid > chat frontend", in the query interface click the dropdown button to select the topic for querying, after selection click the full-screen button, the string of characters after chatBI/ in the link is the topic ID.