# Web SDK Setup

## 1. Requirements

[Sign up](https://console.flarelane.com) to FlareLane and create a project.

***

## 2. Start Setup

Click **Channel** > **Web Push** to start setup.

<figure><img src="https://4151189289-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSJ35x4PFzaneH3SrvcBt%2Fuploads%2FKJyaoemBxJiSUwTOp17U%2Fimage.png?alt=media&#x26;token=50d26893-abeb-48ba-a026-91aa60c247da" alt=""><figcaption></figcaption></figure>

***

## 3. Input Website Details

<figure><img src="https://4151189289-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSJ35x4PFzaneH3SrvcBt%2Fuploads%2Ffu48fscMY94D1ICqwJ1m%2Fimage.png?alt=media&#x26;token=83c992c0-3e6d-48f1-8e09-6c04ab878e08" alt="" width="563"><figcaption></figcaption></figure>

<table><thead><tr><th width="165"> </th><th>Description</th></tr></thead><tbody><tr><td><strong>Website Name</strong></td><td>Website name will be auto-filled when message title is left blank</td></tr><tr><td><strong>Website URL</strong></td><td>URL must be started with "https://"</td></tr></tbody></table>

***

## 4. Upload sw\.js

Download [sw.js](https://gp.flarelane.com/sw.js) file and upload it to the root path of your website. (ex. If the file sw\.js is located in the 'example.com' domain, it should be accessible at **example.com/sw\.js**)

{% tabs %}
{% tab title="sw\.js" %}

```javascript
importScripts("https://cdn.flarelane.com/ServiceWorker.js");
```

{% endtab %}
{% endtabs %}

If you upload it correctly, you should be able to access it externally like this:

<https://gp.flarelane.com/sw.js>

***

## 5. SDK Setup

{% hint style="info" %}
You can check your project ID at FlareLane console's **Project**
{% endhint %}

Add the following script right before the \</body> tag of your website.

```html
<script src="https://cdn.flarelane.com/WebSDK.js" charset="UTF-8"></script>
<script>FlareLane.initialize({ projectId: "PROJECT_ID" });</script>
```

***

## 6. Test

<figure><img src="https://4151189289-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSJ35x4PFzaneH3SrvcBt%2Fuploads%2FQQy6eVIeNeQWzZ7DtnP3%2Fimage.png?alt=media&#x26;token=9e4689ce-234e-4431-886d-0d560203fbb8" alt="" width="331"><figcaption></figcaption></figure>

If everything has been set up correctly, a prompt asking for permission to subscribe will appear when the website is refreshed.&#x20;

Then, you can proceed with the detailed setting such as the setting up an icon at FlareLane console's **Channel** > **Web Push**.

***

## 7. Identify your user

FlareLane's device is 'anonymous' and you can match the device with your user based on the unique user ID that identifies your user.

{% hint style="info" %}
Setting up [User ID](https://guide.flarelane.com/data-integration/user-id) has many benefits. You can distinguish whether a user has signed-up, and push notifications can be sent based on the User ID.
{% endhint %}

Usually, when a user sign-up or log-in, you should execute `setUserId`.

{% tabs %}
{% tab title="JavaScript" %}

```javascript
FlareLane.setUserId("USER_ID");
```

{% endtab %}
{% endtabs %}

***

## 8. Additional Setup

To use [Journeys](https://guide.flarelane.com/customer-journey) or [Message Personalization](https://guide.flarelane.com/guide-for-developers/broken-reference), integrate custom data via SDK or API:

* [data-integration](https://guide.flarelane.com/data-integration "mention")