> ## Documentation Index
> Fetch the complete documentation index at: https://integrations.docs.commenda.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Embedded SDK

RootFi supports white labelling the onboarding process through the Connect SDK. Your end users can create connections to their platforms without using the RootFi dashboard to generate [Invite Links](/documentation/concepts/rootfi-connect/invite-link). We currently offer a Javascript SDK but you can request other frameworks by contacting us.

### Developer Reference

1. Create an invite link by calling the [Create Invite Link API](/api-reference/v3/core/invite-links/create-invite-link).
   1. If `company_name` is not passed, company wont be created and so, your user will have to enter it in the SDK.
   2. To enable only certain integrations, you can pass a list of `integrations`. If only one integration is passed, user will be redirected to the platform login url directly.
2. The response will contain the `invite_link`, which will need to be sent to the SDK during initialisation, and the `company_id`, which you should store to uniquely identify this customer.

### Setup SDK

1. Import the source script in the head tag.

   Default: `<script src="https://sdk.rootfi.dev/sdk.js"></script>`

   KSA region: `<script src="https://sdk.rootfi.dev/sdk.sa.js"></script>`

2. Load the RootFi SDK on page load by calling `RootfiLink.initialize()`.

```javascript JavaScript theme={null}
RootfiLink.initialize({
  linkToken: "", // invite_link returned from the Create Invite Link API
  onSuccess: () => {
    // Will be called, once connection is successful
  },
  onReady: () => {
    // Will be called once the src script is loaded
  },
  onExit: () => {
    // Will be called when user clicks close button on SDK.
  },
});
```

1. Call `RootfiLink.openLink();` to open the SDK. Make sure you call this function onReady is called back on initialisation.
2. Call `RootfiLink.closeLink();` to close the SDK. You can use this method to close the SDK in **onSuccess** and **onExit** Callback;

<Warning>
  The SDK will not close until you call `RootfiLink.closeLink();`
</Warning>

Below is a HTML snippet of integrating the SDK and a ReactJS implementation using our react SDK component.

<CodeGroup>
  ```html HTML theme={null}
  <html>
    <head>
      <script src="https://sdk.rootfi.dev/sdk.js" type="text/javascript"></script>
      <script>
        const RootfiLink = window.RootfiLink;
        function loadRootFi() {
          RootfiLink.initialize({
            linkToken: "1234567", // invite_link_id returned from Create Invite Link API
            onSuccess: () => {
              // connection succeeded
              RootfiLink.closeLink(); // Close the SDK
              alert("Connection Success");
              // Make an api call to save success status to your db
            },
            onReady: () => {
              // Open SDK when ready. You can open on a button Click.
              RootfiLink.openLink();
            },
            onExit: () => {
              // Close SDK when user clicks closed.
              RootfiLink.closeLink();
              // Or you can show a alert msg instead of closing iframe
              alert("Please complete the setup");
            },
          });
        }
      </script>
    </head>
    <body>
      <p><button onclick="loadRootFi()">Open RootFi SDK</button></p>
    </body>
  </html>
  ```

  ```javascript React theme={null}
  import { useEffect, useState } from "react";
  import { useRootfiLink } from "rootfi-react-sdk";

  const ConnectSDK = () => {
    const [inviteLinkId, setInviteLinkId] = useState("");
    const { isReady, closeLink, openLink } = useRootfiLink({
      environment: "global", // "global" or "saudi"
      inviteLinkId: inviteLinkId,
      onSuccess: (data) => {
        // connection succeeded
        // Make an api call to save success status to your db
        setTimeout(() => closeLink(), 2000);
      },
      onExit: () => {
        closeLink();
      },
    });

    useEffect(() => {
      // Call Create Invite Link API to get a new invite link and set it to the state
      // setInviteLinkId("INVITE_LINK_ID");
    }, []);

    if (!isReady) return <>{"Initialising SDK"}</>;

    return (
      <div>
        <button onClick={() => openLink()}>Open RootFi SDK</button>
      </div>
    );
  };
  export default ConnectSDK;
  ```
</CodeGroup>
