> ## Documentation Index
> Fetch the complete documentation index at: https://docs.prelude.so/llms.txt
> Use this file to discover all available pages before exploring further.
# Web SDK
> Learn how to capture frontend browser signals to integrate them with the verification backend APIs. It allows you to capture certain browser signals that will be reported back to your Prelude account.
We are always happy to help with the implementation of the SDK. If you have any questions, please [reach
out](mailto:support@prelude.so).
The web front-end SDK is available at [https://www.npmjs.com/package/@prelude.so/js-sdk](https://www.npmjs.com/package/@prelude.so/js-sdk) and it provides different features.
In this guide we focus on integrating the signals collection to augment the verification process so that it includes extra browser information.
### Backend integration overview
When you integrate any of the Prelude backend SDKs (available for Node.js, Go, Python or Kotlin/Java) to perform user verification, you will usually follow the [Quickstart](/verify/v2/documentation/quickstart) guide for the platform you are working with.
Regardless of the platform the basic steps to follow are:
1. Install the backend SDK for your platform.
2. Create a new instance of the SDK with your API key.
3. Request the user to input their phone number and send it to your backend. Use the phone number to create a verification request with the SDK.
4. Redirect the user to a check page where the user will input the verification code received.
5. When the user submits the verification code to your backend, you forward it to Prelude using the SDK to check if it is the correct code. Then you will redirect the user to the appropriate page depending on the result.
### Frontend web SDK integration
With the web SDK you can augment the verification process to include additional browser information which can be used to combat fraud.
The process is quite simple. During step **3** above, your application will use the web SDK to gather browser signals and report them to your Prelude account.
Then, when your application submits the phone number to your backend, it will also include a `dispatchId` value (just a string value) that the web SDK will provide after gathering the browser signals.
#### Installation
The SDK is provided as an npm package and can be installed using the following command:
```bash theme={null}
npm install @prelude.so/js-sdk
```
**This package contains **wasm** code**
In the default entrypoints, the **wasm** is inlined in the javascript file as a base64 data url.
If you want to optimize your bundle size, you can use the **slim** version of the entrypoints (check previous code block) instead of the inline ones.
This require further configuration, please refer to specific comments in the next section.
```javascript default (with inlined wasm) theme={null}
import { dispatchSignals } from "@prelude.so/js-sdk/signals";
```
```javascript slim theme={null}
import { dispatchSignals } from "@prelude.so/js-sdk/signals/slim";
```
#### Configuration
`@prelude.so/js-sdk` contains a web worker and `.wasm` code. This means if you are developping a bundled web app, you'll need some setup steps to make it work. This section explains those steps for different bundlers.
```javascript Vite & Vitest theme={null}
{
// If you're using a `/slim` entrypoint,
// then you'll have to copy the `.wasm` core as a static asset in your bundle.
assetsInclude: ["./node_modules/@prelude.so/**/*.wasm"],
// Vite dev server config
optimizeDeps: {
// @prelude.so/js-sdk uses a web worker. Vite dev server does not handle optimization of web worker files.
exclude: ["@prelude.so/js-sdk"],
// As per Vite's docs, a commonJS sub dependency of a dependency should be optimized.
include: ["@prelude.so/js-sdk > browser-tabs-lock"],
},
// Vitest config
test: {
// @prelude.so/js-sdk should only be used in browser like environments.
environment: "jsdom",
// If you're using a slim @prelude.so/js-sdk entrypoint,
// in vitest it's better to resolve the inline one to avoid any issue with the `.wasm` asset.
// This example config is aliasing all 3 entrypoints, but you can keep only the ones you need.
alias: {
"@prelude.so/js-sdk/slim": "@prelude.so/js-sdk",
"@prelude.so/js-sdk/session/slim": "@prelude.so/js-sdk/session",
"@prelude.so/js-sdk/signals/slim": "@prelude.so/js-sdk/signals",
},
},
}
```
```javascript webpack theme={null}
module.exports = {
// your config
module: {
rules: [
// your rules
// If you're using a `/slim` entrypoint, then you'll have to copy the `.wasm` core as a static asset in your bundle.
{
test: /\.wasm$/,
include: [path.resolve(__dirname, "node_modules/@prelude.so/core")],
type: "asset/resource",
},
// your rules
],
},
// your config
};
```
```javascript esbuild theme={null}
import metaUrlPlugin from "@chialab/esbuild-plugin-meta-url";
import * as esbuild from "esbuild";
await esbuild.build({
// your config
loader: {
// your loaders
//
// If you're using a `/slim` entrypoint,
// then you'll have to copy the `.wasm` core as a static asset in your bundle.
".wasm": "file",
},
plugins: [
// This will recognize the worker file in @prelude.so/js-sdk as an entrypoint and bundle it
metaUrlPlugin(),
// your plugins
],
// your config
});
```
#### How to use
In general, you will simply need to instantiate the web SDK with your SDK key and call the `dispatchSignals` function in the same page that you already have to capture the phone number.
***Important: When you generate the SDK key in the [Prelude dashboard](https://app.prelude.so/) you will be able to copy it and you should store it somewhere secure, as the dashboard will not allow you to display the same key again.***
```javascript theme={null}
import { dispatchSignals } from "@prelude.so/js-sdk/signals";
const dispatchId = await dispatchSignals();
```
Finally, when you create the verification in your backend, besides the phone number you can now also pass this `dispatchId` value in all of the backend SDKs. Refer to the [Quickstart](/verify/v2/documentation/quickstart) guide for your platform of choice to see how to include it.