Web

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:

<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 an html file, then replace YOUR_LINK_KEY with your own linkKey to run Link. Find your Link key in the API keys section of the Argyle Console.

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

📘
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 first, then change this to the Production API (<https://api.argyle.com/v1>) when you are ready to go live.

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 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 endpoint.
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.

Callbacks

For a full list of callbacks, see the Link reference.

Upgrade

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