# Quick Start

## Requirements

Support for web push notifications requires:

* Your website to be SSL-enabled (https\://)
* One publicly-accessible file to be placed on your site
* A snippet of Integration HTML to be added to each page on your site.
  * This can also be done with a tag manager.

## Steps

{% hint style="info" %}
If your site uses Wordpress you can skip these steps and follow the [<mark style="color:blue;">Wordpress Plugin</mark>](https://documentation.pushly.com/integration/web-push/wordpress-plugin) steps for an easier implementation.
{% endhint %}

### Step 1: Place the Service Worker File

Download the Service Worker from [<mark style="color:blue;">our CDN</mark>](https://cdn.p-n.io/sdk/web/latest/pushly-sw.js) ([<mark style="color:blue;">https://cdn.p-n.io/sdk/web/latest/pushly-sw.js</mark>](https://cdn.p-n.io/sdk/web/latest/pushly-sw.js)) and place it in a publicly accessible location on the same domain that serves your site. For example: `https://www.example.com/assets/pushly/pushly-sdk-worker.js`

{% hint style="danger" %}
This file **must** be served from the same origin the potential subscriber is on when they visit your site. It cannot be served from a separate domain or subdomain.\
\
For example, if your visitor is on `www.example.com` the service worker must be located on `www.example.com.` It cannot be served from `assets.example.com` or `examplecdn.com`.&#x20;

Also note that it **cannot** be served from behind a 301/redirect.
{% endhint %}

### Step 2: Add the Integration HTML

If you placed the Service Worker in a subdirectory on your domain follow the steps in the *Service Worker Placed in Subdirectory* tab otherwise select the *Service Worker Placed in Public Root* tab below.

{% tabs %}
{% tab title="Service Worker Placed in Subdirectory" %}
Add the following HTML snippet to the head section of your site and replace **both** instances of `SDK_KEY` with the value provided by your account manager.

Also, replace the `/absolute/path/to/pushly-sdk-worker.js` text in the snippet with the full path to the Service Worker.

```javascript
<script src="http://cdn.p-n.io/sdk/web/latest/pushly-sdk.min.js?domain_key=SDK_KEY" async></script>
<script>
  window.PushlySDK = window.PushlySDK || [];
  function pushly() { window.PushlySDK.push(arguments) }
  pushly('load', {
    domainKey: 'SDK_KEY',
    sw: '/absolute/path/to/pushly-sdk-worker.js',
  });
</script>
```

{% hint style="danger" %}
The `sw` property should not include the origin/domain. It should be a path only; I.e., do not include `https:///www.example.com` in this value.
{% endhint %}
{% endtab %}

{% tab title="Service Worker Placed in Public Root" %}
Add the following HTML snippet to the head section of your site and replace **both** instances of `SDK_KEY` with the value provided by your account manager.

```javascript
<script src="https://cdn.p-n.io/pushly-sdk.min.js?domain_key=DOMAIN_KEY" async></script>
<script>
  window.PushlySDK = window.PushlySDK || [];
  function pushly() { window.PushlySDK.push(arguments) }
  pushly('load', {
    domainKey: 'SDK_KEY',
  });
</script>
```

{% endtab %}
{% endtabs %}

Need strict CSP or Subresource Integrity (SRI)? See [Delivery & Security (SRI)](https://documentation.pushly.com/integration/web-push/sdk/delivery-and-security-sri).