Set up 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:

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

Direct Link

Uses the signup link to onboard new clients

✅ No-code ✅ Available immediately ✅ Standard user experience

Best for the quickest start

Connect Button

Self-hosted Embedded Signup

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.

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.

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

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

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.

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

1

Add the 360dialog Button to your App

1. Install the package:

npm install 360dialog-connect-button

1. 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 pop-up window and redirect for you automatically.

2

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

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

1. Close the pop-up window (if it hasn't closed automatically):

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

3

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

4

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:

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

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

Redirects

Webhooks

API Keys

Further reading

For more detailed information on the Integrated Onboarding process:

• Integrated Onboarding Documentation

• Webhook Events Reference

• Partner API Documentation

• WhatsApp Business API Documentation