> ## Documentation Index
> Fetch the complete documentation index at: https://help.dingtalk.io/llms.txt
> Use this file to discover all available pages before exploring further.

# DingTalk JSAPI

> Learn how to call DingTalk JSAPI in YiDA pages, including native dialogs, device information, QR code scanning, and more — for a richer Client-side experience.

DingTalk offers a wide range of JSAPI capabilities, such as native dialogs, device information, and QR code scanning. YiDA developers can leverage these native APIs to deliver a better User experience.

* [DingTalk JSAPI Feature List](https://open.dingtalk.com/document/orgapp/jsapi-overview-client-org)
* For DingTalk developer fundamentals, see [Basic Concepts](/open/dingstart/basic-concepts-beta).

<Warning>
  Keep the following in mind when calling DingTalk JSAPI:

  * In YiDA apps, `window.dd` is not guaranteed to exist (currently, only the mobile client loads a legacy resource). Load it manually.
  * In YiDA apps, you can call APIs that require Authentication even without configuring `dd.config`. Use these APIs with caution.
  * Retrieve the `corpId` parameter required for JSAPI calls with `const { corpId } = window.pageConfig || {};`.
</Warning>

## Usage Guide

### Step 1: Asynchronously Load the DingTalk JSAPI Resource

Because `window.dd` is not guaranteed to exist in YiDA pages, load the DingTalk JSAPI script manually in the `didMount` lifecycle hook:

```js theme={"theme":{"light":"github-light","dark":"github-dark"}}
export function didMount() {
  this.utils.loadScript('https://g.alicdn.com/dingding/dingtalk-jsapi/3.0.25/dingtalk.open.js');
}
```

Once the resource is loaded, call JSAPI features via `window.dd`.

### Step 2: Call DingTalk JSAPI

After the DingTalk JSAPI is loaded, call DingTalk APIs via `window.dd` from the action panel:

```js theme={"theme":{"light":"github-light","dark":"github-dark"}}
export function isDingTalk() {
  return window.navigator && /dingtalk/i.test(window.navigator.userAgent)
}

export function dingAlert() {
  if (window.dd && this.isDingTalk()) {
    window.dd.device.notification.alert({
      message: "Test",
      title: "Tips", // can be empty
      buttonName: "Got it",
      onSuccess: function () {
      },
      onFail: function (err) { }
    });
  }
}
```

<Warning>
  Many DingTalk JSAPI methods must be called from within the app. Verify that the user is inside the DingTalk client before calling them:

  ```js theme={"theme":{"light":"github-light","dark":"github-dark"}}
  export function isDingTalk() {
    return window.navigator && /dingtalk/i.test(window.navigator.userAgent)
  }
  ```
</Warning>

## API List

For the full list of supported APIs, see the [DingTalk Open Platform Documentation](https://open.dingtalk.com/document/orgapp/jsapi-overview-client-org).