Onboarding as a WhatsApp ASP

As an ASP, you can provide WhatsApp functionality to your customers through the WhatsApp channel of the Conversation API. Your customers will create accounts using an embedded signup process in your system's user interface. The information gathered from that user interface will be used on the back end of your system to make API calls to Sinch's services. These services will create subprojects for your customers, create WhatsApp Sender IDs for your customers, and create Conversation API apps that your customers will use to send and receive messages on the WhatsApp channel.

This document provides a general guide to onboard to Sinch's services as a WhatsApp ASP. Throughout the guide, we provide instructions for, summaries of, and references to several complex processes. Some of these processes must be completed using Meta's tools, and we reference Meta's documentation in several places throughout this guide and the linked articles. Although these processes are complex, they only need to be completed once in order to onboard as an ASP.

In order to onboard as a WhatsApp ASP at Sinch, you must:

1. Set up your Sinch account
2. Become a Tech Provider
3. Create a front-end user interface
4. Create a back end

Setting up your account

To set up your Sinch account as an ASP, you must:

1. Create your account
2. Locate your parent Project ID
3. Gain access to the Conversation API

Creating your account

In order to onboard as an ASP, you must first have a Sinch account. To create your free Sinch account:

1. Visit the Sinch Customer Dashboard signup page.
2. Populate the form with your information (including an email address and phone number) and desired account credentials.
3. Verify your email address (using a link sent to your inbox) and phone number (using the code sent to the phone number you provided in the previous step).
4. Complete any remaining steps in the signup wizard.

Locating your parent Project ID

As an ASP, the Project assigned to your account will serve as a "parent" project, and your customers will create subprojects that are contained within your parent project. In order to make the API calls required to create subprojects (a process that is described later in this guide), you will need your Project ID.

To view your Project ID:

1. Visit the Sinch Customer Dashboard.
2. Click the projects drop-down list. This is usually in the top left corner of the page.
3. Click View all projects. The Projects overview page is displayed

   

   Note:

   If you are having trouble accessing the Projects overview page, try logging into the dashboard and visiting this direct link.
4. Your project, and the corresponding Project ID, are displayed. You may use the copy button to copy the Project ID to the clipboard.

Gaining access to the Conversation API

To provide WhatsApp functionalities to your customers as an ASP, you must have access to the WhatsApp channel of the Conversation API. To begin gaining access to the Conversation API:

1. Visit the Sinch Customer Dashboard.
2. Select Conversation API from the left menu.
3. Click GET ACCESS on the Conversation API Overview page.
4. The Terms of Service are displayed. Click AGREE AND CONTINUE.

Becoming a Tech Provider

Sinch provides its WhatsApp services to ASPs by participating in a partner solution. Meta partner solutions allow the parties of the solution to share WhatsApp assets and services. These partnerships are between Tech Providers (or Tech Partners, which are upgraded Tech Providers) and Solution Partners.

Creating a front-end user interface

The front end of your system must collect several pieces of information. This information will be included in API calls made to Meta and Sinch's services.

Adding Meta's Embedded Signup flow

We provide a brief summary of the relevant steps below, but we encourage you to review the linked article in its entirety:

1. Load the Facebook JavaScript SDK.
   Copy

   Copied

   <script>
     window.fbAsyncInit = function () {
       // JavaScript SDK configuration and setup
       FB.init({
         appId:    'facebook-app-id', // Meta App ID
         cookie:   true, // enable cookies
         xfbml:    true, // parse social plugins on this page
         version:  'v20.0' //Graph API version
       });
     };
   </script>

2. Create Facebook Login for Business Configuration on the App Dashboard.
3. Set up Facebook Login, which allows you to place a button on your website or portal to initiate connection to Facebook. Make sure the following are included:
   • The response callback function
   • The config_id parameter
   • The extras object with the setup parameter for any prefilled form data.
   Copy

   Copied

   <script>
     window.fbAsyncInit = function () {
       // JavaScript SDK configuration and setup
       FB.init({
         appId:    'your-facebook-app-id', // Facebook App ID
         cookie:   true, // enable cookies
         xfbml:    true, // parse social plugins on this page
         version:  'v20.0' //Graph API version
       });
     };
   
     // Load the JavaScript SDK asynchronously
     (function (d, s, id) {
       var js, fjs = d.getElementsByTagName(s)[0];
       if (d.getElementById(id)) return;
       js = d.createElement(s); js.id = id;
       js.src = "https://connect.facebook.net/en_US/sdk.js";
       fjs.parentNode.insertBefore(js, fjs);
     }(document, 'script', 'facebook-jssdk'));
   
     // Facebook Login with JavaScript SDK
     function launchWhatsAppSignup() {
       // Conversion tracking code
       fbq && fbq('trackCustom', 'WhatsAppOnboardingStart', {appId: 'your-facebook-app-id', feature: 'whatsapp_embedded_signup'});
   
       // Launch Facebook login
       FB.login(function (response) {
         if (response.authResponse) {
           const code = response.authResponse.code;
           console.log('response: ', code); // remove after testing
         } else {
           console.log('User cancelled login or did not fully authorize.');
         }
       }, {
         config_id: '<CONFIG_ID>', // configuration ID goes here
         response_type: 'code',    // must be set to 'code' for System User access token
         override_default_response_type: true, // when true, any response types passed in the "response_type" will take precedence over the default types
         extras: {
           setup: {
             ... // Prefilled data can go here
           }
         }
       });
     }
   </script>

4. Implement Pre Filled Data and Pre-Verified Phone Numbers Support (optional but recommended).
5. Create a Login Button. This will launch the Embedded Signup flow by using the onClick function to call the launchWhatsAppSignup() function set up in step 3.
   Copy

   Copied

   <button onclick="launchWhatsAppSignup()" style="background-color: #1877f2; border: 0; border-radius: 4px; color: #fff; cursor: pointer; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-weight: bold; height: 40px; padding: 0 24px;">Login with Facebook</button>

6. Set up session logging to retrieve phone_number_id and waba_id from the Embedded Signup pop-up window. Those fields are essential when making the next request to the Sinch Provisioning API.
   Copy

   Copied

   // Session logging message event listener
   window.addEventListener('message', (event) => {
     if (event.origin !== "https://www.facebook.com" && event.origin !== "https://web.facebook.com") return;
     try {
       const data = JSON.parse(event.data);
       if (data.type === 'WA_EMBEDDED_SIGNUP') {
         console.log('message event: ', data); // remove after testing
         // your code goes here
       }
     } catch {
       console.log('message event: ', event.data); // remove after testing
       // your code goes here
     }
   });

When a business customer successfully completes or abandons the flow, a message event and object will be sent to the window that spawned the flow. This object will get assigned to the data constant.

The returned data object structure for successful flow completion will have the following format:

{
    "data": {
        "phone_number_id": "<CUSTOMER_BUSINESS_PHONE_NUMBER_ID>",
        "waba_id": "<CUSTOMER_WABA_ID>"
    },
    "type": "WA_EMBEDDED_SIGNUP",
        "event": "FINISH",
        "version": 3
}

Additional information to collect

In addition to the information described in the previous section, your system must also retrieve the following information in order to successfully create WhatsApp senders through calls made to Sinch's Provisioning API.

The following pieces of information must be collected by your front-end user interface:

Additional considerations

In addition to the required front-end components described above, you may also include tools that allow your users to create and preview WhatsApp templates. You may construct these components on your own, or you may reach out to your Sinch account manager and inquire about Sinch's Message Composer and Message Previewer functionality.

The Provisioning API reference material for creating a WhatsApp Template can be found here: Create a template in project

Creating a back end

Your front-end system will collect information from your customers. Your back-end system will use that information to make API calls to Sinch's services in order to:

1. Create new subprojects that represent each of your customers
2. Create new WhatsApp Senders for those customers/subprojects
3. Create a new Conversation API app to use with the newly created WhatsApp Senders

These API calls are described in more detail below:

Creating a new subproject

Each of your customers must have a subproject contained within your parent project. This can be accomplished through an API call to the subproject API.

Creating new WhatsApp Senders

Creating a new Conversation API app

Next steps

After you have successfully onboarded, you can review our Conversation API reference to familiarize yourself with how to send and receive messages, manage conversations, and more.