> ## Documentation Index
> Fetch the complete documentation index at: https://developer.suki.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Control Visibility

> Learn how to control visibility of the Suki React Web SDK using the embedded close button.

This guide walks you through the process of controlling the visibility of the Suki React Web SDK using the embedded close button.

Control the visibility of the Suki React Web SDK using the embedded close button. Use this when you want to show or hide the SDK from your application.

## Code example for React Web SDK

The following examples demonstrate how to control the visibility of the SDK using the `showCloseButton` prop.

<Tabs>
  <Tab title="With 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.

    ```jsx React expandable theme={"theme":{"light":"github-dark","dark":"material-theme-darker"}}
    import { useEffect, useMemo, useState } from "react";
    import { SukiAuthManager } from "@suki-sdk/core";
    import { SukiAssistant, SukiProvider, useSuki } from "@suki-sdk/react";

    function ComponentWithCloseButton() {
    const authManager = useMemo(
    () =>
      new SukiAuthManager({
        partnerId: "f80c8db8-a4d0-4b75-8d63-56c82b5413f0", // Replace with your actual partnerId
        partnerToken:
          "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiYWRtaW4iOnRydWUsImlhdCI6MTUxNjIzOTAyMn0.KMUFsIDTnFmyG3nMiGM6H9FNFUROf3wh7SmqJp-QV30", // Replace with your actual partnerToken
        providerName: "John doe", // Replace with the full name of the provider
        providerOrgId: "1234", // Replace with the provider's organization ID
        environment: "production",
        loginOnInitialize: true,
        providerId: "1234567890", // Replace with the provider's ID
        providerName: "John doe", // Replace with the full name of the provider
        providerOrgId: "1234", // Replace with the provider's organization ID
        providerSpecialty: "FAMILY_MEDICINE", // Replace with the provider's specialty
      }),
    [],
    );

    const { init, isInitialized } = useSuki();
    const [isVisible, setIsVisible] = useState(true);

    useEffect(() => {
    if (!isInitialized) {
      init({ authManager });
    }
    }, [init, isInitialized, authManager]);

    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: { // [!code ++:14] New in v2.1.2
      values: [
        {
          codes: [
            {
              code: "I10",
              description: "Essential hypertension",
              type: "ICD10",
            },
          ],
          diagnosisNote: "Hypertension",
        },
      ],
    },
    visitType: "ESTABLISHED_PATIENT", // [!code ++:6] New in v2.2.0
    encounterType: "AMBULATORY",
    providerRole: "PRIMARY/ATTENDING",
    reasonForVisit: "Follow-up for hypertension",
    chiefComplaint: "Headache",
    };

    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);
      }}
    />
    );
    }
    ```
  </Tab>

  <Tab title="Without Close Button">
    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.

    ```jsx React theme={"theme":{"light":"github-dark","dark":"material-theme-darker"}}
    // 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
    />
    );
    }
    ```
  </Tab>
</Tabs>

## Next steps

<Icon icon="file-lines" iconType="solid" /> Read the [Dynamic encounter](/web-sdk/examples/dynamic-encounter) example to learn how to dynamically update the encounter data in the web SDK.