Custom Integrated Onboarding

The Custom Integrated Onboarding allows you to trigger the singup experience to clients on your own development requirements.

Requirements

Set Redirect URL

See instructions here.

Set Partner Hub Webhook URL and listen to Webhook Events

See instructions here.

If you are using Direct Payment

When using Direct Payment, your Integrated Onboarding experience will show a price detail and payment information page between the Account Creation and Embedded Signup steps.

You will also be required to get permission from the client to be able to generate an API key. The permission can given during the Integrated Onboarding flow or in the Client Hub.

Building the Integration

Step 1: Ensure requirements are met

See requirements here.

Step 2: Build your own custom flow on any development language you choose

If you choose to build your own custom flow instead of using the React.js button component provided in the Basic Integrated Onboarding, here are the general guidelines.

If you have multiple 360dialog Partner Hubs (one for Partner Payment and one for Direct Payment, for example), you can create different buttons for each Hub and show them to users accordingly.

Step 3: Call /permissions screen

See details here.

Example:

The code block below shows an example including explanations (your implementation may differ). You can initiate the Integrated Onboarding Flow with the function open360DialogPopup(window.location.origin)(remember that your implementation may differ):

// `processParams` function retrieves the current URL search parameters and posts them to the parent window.
// If there is an `opener` window, the function posts the parameters to it and closes the current window.
function processParams() {
  const params = window.location.search; // retrieve the current URL search parameters

  // Check if there is an opener window
  if (window.opener) {
    window.opener.postMessage(params); // post the parameters to the opener window
    window.close(); // close the current window
  }
}

// `window.onload` event is used to trigger the execution of the `processParams` function
// when the page has finished loading.
window.onload = function() {
  processParams();
};

// `open360DialogPopup` function opens a new window with the specified URL and options
// and adds a message event listener to the current window.
function open360DialogPopup(baseUrl) {
  window.removeEventListener("message", receiveMessage); // remove any existing message event listeners

  // Window options to be used in opening the new window
  const windowFeatures = "toolbar=no, menubar=no, width=600, height=900, top=100, left=100";
  const partnerId = "yourPartnerId";
  const redirectUrl = "yourRedirectUrl"; // additional redirect if needed - if you don't want to use your 
  // previously set partner redirect

  // Open the new window with the specified URL
  open(
    "https://hub.360dialog.com/dashboard/app/" + partnerId + "/permissions?redirect_url=" + redirectUrl,
    "integratedOnboardingWindow",
    windowFeatures
  );

  // Add a message event listener to the current window
  window.addEventListener("message", (event) => receiveMessage(event, baseUrl), false);
}

// `receiveMessage` function is the callback function that is executed when the message event is triggered.
// It retrieves the data from the event, sets it as the search parameters of the current URL,
// and returns if the origin of the event is not the same as the `baseUrl` or the type of `event.data` is an object.
const receiveMessage = (event, baseUrl) => {
  // Check if the event origin is not the same as `baseUrl` or `event.data` is an object.
  if (event.origin != baseUrl || typeof event.data === "object") {
    return;
  }
  const { data } = event; // retrieve the data from the event
  const redirectUrl = `${data}`; // create a redirect URL from the data
  window.location.search = redirectUrl; // set the redirect URL as the search parameters of the current URL
};

Step 4: Consuming redirect

After the client signed in or up and granted permission to one or multiple phone numbers, your redirect URL is being called with query parameters:

Parameter in query	Description
client=<client-id>	Client ID
channels=[<channel-id>,<channel-id>]	Array of channel IDs, that were being permitted during the last call to the permission page
revoked=[<channel-id>]	OPTIONAL In case the client removes permissions to one or multiple numbers during the most recent call to the permission page, the channel IDs of the newly revoked channels will be present in the query

See the full list of possible URL Parameters here.

Usually the newly opened popup window should close automatically if the Redirect URL matches the calling window’s URL. It will pass the query parameters to the calling window, where these can be retrieved by using the addEventListener() method together with the Window target:

window.addEventListener(
      "message",
      (event) => {
        const { data } = event;
        const queryString = `${data}`;        
        console.log(queryString);        
        // ?client=oaY9LLfUCL&channels=[y9MiLoCH]
      }, false
    );

To retrieve the parameters from the query string, e.g. ?client=oaY9LLfUCL&channels=[y9MiLoCH], the browser’s get() method of the URLSearchParams interface can be used.

let params = new URLSearchParams(queryString);
let channels = params.get("channels");
console.log(channels)
// [y9MiLoCH]
console.log(client)
// oaY9LLfUCL

If the newly opened popup window won't close after the redirect call (if redirect is the same as parent window URL), you can add a function that is executed on window.onload, ensuring that the parameters are processed only after the page has finished loading:

function processParams() {
  const params = window.location.search;
  if (window.opener) {
    window.opener.postMessage(params);
    window.close();
  }
}
window.onload = function() {
  processParams();
}

Step 5: Listen to Webhook Events to understand status of the Channel

If the number was successfully registered, you will receive a webhook event indicating a new Channel Created. See details here. This does not mean the Channel is fully live. Other webhook events will indicate the current status of the number.

You won't be able to generate an API key unless the channel status is running.

You can also see the number and details in your Partner Hub dashboard or use the Partner API to retrieve this information.

Step 6: Create API key to start messaging

If you have the permission to do so, you should generate an API Key and connect it to your integration to start messaging with this phone number.

See Partner Permissions for details.