React Example (Self-Managed)

NOTE: You can now instead use AiPrise Web SDKs for quicker integration.

In case you prefer to open AiPrise onboarding screens in a separate window & have complete control over session management, here is the code snippet you can use in your web app to initiate & handle a verification request.


  • Add the following code in your repo.
  • Add openAiPriseWindow to the onClick method of your "Next" step in your onboarding flow.

Get Verification URL

Call getVerificationURL with the initial user blob.


export function getVerificationURL(user_data: any = {}) {
  const data = {
    redirect_uri: "popup",
    template_id: AIPRISE_TEMPLATE_ID,
    user_data: user_data
  // Assuming your react app uses axios for server requests.
  // You can replace this with however you handle server requests.
  return axiosInstance.request({
    url: `${AIPRISE_API_BASE_URL}/api/v1/verify/get_user_verification_url`,
    method: "POST",
    data: data,
    // NOTE: Do not expose the raw API_KEY here
    // AIPRISE_API_KEY should be stored in a env variable.
    headers: { "X-API-KEY": AIPRISE_API_KEY }

Popup Creation and Management

If you wish for AiPrise verification to open in a popup window - you only need to append the following code to the same file.

Additional Steps:

  • Set the "redirect_uri" as "popup" in getVerificationURL
  • AiPrise window will use window.postMessage() to inform the parent window when the user has completed the verification flow.
// Append to the file above

let aiPriseWindow: any = null;

function messageListener (event: any){
  if (event.origin === AIPRISE_BASE_ONBOARDING_URL && === "AiPriseVerification:Complete") {
    window.removeEventListener('message', messageListener);

export function openAiPriseWindow(
    verificationURL: string, 
    height: number = 650, 
    width: number = 400
  window.addEventListener('message', messageListener );
  const top = window!.top!.outerHeight / 2 + window!.top!.screenY - ( height / 2);
  const left = window!.top!.outerWidth / 2 + window!.top!.screenX - ( width / 2);
  aiPriseWindow =
    `toolbar=no, menubar=no, width=${width}, height=${height}, top=${top}, left=${left}`

Finally, on your Button add the following code snippet

const onClickButton = () => {
    .then((response) => openAiPriseWindow(
    .catch((error) => {console.log(error);})