# Parallel Developer Documentation **Legacy – v1.x** This is documentation for Parallel Developer Documentation **Legacy – v1.x**, which is no longer actively maintained. For up-to-date documentation, see the **[latest version](https://developer.parallelmarkets.com/docs/javascript/loading/vanilla)** (Current – v2.x). Version: Legacy – v1.x ## Manually load the parallel.js script This example uses the most basic ` ``` After calling `Parallel.init`, you just need to call `Parallel.subscribeWithButton` with two functions: 1. A function to be called on successful login and consent to sharing the details requested. 2. A function to be called if the user does not consent to sharing their details. This call to `Parallel.subscribeWithButton` will also handle showing the Parallel Passport button (in any `div` with the class `parallel-login-button`) and then hiding it when the user authenticates. ## Load parallel.js as an ES Module You can also import the loader as an [ES Module](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules) and load the SDK asynchronously. ### Installation Install the Parallel library vanilla loader from the [npm public registry](https://www.npmjs.com/package/@parallelmarkets/vanilla). ```sh npm install --save @parallelmarkets/vanilla ``` ### Usage The `loadParallel` function returns a promise that resolves once the SDK is loaded and ready. See below for an example using the `async/await` syntax in vanilla JavaScript. ```js import { loadParallel } from '@parallelmarkets/vanilla' // load the parallel library with the given configuration information const parallel = await loadParallel({ client_id: '123', environment: 'demo' }) // any element with the "parallel-login-button" class will render a button parallel.showButton() ``` ## Initiating a Parallel Flow After the Parallel SDK has been initialized (either via `Parallel.init()` if manually loaded, or via `loadParallel()` via the ES Module), you can show a Parallel button or explicitly initiate a flow. To automatically load a Parallel Passport button on your page, just follow these steps: 1. Add the HTML class `parallel-login-button` to the parent element where you want the button to appear. 2. Call `showButton()`, which will then find any elements with that class and render a login button child element for each. For instance, to add a "Parallel Passport" button somewhere on your page: ```html ``` ```js import { loadParallel } from '@parallelmarkets/vanilla' // wait for the loading to finish before calling any functions const parallel = await loadParallel({ client_id: '123', environment: 'demo', flow_type: 'overlay' }) parallel.showButton() ``` Alternatively, you can provide your own button or link and call `Parallel.login()` when you're ready to send the user into an authentication flow. ```html Log in with Parallel ``` ## Getting OAuth Access Tokens If you're using the JS SDK, you do **not** need to worry about calling any APIs to fetch authentication tokens. The entire process for securely retrieving the OAuth [`access_token` and `refresh_token` payload](https://developer.parallelmarkets.com/docs/1.x/server/token-api#response-parameters) is entirely handled for you automatically.