360dialog 合作伙伴集成登入

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

先决条件

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

安装

用纱线

yarn add 360dialog-connect-button

与国家预防机制

npm install 360dialog-connect-button

开始

反应用法

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

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 安装

<!-- 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>

基本示例

<!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。 。 。 .

属性

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

样式

反应组件样式

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

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 自定义属性( 建议)

<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 自定义属性

使用常规CSS

<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>