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.
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.
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):
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
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:
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.
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:
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 ready.
// `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
};
let params = new URLSearchParams(queryString);
let channels = params.get("channels");
console.log(channels)
// [y9MiLoCH]
console.log(client)
// oaY9LLfUCL
function processParams() {
const params = window.location.search;
if (window.opener) {
window.opener.postMessage(params);
window.close();
}
}
window.onload = function() {
processParams();
}
