> ## 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

> Follow these instructions to set up your web integration.

## Before you start

Before you set up your Web integration, you must enable `localStorage` within your WebView and keep it enabled. Set these parameters (or the equivalent parameters in your WebView provider):

* `domStorageEnabled` must be set to `true`.
* `incognito` must be set to `false`.

If your security policy limits outgoing traffic, ensure that your conditions allow for API calls by whitelisting all outgoing traffic from Link. These two content sources must be included at minimum:

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

## Setup

To set up a web integration, include the Argyle Link initialization HTML in your application's configuration.

You can copy-paste this initialization example into a `.html` file, then replace `YOUR_LINK_KEY` with your own Link key to run Link. Find your Link key in the [Link keys](https://console.argyle.com/link-key) section of Argyle Console.

#### Web initialization example:

```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.v3.js"></script>
    <script type="text/javascript">
        const argyle = Argyle.create({
        linkKey: 'YOUR_LINK_KEY',
        apiHost: 'https://api-sandbox.argyle.com/v1',
        // userToken: 'USER_TOKEN',
        // linkItems: ['lyft', 'uber'],
        onAccountCreated: ({ accountId, userId, linkItemId }) => {
          console.log('Account created: ', accountId, ' User ID:', userId, ' Link Item ID:', linkItemId)
        },
        onAccountConnected: ({ accountId, userId, linkItemId }) => {
          console.log('Account connected: ', accountId, ' User ID:', userId, ' Link Item ID:', linkItemId)
        },
        onAccountUpdated: ({ accountId, userId, linkItemId }) => {
          console.log('Account updated: ', accountId, ' User ID:', userId, ' Link Item ID:', linkItemId)
        },
        onAccountRemoved: ({ accountId, userId, linkItemId }) => {
          console.log('Account removed: ', accountId, ' User ID:', userId, ' Link Item ID:', linkItemId)
        },
        onUserCreated: ({ userId, userToken }) => {
          console.log('User created: ', userId, 'User token:', userToken)
        },
        onClose: () => {
          console.log('Link closed')
        },
        onTokenExpired: updateToken => {
          console.log('Token expired')
          // generate your new token here (more info: /developer-tools/api-reference#user-tokens)
          // updateToken(newToken)
        }
      })
      argyle.open()
    </script>
</body>

</html>
```

<Note>
  The `apiHost` in this initialization example is set to the Argyle Sandbox API (`https://api-sandbox.argyle.com/v1`). It's a good idea to test your implementation in [Sandbox mode](/legacy/guides/getting-started/sandbox-mode/overview) first, then change this to the Production API (`https://api.argyle.com/v1`) when you are ready to go live.
</Note>

### Closing Link programmatically

Normally, the user closes Link but you can also close it by calling the `close` method of the Link instance returned by `Argyle.create`.

## Configuration

Argyle Link provides multiple configuration options and callbacks that customize how this UI element functions in your application. The only argument that is mandatory when invoking Argyle Link is the `linkKey`, which you can find in the [Link keys](https://console.argyle.com/link-key) section of Argyle Console.

By default, anytime Argyle Link is initialized, it will be treated as a new session for a new user. To ensure your users retain their previous state in Argyle Link when it is re-initialized for them, your application must use the `userToken` parameter.

For a full list of Link configuration parameters, see the Link reference.

## User tokens

User tokens are temporary access keys that let you start Argyle Link for an existing user.

Tokens are short-lived. Generate a new token using the API every time you initialize Argyle Link for a returning user.

You can create user tokens using the [`/user-tokens`](/legacy/api-reference/users#create-token) endpoint.

<Note>
  Make sure that you request user tokens on your server-side and your `client_id` and `client_secret` are never exposed on the front-end.
</Note>

## Callbacks

Visit our Link Reference for the full list of available [callbacks](/legacy/api-reference/callbacks).

## Upgrade

Link for Web updates automatically with each release. You do not need to take any steps to upgrade your Web integration.
