React component to trigger and consume the 360dialog Partner Integrated Onboarding process, as well as the 360dialog Permission Page.
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.
yarn add 360dialog-connect-button
`
With NPM
`
npm install 360dialog-connect-button
`
Getting started
Add the connect button to your app:
`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 (
);
};
`
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}) => 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, partner?: string, next?: string, hosting_type?: string, plan_selection?: string, lang?: 'de' \| 'en' \| 'pt', connect_client_user?: string, client_id?: string} | Optional query parameters that get passed to the sign up form for pre-filling | |
| env | string | BETA ONLY: Provide an environment to test in | |
Styling
The ConnectButton component is an unstyled component. You can use any styling method, e.g. CSS-in-JS libraries such as styled-components.
`jsx
import { ConnectButton } from '360dialog-connect-button';
const App = () => {
const StyledConnectButton = styled(ConnectButton)
;
return (
partnerId={'your-partner-id'}
callback={handleCallback}
/>
);
};
``