LogoLogo
Become a PartnerStatus Page
  • get started
    • Welcome to 360Dialog
    • Quickstarts
      • Getting started as a partner
      • Register as a Meta Tech Provider
      • Add a WhatsApp Number
      • Set up Integrated Onboarding
      • Create a Message Template
      • Send a Message
    • Pricing & Billing
      • Payment Methods for BR: Pix & Boleto
      • Month Closing Invoice (MCI)
    • Get API Access
    • Tech Provider Program
      • Understanding the Meta Tech Provider Program
      • Becoming a Meta Tech Provider: A Step-by-Step Guide
  • MM Lite Beta Program
    • Onboarding
    • Sending Messages
    • Expected Errors & Programming Languages
  • Partner & Account Management
    • Solutions for Partners
      • Benefits for Partners
      • Partner Hub
      • WABA Management
    • Account Setup & Management
      • Prerequisites and best practices for account creation
      • Account Structure
      • Account Creation
  • Integrations & API Development
    • Webhook Events & Setup
      • Webhook Events (Partner & Messaging API)
      • Webhook Configuration & Management
    • Integration Best Practices
      • Architecture and Security
      • Best Practices for Designing Integrations
        • Design a Stable Webhook Receiving Endpoint
      • Sizing Your Environment Based on Expected Throughput
      • Design a Resilient Message Sending Service
      • Integrated Onboarding
        • Basic Integrated Onboarding
        • Custom Integrated Onboarding
        • Host Your Own Embedded Signup
      • API Key Authentication for the Partner API
  • API Reference
    • Messaging API
    • Messaging Health Status
    • Sandbox (Test API Key)
    • Differences Between Cloud API and On-Premise API for Partners
      • [will be deprecated] Messaging with On-Premise API
    • Partner API
  • WABA Management
    • Managing WABA Accounts
      • Using the Partner Hub to manage Clients and Channels
      • Using the Partner API to manage Clients and Channels
      • Partner Permission to Generate API Key
      • Checking Usage & Statistics
    • Phone Number & Hosting
      • Migrating a Phone Number
        • Migrate number from Meta or alternate BSP to 360Dialog
        • Migrate a phone number to a new WABA
        • Migrate a phone number to a new WABA to change messaging Currency
      • WhatsApp Coexistence
        • Coexistence Onboarding
        • Coexistence Webhooks
      • Hosting type Change (On-premise API to Cloud API)
    • WABA Profile & Compliance
      • Display Name Guidelines
      • WABA Profile Info
      • WABA Policy Enforcement
      • Business Account Verification
    • Partner change (between 360Dialog Partners)
    • WhatsApp Flows
    • Accelerated Onboarding
    • Business Account Verification
  • Messaging
    • Sending & Receiving Messages
      • Conversations
      • Receiving messages
      • Before sending a message
    • Message Types
      • Conversational Components
      • Checklist for Message Broadcasts and Campaigns
      • Text messages
      • Interactive messages
        • Single and Multi Product Messages
        • Location Request Messages
        • Address Messages (India and Singapore only)
      • Contacts & Location Messages
    • Template Messages
      • Template Library
      • Template Elements
      • Sending Template Messages
      • Authentication Templates
        • Zero-Tap Authentication Templates
        • One-Tap Autofill Authentication Templates
        • Copy Code Authentication Templates
      • Catalog Templates
      • Product Card Carousel Templates
      • Single-Product Message Templates
      • Coupon Code Templates
      • Limited-Time Offer Templates
      • Multi-Product Templates
    • Media Messages
      • Upload, retrieve or delete media
    • Messaging Health & Troubleshooting
      • Messaging Limits & Quality Rating
      • Errors While Messaging
      • Messages statuses
  • Commerce & Payments
    • Payments (India Only)
      • Receive WhatsApp Payments via Payments Gateway
      • Receive WhatsApp Payments via Payment Links
      • Order Details Template Message
    • Payments (Singapore Only)
      • Receive WhatsApp Payments via Stripe
    • Products and Catalogs
      • India Businesses: Compliance for Commerce
  • Support & Updates
    • Help & Troubleshooting
      • FAQ
      • Error Code Reference
      • User Support Documentation
        • Tutorials
          • Page How to Troubleshoot Login Issues in the 360dialog Hub
          • How to Report an Issue
          • How to Contact Support
        • How-To Guides
          • Raise a support request
          • Requesting a Status Update for Business Verification
        • Reference
          • Troubleshooting Embedded Signup Issues
          • Commerce Policy Checks for WhatsApp API Access
          • Support Availability & SLAs
          • Incident Issue Prioritization
          • Case Types Table
        • Explanation
          • Why Business Verification Takes Time
          • Why Some Issues Are Not Emergencies
          • Understanding the Support Process
      • Support with Meta
    • Imprint & Data Privacy
    • Product Updates & News
      • How to ensure your Template Messages will be received
      • Integrated Onboarding new look and Campaigns Best Practices
Powered by GitBook
On this page
  • Choose your onboarding approach
  • Implementation steps
  • Testing your implementation
  • Troubleshooting common issues
  • Further reading

Was this helpful?

  1. get started
  2. Quickstarts

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:

  • 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

Build your own trigger in any language

✅ Complete control over UI/UX ✅ Works with any tech stack ✅ More integration flexibility

For teams that need customization

For Premium Partners only

✅ Faster verification (48 hours) ✅ Higher initial message limits (1000) ✅ Display name verification

For trusted business clients

This quickstart focuses on the Basic Integrated Onboarding approach.

Implementation steps

1

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.

2

Add the 360dialog Connect Button to your application:

  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 popup window and redirect for you automatically.

3

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 popup window (if it hasn't closed automatically):

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

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

5

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

GitHub Repository

View complete implementation 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 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

Further reading

For more detailed information on the Integrated Onboarding process:

PreviousAdd a WhatsApp NumberNextCreate a Message Template

Last updated 2 months ago

Was this helpful?

Try the demo tool →
View code examples →
Integrated Onboarding Documentation
Webhook Events Reference
Partner API Documentation
WhatsApp Business API Documentation