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):
domStorageEnabledmust be set totrue.incognitomust be set tofalse.
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:
1<meta http-equiv="Content-Security-Policy" 2 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 section of Argyle Console.
Web initialization example:
1<!DOCTYPE html>
2<html>
3
4<head>
5 <meta charset="utf-8" />
6 <!-- This is needed in order to apply proper scaling on mobile devices -->
7 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
8</head>
9
10<body>
11 <script src="https://plugin.argyle.com/argyle.web.v3.js"></script>
12 <script type="text/javascript">
13 const argyle = Argyle.create({
14 linkKey: 'YOUR_LINK_KEY',
15 apiHost: 'https://api-sandbox.argyle.com/v1',
16 // userToken: 'USER_TOKEN',
17 // linkItems: ['lyft', 'uber'],
18 onAccountCreated: ({ accountId, userId, linkItemId }) => {
19 console.log('Account created: ', accountId, ' User ID:', userId, ' Link Item ID:', linkItemId)
20 },
21 onAccountConnected: ({ accountId, userId, linkItemId }) => {
22 console.log('Account connected: ', accountId, ' User ID:', userId, ' Link Item ID:', linkItemId)
23 },
24 onAccountUpdated: ({ accountId, userId, linkItemId }) => {
25 console.log('Account updated: ', accountId, ' User ID:', userId, ' Link Item ID:', linkItemId)
26 },
27 onAccountRemoved: ({ accountId, userId, linkItemId }) => {
28 console.log('Account removed: ', accountId, ' User ID:', userId, ' Link Item ID:', linkItemId)
29 },
30 onUserCreated: ({ userId, userToken }) => {
31 console.log('User created: ', userId, 'User token:', userToken)
32 },
33 onClose: () => {
34 console.log('Link closed')
35 },
36 onTokenExpired: updateToken => {
37 console.log('Token expired')
38 // generate your new token here (more info: /developer-tools/api-reference#user-tokens)
39 // updateToken(newToken)
40 }
41 })
42 argyle.open()
43 </script>
44</body>
45
46</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 Link keys 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 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#
Visit our Link Reference for the full list of available callbacks.
Upgrade#
Link for Web updates automatically with each release. You do not need to take any steps to upgrade your Web integration.