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 .

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.

They are JWT tokens that contain an expiry date you can use to determine if you need to create a new user token. Newly issued tokens expire in 30 days. You can always decode the token to find out the exact expiration date (check exp field).

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.


Did this page help you?