Displaying Fuse Connect in an iFrame

In order to make the Fuse UI component more customizable we added support for loading Fuse Connect in an iframe. This way users will not need to leave your app until they select an institution to link.

After generating a session, you can generate a URL using the client secret and load the Fuse Connect portal in an iframe in your app:

<iframe
    ref={iframeRef}
    src={`https://connect.letsfuse.com/intro?client_secret=${clientSecret}`}
    style={{
        position: "absolute",
        top: 0,
        left: 0,
        width: "100%",
        height: "100%",
        zIndex: 1000,
    }}
    allowFullScreen
/>

The iFrame fires these events using postMessage:

ON_SUCCESS: Fired when a user successfully connects their bank account.
ON_INSTITUTION_SELECTED: Fired when a user selects an institution to link.
ON_EXIT: Called when the user exits the API.

Here is example of how these events can be captured in a React app:

useEffect(() => {
    const iframeMessageHandler = (event: MessageEvent<any>) => {
      if (event.origin == "https://connect.letsfuse.com") {
        try {
          const data = JSON.parse(event.data);
          const eventName = data["event_name"];

          switch (eventName) {
            case "ON_SUCCESS":
              const publicToken = data["public_token"];

              // Replace with code to exchange public token
              break;
            case "ON_INSTITUTION_SELECTED":
              const institutionId = data["institution_id"];

              // Replace with code to get link token
              const linkToken = getLinkToken(institutionId);

              iframeRef.current.src = `https://connect.letsfuse.com/bank-link?link_token=${linkToken}`;
              break;
            case "ON_EXIT":
              // Handle exit events
              break;
          }
        } catch (e) {
          console.error(e);
        }
      }
    };
    window.addEventListener("message", iframeMessageHandler, false);

    return () => window.removeEventListener("message", iframeMessageHandler);
}, []);