360dialog-connect-button 中文文档教程

Question

360dialog Partner Integrated Onboarding

该软件包提供了一个按钮组件，可快速将 360dialog 合作伙伴集成入职流程集成到您现有的 React.js 应用程序中。 要详细了解此过程以及如何作为 360dialog 合作伙伴参与此过程，请访问我们的文档或联系您的客户经理。 如果您想成为 360dialog 合作伙伴以使您的客户能够使用 WhatsApp Business API，请与我们联系。

Prerequisites

为了访问 360dialog 合作伙伴集成入职流程，您需要通过合作伙伴 API 设置您的 partner_redirect_url。 这将用于在入职过程完成后重定向客户端。 重要提示：要使用 ConnectButton 组件，重定向 URL 需要与集成了按钮的路由相匹配。

Installation

With yarn

yarn add 360dialog-connect-button

With NPM

npm install 360dialog-connect-button

Getting started

将连接按钮添加到您的应用程序：

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>
  );
};

Properties

按钮组件支持以下属性：

Property name	Type	Description	Required
partnerId	string	Your 360dialog Partner ID	✅
callback	(callbackObject: {client: string, channels: string}) => void	Callback function, that receives the returned client ID as well as channel IDs	✅
requestedNumber	string	Optional parameter to request acces for a specific phone number
label	string	Optional parameter to provide a custom button label
env	string	BETA ONLY: Provide a environment to test in

Styling

ConnectButton 组件是一个无样式的 组件。 您可以使用任何样式方法，例如 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>
  );
};