# 360dialog-connect-button 中文文档

规范地址：https://npmcn.com/package/360dialog-connect-button/

版本：1\.0\.2
npm 元数据更新时间：2026-08-03T15:04:52.277Z
中文译文更新时间：2026-11-05T19:07:14.772Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/360dialog-connect-button
原文对照：https://npmcn.com/package/360dialog-connect-button/?lang=original
项目主页：https://docs.360dialog.com/partner

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：121 kB，25 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- Node.js 要求：\>=10
- 运行依赖：0 个
- peer 依赖：react \>=16
- 首次发布：2022-01-27T15:42:47.798Z
- 最新版本发布：2026-08-03T15:04:52.096Z
- 近 30 天下载量：45470（2026-10-04 至 2026-11-02，npm 官方下载统计）
- 已发布版本数：20（近 12 个月 4 个）

## 中文简介

反应组件可以触发并消耗360dialog Partner Integrated Onboarding进程,以及360dialog许可页面.

## 安装

```sh
npm install 360dialog-connect-button
```

也可以使用：`pnpm add 360dialog-connect-button`、`yarn add 360dialog-connect-button`、`bun add 360dialog-connect-button`

## README

# 360dialog 合作伙伴集成登入

这个软件包提供了一个按钮组件,可以快速将360dialog Partner Integrated Onboarding进程整合到您的应用程序中. 它支持 **反应.js** 作为可导入组件,以及 **香草 JavaScript / plain HTML** 通过CDN托管的网络组件(`<dialog-connect-button>`),因此可以在任何网站上使用,而无需一步建设. 为了进一步了解这一进程以及如何作为360对话伙伴参与这一进程,请访问 [我们的文件](https://docs.360dialog.com/partner) 或者联系您的账户管理者。 如果您想成为360dialog 合伙人, 以便您的客户端使用 WhatsApp Business API, 请 [联系我们](https://www.360dialog.com/contact)。 。 。 .

  
  

# 先决条件

要访问 360dialog 伙伴集成登入进程, 您需要设置您的 `partner_redirect_url` 通过合伙人API。 这将在登入过程完成后用于重定向客户端. **重要内容:** 用来使用 `ConnectButton` 组件重定向 URL 需要匹配该路由,即包含按钮.

  
  

# 安装

## 用纱线

```
yarn add 360dialog-connect-button
```

## 与国家预防机制

```
npm install 360dialog-connect-button
```

  
  

# 开始

## 反应用法

在您的 React 应用程序中添加连接按钮 :

```jsx
import { ConnectButton } from '360dialog-connect-button';

const App = () => {
  const handleCallback = callbackObject => {
    /* The callback function returns the client ID as well as all channel IDs, for which you're enabled to fetch the API key via the Partner API */

    console.log('client ID: ' + callbackObject.client);
    console.log('channel IDs: ' + callbackObject.channels);
  };

  return (
    <div>
      <ConnectButton partnerId={'your-partner-id'} callback={handleCallback} />
    </div>
  );
};
```

## 香草 Java 脚本 / HTML 使用

您也可以使用打开的连接按钮 **任何网站** 没有反应或npm! 简单包含CDN的脚本并使用 `<dialog-connect-button>` HTML 元素.

### CDN 安装

```html
<!-- From unpkg -->
<script src="https://unpkg.com/360dialog-connect-button/dist/dialog-connect-button.umd.js"></script>

<!-- From jsdelivr -->
<script src="https://cdn.jsdelivr.net/npm/360dialog-connect-button/dist/dialog-connect-button.umd.js"></script>
```

### 基本示例

```html
<!DOCTYPE html>
<html>
  <head>
    <script src="https://unpkg.com/360dialog-connect-button/dist/dialog-connect-button.umd.js"></script>
  </head>
  <body>
    <dialog-connect-button
      partner-id="your-partner-id"
      label="Connect WhatsApp Business"
    >
    </dialog-connect-button>

    <script>
      document.addEventListener('dialog-connect-callback', event => {
        console.log('Client ID:', event.detail.client);
        console.log('Channels:', event.detail.channels);
      });
    </script>
  </body>
</html>
```

更详细的香草JavaScript使用示例和API文档,参见 [瓦努阿图-用户.md](https://npmcn.com/package/360dialog-connect-button/VANILLA-USAGE.md)。 。 。 .

  
  

# 属性

以下属性由按钮组件支持 :

| 属性名称 | 类型 | 说明 | 需求 |
| --- | --- | --- | --- |
| 伙伴编号 | 字符串 | 您的360dialog 伴侣身份 | ✅ |
| 回调 | `(callbackObject: {client: string, channels: string[], revokedChannels?: string[]}) => void` | 回调函数,接收返回的客户端ID以及频道ID | ✅ |
| 数量 | 字符串 | 请求访问特定电话号码的可选参数 |  |
| 标签 | 字符串 | 提供自定义按钮标签的可选参数 |  |
| 查询 | `{email?: string, name?: string, state?: string, redirect_url?: string, next?: string, plan_selection?: string, flow?: string, io_signature?: string, io_timestamp?: string, preverified_phone_number_id?: string}` | 将可选查询参数传递到预填表单 |  |
| 版本 | `'v1' | 'v2'` | 要连接到的Hub版本 - `v1` 使用cult.360dialog.com, (中文(简体) ), `v2` 使用app.360dialog.com(默认: `'v1'`(中文(简体) ) |  |
| 使用新方向 | 布尔 | 使用新的 CH IO 重定向 URL( 默认 ): `false`(中文(简体) ) |  |

  
  

# 样式

## 反应组件样式

这个 `ConnectButton` 反应组件为无样式 `<button />` 组件。 您可以使用任意的造型方法, 例如 CSS- in- JS 库, 如 `styled-components`。 。 。 .

```jsx
import { ConnectButton } from '360dialog-connect-button';

const App = () => {
  const StyledConnectButton = styled(ConnectButton)`
    outline: none;
    background: #ff4369;
    color: white;
    padding: 8px 16px;
    border-radius: 3px;
    margin-top: 32px;
    border: none;
  `;

  return (
    <div>
      <StyledConnectButton
        partnerId={'your-partner-id'}
        callback={handleCallback}
      />
    </div>
  );
};
```

## 香草 Java 脚本样式

这个 `<dialog-connect-button>` web组件可以使用CSS自定义属性(CSS变量)或针对该元素的常规CSS来进行样式.

### 使用 CSS 自定义属性( 建议)

```html
<style>
  dialog-connect-button {
    --dialog-connect-bg: #007bff;
    --dialog-connect-color: white;
    --dialog-connect-hover-bg: #0056b3;
    --dialog-connect-padding: 12px 24px;
    --dialog-connect-border-radius: 6px;
    --dialog-connect-font-size: 16px;
  }
</style>

<dialog-connect-button
  partner-id="your-partner-id"
  label="Connect WhatsApp Business"
>
</dialog-connect-button>
```

### 可用的 CSS 自定义属性

| 财产 | 说明 | 默认值 |
| --- | --- | --- |
| `--dialog-connect-bg` | 背景颜色 | `#007bff` |
| `--dialog-connect-color` | 文本颜色 | `white` |
| `--dialog-connect-border` | 边框样式 | `none` |
| `--dialog-connect-padding` | 按钮绑定 | `12px 24px` |
| `--dialog-connect-border-radius` | 边界半径 | `4px` |
| `--dialog-connect-font-size` | 字体大小 | `14px` |
| `--dialog-connect-font-family` | 字体家族 | 系统字体 |
| `--dialog-connect-transition` | CSS 过渡 | `all 0.2s ease` |
| `--dialog-connect-hover-bg` | 隐藏背景颜色 | 更暗的变体 |
| `--dialog-connect-hover-color` | 隐藏文本颜色 | 与基数相同 |
| `--dialog-connect-active-bg` | 活动背景颜色 | 更暗的变体 |
| `--dialog-connect-disabled-bg` | 已禁用的背景颜色 | `#ccc` |
| `--dialog-connect-disabled-color` | 禁用文本颜色 | `#666` |

### 使用常规CSS

```html
<style>
  .my-connect-button {
    --dialog-connect-bg: #28a745;
    --dialog-connect-hover-bg: #218838;
    --dialog-connect-padding: 14px 28px;
    --dialog-connect-font-size: 18px;
    --dialog-connect-border-radius: 8px;
  }
</style>

<dialog-connect-button
  class="my-connect-button"
  partner-id="your-partner-id"
  label="🚀 Get Started"
>
</dialog-connect-button>
```

## 常见问题

### 360dialog-connect-button 是什么？

反应组件可以触发并消耗360dialog Partner Integrated Onboarding进程,以及360dialog许可页面\.

### 如何安装 360dialog-connect-button？

在项目目录运行 npm install 360dialog-connect-button，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（\>=16）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### 360dialog-connect-button 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### 360dialog-connect-button 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### 360dialog-connect-button 需要什么版本的 Node\.js？

package\.json 的 engines 字段要求 Node\.js \>=10。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

### 360dialog-connect-button 可以商用吗？

360dialog-connect-button 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### 360dialog-connect-button 的下载量有多少？

根据 npm 官方下载统计，360dialog-connect-button 在 2026/10/04 – 2026/11/02 这 30 天内被下载 45,470 次，日均约 1,516 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### 360dialog-connect-button 还在维护吗？

最新版本 1\.0\.2 发布于 2026/08/03（3 个月前）；至今共发布 20 个版本，其中过去 12 个月发布了 4 个；首次发布于 2022/01/27。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。