Display the Connection Portal in an iFrame

In order to make it easier and faster to use the SnapTrade Connection Portal, we added support for loading the Connection Portal in an iframe. This allows apps to make the connection experience more coherent so that users don't need to leave their app until the OAuth linking step.

After generating a redirect link (https://docs.snaptrade.com/reference/post_snaptrade-login), use the following template to load the portal in an iframe inside your app:

Note: We suggest load the iframe in a modal. You can either use your own modal component or use the following libraries:

• React: https://reach.tech/dialog/
• Vue: https://www.npmjs.com/package/vue-js-modal

      <Modal>
        <button className="close-button" onClick={close}>
          <span aria-hidden>×</span>
        </button>
        <iframe
          id="snaptrade-connection-portal"
          src={loginLink}
          title="SnapTrade Connection Portal"
          allowFullScreen
        ></iframe>
      </Modal>

If your app uses React in its frontend, you can use our React SDK package to make it even easier to iframe the Connection Portal.

Here is a link to the SnapTrade React SDK: https://www.npmjs.com/package/snaptrade-react