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

# Web SDK

> Embed Argyle Link in a browser with the Web SDK.

Use the Web SDK when Link should run inside your browser application. The Web SDK supports callbacks and frontend control over when Link opens and closes.

<Note>
  If you need iframe isolation, use the Web SDK with `connectUrl` instead of loading Hosted Link inside an iframe. Hosted Link is intended to be launched directly.
</Note>

<Note>
  User tokens and session links both expire after one hour. Create a fresh user token before initializing Link with `userToken`, or create a new session link for an active verification before initializing Link with `connectUrl`.
</Note>

## Before you start

1. When using a webview component, make sure `localStorage` is enabled, `domStorageEnabled` is set to `true`, and `incognito` is set to `false`.
2. If your security policy limits outgoing traffic, allow Link API calls by whitelisting outgoing traffic from Link with these content sources at minimum:

```html theme={}
<meta http-equiv="Content-Security-Policy" content="connect-src https://*.argyle.com; worker-src 'self' blob:" />
```

## Initialize with userToken

Use this path for direct embedded Link implementations that use user tokens.

Create a user token on your server:

* **New users**: create the user via [`POST /v2/users`](/api-reference/users/create-a-user) and use the returned `user_token`.
* **Returning users**: create a new token via [`POST /v2/user-tokens`](/api-reference/user-tokens/create-a-user-token) and use the returned `user_token`.

Initialize Link with the Web SDK:

```html theme={}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <!-- This is needed in order to apply proper scaling on mobile devices -->
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  </head>

  <body>
    <script src="https://plugin.argyle.com/argyle.web.v5.js"></script>
    <script type="text/javascript">
      const linkInstance = Argyle.create({
        userToken: 'USER_TOKEN',
        sandbox: true, // Set to false for production environment.
        // (Optional) Add a Link flow customization created in Console:
        //    flowId: '<ID of the Link flow>',
        // (Optional) Limit Link search to specific Items:
        //    items: ['item_000000001', 'item_000000002'],
        // (Optional) Connect directly to an existing account:
        //    accountId: '<ID of the account>',
        // (Optional) Set a language. Options: EN, ES, RU, ZH
        //    language: 'EN',
        // (Optional) A few recommended callbacks:
        onAccountConnected: payload => console.log('onAccountConnected', payload),
        onAccountError: payload => console.log('onAccountError', payload),
        onTokenExpired: updateToken => {
          console.log('onTokenExpired')
          // Generate a new user token.
          // updateToken(newToken)
        }
      })

      linkInstance.open()
      // linkInstance.close() // Manually close Link (typically the user closes Link).
    </script>
  </body>
</html>
```

## Initialize with connectUrl

Use this path when your backend creates a payroll verification session.

1. Create a session via [`POST /v2/sessions`](/api-reference/verifications/create-a-session).
2. Copy the response `link`.
3. Pass that value as `connectUrl` in your Web SDK initialization.

For banking verification sessions, pass the returned session `link` to the banking SDK as `connectURL`.

The session URL already determines whether Link runs in Sandbox or Production. Do not pass `sandbox` with `connectUrl`.

```html theme={}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <!-- This is needed in order to apply proper scaling on mobile devices -->
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  </head>

  <body>
    <script src="https://plugin.argyle.com/argyle.web.v5.js"></script>
    <script type="text/javascript">
      const linkInstance = Argyle.create({
        connectUrl: 'SESSION_LINK',
        // (Optional) A few recommended callbacks:
        onAccountConnected: payload => console.log('onAccountConnected', payload),
        onAccountError: payload => console.log('onAccountError', payload)
      })

      linkInstance.open()
      // linkInstance.close() // Manually close Link (typically the user closes Link).
    </script>
  </body>
</html>
```

## Track Link activity

Embedded Web Link supports [callbacks](/link/reference/callbacks), including `onAccountConnected`, `onAccountError`, `onClose`, and `onTokenExpired`.

For verification workflows, also subscribe to [`verifications.updated`](/api-reference/verifications-webhooks/updated) webhooks so your backend can track the verification lifecycle.
