# Set up Integrated Onboarding
In this quickstart, you'll set up 360dialog's Integrated Onboarding to let your clients connect their WhatsApp Business API accounts. You'll:
* Explore the fastest way
* Configure your environment
* Implement the Connect Button
* Handle client redirects
* Process webhook notifications
* Generate API keys for messaging
By the end, you'll have a working implementation that allows clients to create WhatsApp Business accounts and grant you access to manage their channels.
### Choose your onboarding approach
Depending on your requirements, select one of the following implementation methods:
{% tabs %}
{% tab title="Direct Link" %}
**Uses the signup link to onboard new clients**
✅ No-code\
✅ Available immediately\
✅ Standard user experience
**Best for the quickest start**
{% endtab %}
{% tab title="Connect Button" %}
**Uses our pre-built Connect Button component**
✅ Low-code\
✅ Fast implementation\
✅ Standard user experience
**Best for most partners**
{% endtab %}
{% tab title="Self-hosted Embedded Signup" %}
**For Premium Partners**
✅ High-code solution\
✅ Fully customizable\
✅ You hosted the whole flow
**Best for the biggest partners**
{% endtab %}
{% endtabs %}
This quickstart focuses on the quick approach, so the Direct Link and Connect Button.
### Direct Link
Non-code solution. Share the link with the clients so they can start the onboarding immediately.
#### Implementation
* Set up a webhook URL to receive the notification when a number is onboarded
* Set up a redirect URL to redirect users to your platform after onboarding
* Customize the Branding
* Copy the link and share it with the clients
Your clients can open the link and create their account to onboard their numbers.
{% hint style="info" %}
Partner webhook URL and the redirect URL can be set up using our UI or API. How to use the API is covered in the [API reference section](https://docs.360dialog.com/partner/partner-api/api-reference#set-partner-webhook-url).
Both URLs must be publicly accessible and properly secured with HTTPS.
{% endhint %}
### Connect Button
Low-code solution. Use our pre-built button to seamlessly embed number onboarding into your platform.
#### Implementation
* Set up a webhook URL to receive the notification when a number is onboarded
* Set up a redirect URL to redirect users to your platform after onboarding
* Customize the Branding
* Add the 360dialog Connect button to your App
{% hint style="info" %}
Partner webhook URL and the redirect URL can be set up using our UI or API. How to use the API is covered in the [API reference section](https://docs.360dialog.com/partner/partner-api/api-reference#set-partner-webhook-url).
Both URLs must be publicly accessible and properly secured with HTTPS.
{% endhint %}
{% stepper %}
{% step %}
**Add the 360dialog Button to your App**
1. Install the package:
```bash
npm install 360dialog-connect-button
```
2. Implement the component:
```javascript
import { ConnectButton } from '360dialog-connect-button';
function OnboardingPage() {
return (
);
}
```
{% hint style="info" %}
For React applications, the component will handle the pop-up window and redirect for you automatically.
{% endhint %}
{% endstep %}
{% step %}
After completing onboarding, clients are redirected to your configured URL with query parameters:
1. Create a handler function:
```javascript
function handleRedirect() {
// Get URL parameters
const params = new URLSearchParams(window.location.search);
// Extract client ID
const clientId = params.get('client');
// Extract channel IDs (format: [channelId1,channelId2])
const channelsString = params.get('channels');
const channels = channelsString ?
channelsString.replace(/[\[\]]/g, '').split(',') :
[];
if (clientId && channels.length > 0) {
// Store the client and channel information
console.log(`Client ${clientId} granted permission to channels: ${channels}`);
// Continue with your application flow
// saveClientData(clientId, channels);
}
}
// Execute on page load
document.addEventListener('DOMContentLoaded', handleRedirect);
```
2. Close the pop-up window (if it hasn't closed automatically):
```javascript
// In your redirect handler
if (window.opener) {
window.opener.postMessage({
client: clientId,
channels: channels
}, '*');
window.close();
}
```
{% endstep %}
{% step %}
Your webhook endpoint will receive important status events:
```javascript
// Example Express.js webhook handler
app.post('/webhooks/360dialog', express.json(), (req, res) => {
const event = req.body;
switch (event.type) {
case 'channel_created':
console.log(`New channel created: ${event.payload.channel}`);
break;
case 'channel_status_changed':
if (event.payload.status === 'running') {
console.log(`Channel ${event.payload.channel} is now active!`);
}
break;
case 'phone_number_quality_changed':
console.log(`Channel ${event.payload.channel} messaging limit: ${event.payload.value}`);
break;
}
// Always respond with 200 to acknowledge receipt
res.status(200).send();
});
```
This handler processes the most important webhook events:
* `channel_created`: Sent when a new WhatsApp channel is created
* `channel_status_changed`: Sent when the channel status changes
* `phone_number_quality_changed`: Sent when the messaging limit changes
{% endstep %}
{% step %}
When a channel reaches `running` status, generate an API key to enable messaging:
```bash
curl -X POST https://hub.360dialog.io/api/v2/partners/channels/{channelId}/api-keys \
-H "Authorization: Bearer YOUR_PARTNER_TOKEN"
```
Store the returned API key securely — it cannot be retrieved later.
{% hint style="info" %}
For Direct Payment clients, they must grant permission before you can generate API keys.
{% endhint %}
{% endstep %}
{% endstepper %}
### Testing your implementation
You can test your implementation with the resources below:
#### Demo Tool
Generate code snippets and test different configurations
[Try the demo tool →](https://integrated-onboarding-demo.vercel.app/)
#### GitHub Repository
View complete implementation examples
[View code examples →](https://github.com/360dialog/integrated-onboarding-demo)
Before deploying to production:
1. Create a test button with your Partner ID
2. Track webhook events to see if your handler works
3. Confirm your redirect handling works correctly
4. Test API key generation with a test channel
### Troubleshooting common issues
{% tabs %}
{% tab title="Connect Button" %}
#### Connect Button Issues
* Button not displaying
```
Check your Partner ID and verify the package is correctly installed
```
* Popup blocked
```
Disable pop-up blockers in your browser during testing
```
* Styling conflicts
```
Verify your CSS isn't conflicting with the button styles
```
{% endtab %}
{% tab title="Redirects" %}
#### Redirect Issues
* Missing parameters
```
Ensure your event listener is properly implemented
window.addEventListener("message", (event) => { ... }, false);
```
* Popup not closing
```
Add window.close() after postMessage in the redirect handler
```
* Incorrect URL
```
Verify redirect URL in Partner Hub matches your application route
```
{% endtab %}
{% tab title="Webhooks" %}
#### Webhook Issues
* Missing events
```
Check your webhook URL configuration in Partner Hub
```
* Invalid signature
```
Implement proper signature validation
```
* 404 errors
```
Ensure your endpoint is publicly accessible
```
{% endtab %}
{% tab title="API Keys" %}
#### API Key Issues
* Permission denied
```
For Direct Payment: verify client has granted permission
```
* Authentication errors
```
Check your Partner token validity and expiration
```
* Status not ready
```
Wait for 'running' status before generating keys
```
{% endtab %}
{% endtabs %}
### Further reading
For more detailed information on the Integrated Onboarding process:
* [Integrated Onboarding Documentation](https://docs.360dialog.com/partner/integration/integrated-onboarding)
* [Webhook Events Reference](https://docs.360dialog.com/partner/integration/webhook-events-and-notifications)
* [Partner API Documentation](https://docs.360dialog.com/partner/integration/partner-api)
* [WhatsApp Business API Documentation](https://docs.360dialog.com/whatsapp-api)
