Integrated Onboarding

This guide walks you through setting up 360dialog's Integrated Onboarding to connect your clients with WhatsApp Business API quickly and efficiently.

In this quickstart, you'll set up 360dialog's Integrated Onboarding to let your clients connect their WhatsApp Business API accounts. You'll:

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:

Uses our pre-built Connect Button component

✅ Fast implementation ✅ Minimal development work ✅ Standard user experience

Best for most partners

This quickstart focuses on the Basic Integrated Onboarding approach.

Implementation steps

Set up the required endpoints to handle client redirects and webhook notifications:

# Partner Hub Configuration Checklist
✓ Set redirect URL: https://your-domain.com/onboarding-callback
✓ Set webhook URL: https://your-domain.com/webhooks/360dialog

Both URLs must be publicly accessible and properly secured with HTTPS.

The redirect URL must exactly match the route where your Connect Button is implemented.

Add the 360dialog Connect Button to your application:

Install the package:

npm install 360dialog-connect-button

Implement the component:

import { ConnectButton } from '360dialog-connect-button';

function OnboardingPage() {
  return (
    <div>
      <h1>Connect your WhatsApp Business Account</h1>
      <ConnectButton
        partnerId="YOUR_PARTNER_ID"
        onSuccess={(data) => {
          console.log('Client ID:', data.client);
          console.log('Channel IDs:', data.channels);
        }}
      />
    </div>
  );
}

For React applications, the component will handle the popup window and redirect for you automatically.

After completing onboarding, clients are redirected to your configured URL with query parameters:

Create a handler function:

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

Close the popup window (if it hasn't closed automatically):

// In your redirect handler
if (window.opener) {
  window.opener.postMessage({ 
    client: clientId, 
    channels: channels 
  }, '*');
  window.close();
}

Your webhook endpoint will receive important status events:

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

When a channel reaches running status, generate an API key to enable messaging:

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.

For Direct Payment clients, they must grant permission before you can generate API keys.

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 →

GitHub Repository

View complete implementation examples

View code examples →

Before deploying to production:

Create a test button with your Partner ID
Track webhook events to see if your handler works
Confirm your redirect handling works correctly
Test API key generation with a test channel

Troubleshooting common issues

Connect Button Issues

Button not displaying

Check your Partner ID and verify the package is correctly installed

Popup blocked

Disable popup blockers in your browser during testing

Styling conflicts

Verify your CSS isn't conflicting with the button styles

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

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

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

import { ConnectButton } from '360dialog-connect-button'; function OnboardingPage() { return ( <div> <h1>Connect your WhatsApp Business Account</h1> <ConnectButton partnerId="YOUR_PARTNER_ID" onSuccess={(data) => { console.log('Client ID:', data.client); console.log('Channel IDs:', data.channels); }} /> </div> ); }

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

Integrated Onboarding

Choose your onboarding approach

Implementation steps

Testing your implementation

Demo Tool

GitHub Repository

Troubleshooting common issues

Connect Button Issues

Redirect Issues

Webhook Issues

API Key Issues

Further reading

Integrated Onboarding

Choose your onboarding approach

Implementation steps

Testing your implementation

Demo Tool

GitHub Repository

Troubleshooting common issues

Connect Button Issues

Redirect Issues

Webhook Issues

API Key Issues

Further reading