0.9.0

npm

360dialog-connect-button

React component to trigger and consume the 360dialog Partner Integrated Onboarding process, as well as the 360dialog Permission Page.

Published24 Nov 2023

Direct dependencies10

Transitive dependenciesNot calculated

README

Current package documentation

360dialog Partner Integrated Onboarding

This package provides a button component to quickly integrate the 360dialog Partner Integrated Onboarding process into your application. It supports React.js as an importable component and Vanilla JavaScript / plain HTML via a CDN-hosted web component (<dialog-connect-button>), so you can use it on any website without a build step. To learn more about this process and how to participate in this as a 360dialog Partner, please visit our documentation or contact your account manager. If you want to become a 360dialog Partner in order to enable your clients to use the WhatsApp Business API, please get in touch with us.

Prerequisites

In order to access the 360dialog Partner Integrated Onboarding process you need to set your partner_redirect_url via the Partner API. This will be used to redirect the client after the onboarding process is finished. Important: To use the ConnectButton component the redirect URL needs to match the route, that has the button integrated.

Installation

With yarn

yarn add 360dialog-connect-button

With NPM

npm install 360dialog-connect-button

Getting started

React Usage

Add the connect button to your React app:

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

Vanilla JavaScript / HTML Usage

You can also use the connect button on any website without React or npm! Simply include the script from a CDN and use the <dialog-connect-button> HTML element.

CDN Installation

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

Basic Example

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

For more detailed vanilla JavaScript usage examples and API documentation, see VANILLA-USAGE.md.

Properties

Following properties are supported by the button component:

Property name	Type	Description	Required
partnerId	string	Your 360dialog Partner ID	✅
callback	`(callbackObject: {client: string, channels: string[], revokedChannels?: string[]}) => void`	Callback function, that receives the returned client ID as well as channel IDs	✅
requestedNumber	string	Optional parameter to request access for a specific phone number
label	string	Optional parameter to provide a custom button label
queryParameters	`{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}`	Optional query parameters that get passed to the sign up form for pre-filling
version	`'v1' \| 'v2'`	Hub version to connect to — `v1` uses hub.360dialog.com, `v2` uses app.360dialog.com (default: `'v1'`)
useNewRedirect	boolean	Use the new CH IO redirect URL (default: `false`)

Styling

React Component Styling

The ConnectButton React component is an unstyled <button /> component. You can use any styling method, e.g. CSS-in-JS libraries such as 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>
  );
};

Vanilla JavaScript Styling

The <dialog-connect-button> web component can be styled using CSS custom properties (CSS variables) or regular CSS targeting the element.

Using CSS Custom Properties (Recommended)

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

Available CSS Custom Properties

Property	Description	Default Value
`--dialog-connect-bg`	Background color	`#007bff`
`--dialog-connect-color`	Text color	`white`
`--dialog-connect-border`	Border style	`none`
`--dialog-connect-padding`	Button padding	`12px 24px`
`--dialog-connect-border-radius`	Border radius	`4px`
`--dialog-connect-font-size`	Font size	`14px`
`--dialog-connect-font-family`	Font family	System fonts
`--dialog-connect-transition`	CSS transition	`all 0.2s ease`
`--dialog-connect-hover-bg`	Hover background color	Darker variant
`--dialog-connect-hover-color`	Hover text color	Same as base
`--dialog-connect-active-bg`	Active background color	Darker variant
`--dialog-connect-disabled-bg`	Disabled background color	`#ccc`
`--dialog-connect-disabled-color`	Disabled text color	`#666`

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

Downloads & popularity

Awaiting observations

No metric observations yet

Download counts and popularity will appear here as the collector receives them.

Declared dependencies 11

Native requirements

10 direct targetsNot calculated transitive count

Package / target	Requirement	Relationship
tsdx Environment { "local_name": "tsdx", "alias": false, "peer_metadata": null }	`^0.14.1`	development
husky Environment { "local_name": "husky", "alias": false, "peer_metadata": null }	`^7.0.4`	development
react Environment { "local_name": "react", "alias": false, "peer_metadata": null }	`^17.0.2`	development
tslib Environment { "local_name": "tslib", "alias": false, "peer_metadata": null }	`^2.4.1`	development
react-dom Environment { "local_name": "react-dom", "alias": false, "peer_metadata": null }	`^17.0.2`	development
size-limit Environment { "local_name": "size-limit", "alias": false, "peer_metadata": null }	`^7.0.5`	development
typescript Environment { "local_name": "typescript", "alias": false, "peer_metadata": null }	`^4.5.5`	development
@types/react Environment { "local_name": "@types/react", "alias": false, "peer_metadata": null }	`^17.0.38`	development
@types/react-dom Environment { "local_name": "@types/react-dom", "alias": false, "peer_metadata": null }	`^17.0.11`	development
@size-limit/preset-small-lib Environment { "local_name": "@size-limit/preset-small-lib", "alias": false, "peer_metadata": null }	`^7.0.5`	development
react Environment { "local_name": "react", "alias": false, "peer_metadata": null }	`>=16`	peer

Distribution files

1 collected

Distribution 1

Source distribution

Source file

Checksums from source

{
  "shasum": "5dd94cbccb5e8c130d5c8fc8c8076f1eabe5edba",
  "tarball": "https://registry.npmjs.org/360dialog-connect-button/-/360dialog-connect-button-0.9.0.tgz",
  "fileCount": 16,
  "integrity": "sha512-tfGblTWjCiPh6OphHRzSQwxYWeF8oQ2uNSZvtPEiqQ9tiluc/H+Yqyu3fTePiTb9NthY+Z/09UylRhewIDnaZg==",
  "signatures": [
    {
      "sig": "MEQCICHpdvQxPXM9J9em/97g4B9M3wIqtxHnUZtYY9Hbhf/HAiA/5rVETUPX4xSETgTE2wpwunxRvIIKf7UhepXWB4cFNg==",
      "keyid": "SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"
    }
  ],
  "unpackedSize": 58402
}

Metadata history

Meaningful changes

Current collected state Current

Observed since 20 Oct, 19:27 UTC

No superseded metadata states collected. Unchanged observations do not create new revisions.

Record identity

package_version:c8d5155e21a2ffa29bc1ba652ca0265a21a704ab87ebc522397e584a67f464f3

Other collected versions

1.0.23 Aug 1.0.123 Jun 1.0.022 Jun 0.9.27 Apr 0.9.12 Jan 0.8.22 Oct View all collected versions →