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.
Steps:
- 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.
const AIPRISE_BASE_API_URL = "";
const AIPRISE_BASE_ONBOARDING_URL = "";
const AIPRISE_TEMPLATE_ID = "";
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){
console.log(event.origin, event.data);
if (event.origin === AIPRISE_BASE_ONBOARDING_URL && event.data === "AiPriseVerification:Complete") {
aiPriseWindow?.close();
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 = window.open(
verificationURL,
"aiprise",
`toolbar=no, menubar=no, width=${width}, height=${height}, top=${top}, left=${left}`
);
}
Finally, on your Button add the following code snippet
const onClickButton = () => {
getVerificationURL()
.then((response) => openAiPriseWindow(response.data.verification_url))
.catch((error) => {console.log(error);})
};
Updated 4 months ago