@petscreening/embedded-flow-sdk
v1.0.10
Published
A library for embedding PetScreening's flow into your application
Downloads
311
Readme
embedded-flow-sdk
This library was generated with Nx.
Building
Run nx build embedded-flow-sdk to build the library.
Installation
To install the @petscreening/embedded-flow-sdk package, run:
npm install @petscreening/embedded-flow-sdkor with Yarn:
yarn add @petscreening/embedded-flow-sdkEnvironment URLs
The SDK supports different environments with the following base URLs:
- Production:
https://embedded.petscreening.com - Release Candidate (RC):
https://embedded.rc.petscreening.com - QA:
https://embedded.qa.petscreening.com
You can specify the environment by setting the overrideUrl option accordingly:
ps.initEmbeddedFlow('#your-button-selector', {
overrideUrl: 'https://embedded.qa.petscreening.com', // For QA environment
queryParams: {
serviceProviderId: 5126,
userFirstName: 'John',
userLastName: 'Doe',
userEmail: '[email protected]',
userPhone: '1234567890',
userAddress: '1234 Main St',
userAddressContinued: 'Apt 2B',
userCity: 'North Carolina',
userState: 'NC',
userZip: '27617',
userMovingTime: 'not_moving',
},
callbacks: {
onEvent: (data) => {
console.log('Event received:', data);
},
petProfilesCompleted: () => {
console.log('Pet profiles completed:');
// Here you can trigger the API call to Parent
sendProfileCompletionToParent();
},
},
});Callbacks
The SDK supports several callbacks to handle different events:
petProfilesCompleted
This callback is triggered when all pet profiles have been successfully completed in the flow. It's particularly useful for integrating with parent applications or triggering follow-up actions.
ps.initEmbeddedFlow('#your-button-selector', {
callbacks: {
petProfilesCompleted: (data) => {
console.log('Pet profiles completed:', data);
// Here you can trigger follow-up actions like:
// - Updating your application state
// - Making API calls to your backend
// - Redirecting the user
sendProfileCompletionToParent();
},
onEvent: (data) => {
console.log('Event received:', data);
},
},
});Usage
Here is an example of how to use the @petscreening/embedded-flow-sdk in your React project:
import React, { useEffect } from 'react';
import { ps } from '@petscreening/embedded-flow-sdk';
const YourComponent = () => {
useEffect(() => {
ps.initEmbeddedFlow('#your-button-selector', {
queryParams: {
serviceProviderId: 5126,
userFirstName: 'John',
userLastName: 'Doe',
userEmail: '[email protected]',
userPhone: '1234567890',
userAddress: '1234 Main St',
userAddressContinued: 'Apt 2B',
userCity: 'North Carolina',
userState: 'NC',
userZip: '27617',
userMovingTime: 'not_moving',
},
callbacks: {
onEvent: (data) => {
console.log('Event received:', data);
},
petProfilesCompleted: () => {
console.log('Pet profiles completed:');
// Here you can trigger the API call to Parent
sendProfileCompletionToParent();
},
},
});
}, []);
const sendProfileCompletionToParent = async () => {
try {
const response = await fetch('https://your-parent-api-endpoint.com', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ profilesCompleted: true }),
});
if (!response.ok) {
throw new Error('Failed to send profile completion to Parent');
}
console.log('Profile completion sent to Parent successfully');
} catch (error) {
console.error('Error sending profile completion to Parent:', error);
}
};
return (
<div>
<button id="your-button-selector">Open Embedded Flow</button>
</div>
);
};
export default YourComponent;Using in HTML
You can also use the library directly in an HTML file. Here is an example:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Embedded Flow SDK Example</title>
<script src="https://cdn.qa.petscreening.com/index.cjs.js"></script>
</head>
<body>
<button id="open-embedded-flow">Open Embedded Flow</button>
<script>
document.addEventListener('DOMContentLoaded', function () {
const ps = window.ps;
ps.initEmbeddedFlow('#open-embedded-flow', {
queryParams: {
serviceProviderId: 5126,
userFirstName: 'John',
userLastName: 'Doe',
userEmail: '[email protected]',
userPhone: '1234567890',
userAddress: '1234 Main St',
userAddressContinued: 'Apt 2B',
userCity: 'North Carolina',
userState: 'NC',
userZip: '27617',
userMovingTime: 'not_moving',
},
callbacks: {
onEvent: (data) => {
console.log('Event received:', data);
},
close: () => {
document.body.style.overflowY = 'auto';
},
},
});
});
</script>
</body>
</html>API
initEmbeddedFlow(selector: string, options?: Options): void
Initializes the embedded flow by attaching a click event listener to the specified button.
selector: The CSS selector for the button.options: Optional configuration options.
openIframe(options?: Options): void
Opens the embedded iframe with the specified options.
options: Optional configuration options.
buildUrl(options?: Options): string
Builds the URL for the embedded iframe.
options: Optional configuration options.- Returns: The URL as a string.
setupMessageListener(options?: Options): void
Sets up a message listener for communication between the parent window and the iframe.
options: Optional configuration options.
closeIframe(): void
Closes the embedded iframe.
Options
The Options interface allows you to customize the behavior of the embedded flow.
interface Options {
overrideUrl?: string;
queryParams?: {
serviceProviderId?: number;
userFirstName?: string;
userLastName?: string;
userEmail?: string;
userPhone?: string;
userAddress?: string;
userAddressContinued?: string;
userCity?: string;
userState?: string;
userZip?: string;
userMovingTime?: string;
[key: string]: string | number | undefined;
};
callbacks?: {
onEvent?: (data: any) => void;
close?: () => void;
petProfilesCompleted?: (data: any) => void;
};
}overrideUrl: A custom URL to override the default URL.queryParams: A record of query parameters to include in the URL, including user information.callbacks: A record of callback functions to handle events and closing the iframe.