Overview
You can control the visibility of the Suki web SDK using the embedded close button. This is useful when you want to control the visibility of the SDK from your application.Code Example
The following examples show how to control the visibility of the SDK using theshowCloseButton prop.
- With Close Button
- Without Close Button
This example shows how to control the visibility of the web SDK using the
showCloseButton prop. When the showCloseButton is set to true, the close button is visible and the onClose prop is available.React
Copy
Ask AI
import { SukiAssistant, SukiProvider, useSuki } from "@suki-sdk/react";
function ComponentWithCloseButton() {
const { init } = useSuki();
const [isVisible, setIsVisible] = useState(true);
useEffect(() => {
init({
partnerId: "f80c8db8-a4d0-4b75-8d63-56c82b5413f0", // Replace with your actual partner ID
partnerToken:
"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiYWRtaW4iOnRydWUsImlhdCI6MTUxNjIzOTAyMn0.KMUFsIDTnFmyG3nMiGM6H9FNFUROf3wh7SmqJp-QV30", // Replace with your actual partner token
providerName: "John doe", // Replace with the full name of the provider
providerOrgId: "1234", // Replace with the provider's organization ID
});
}, [init]);
const encounter = {
identifier: "encounter-789",
patient: {
identifier: "patient-101",
name: {
use: "usual",
family: "Johnson",
given: ["Sarah", "Marie"],
suffix: ["MD"],
},
birthDate: "1985-03-20",
gender: "female",
},
};
const uiOptions = { showCloseButton: true };
const ambientOptions = {
sections: [
{
loinc: "51847-2", // Assessment and Plan
isPBNSection: true,
},
{
loinc: "10164-2", // History of Present Illness
},
{
loinc: "10187-3", // Review of Systems
},
],
diagnoses: { // New in v2.1.2
values: [
{
codes: [
{
code: "I10",
description: "Essential hypertension",
type: "ICD-10",
},
],
diagnosis_note: "Hypertension",
},
],
},
};
const handleClose = () => {
setIsVisible(false);
console.log("SDK closed by user");
};
if (!isVisible) {
return <div>SDK has been closed</div>;
}
return (
<SukiAssistant
encounter={encounter}
uiOptions={uiOptions}
ambientOptions={ambientOptions}
onClose={handleClose}
onNoteSubmit={(data) => {
console.log(data);
}}
/>
);
}
This example shows how to control the visibility of the web SDK using the
onClose prop. When the showCloseButton is set to false, the onClose prop is not available.React
Copy
Ask AI
// When showCloseButton is false, onClose is not available
function ComponentWithoutCloseButton() {
const uiOptions = {
showCloseButton: false,
};
return (
<SukiAssistant
encounter={encounter}
uiOptions={uiOptions}
onNoteSubmit={(data) => {
console.log(data);
}}
// onClose={handleClose} // TypeScript error: Property 'onClose' does not exist
// rest of the props
/>
);
}