---
updatedAt: 2025-08-01T13:45:05.000Z
agentTools:
  projectIndex: https://docs.wonderpush.com/llms.txt
---

# Web Push Notifications

How to set up WonderPush Web push notifications on your website

## 15mn setup Chrome notifications and browser notifications

<Image align="center" width="80%" src="https://files.readme.io/8d98e0a-computer-e1569454758823.png" />

Setting up push notifications for your website is easy. Web push notifications, also called "browser push notifications" or "Chrome notifications" are supported by the major web browsers, such as Chrome, Edge, Opera, Yandex. Web push notifications are the ideal solution to re-engage users and bring them back to your website.

Estimated setup time: 15 minutes.

If you haven't already, [sign up for a free account on wonderpush.com](https://dashboard.wonderpush.com/account/signup?prefill_platforms=Web\&prefill_webIntegrationType=\&utm_source=Documentation).

If you're not familiar with Web Push, see [What are Web Push Notifications?](https://docs.wonderpush.com/docs/what-are-web-push-notifications).

<Callout icon="📘" theme="info">
  This guide works for any website. Please note that we have specific instructions for:

  * [AMP](https://docs.wonderpush.com/docs/amp-web-push-quickstart)
  * [Blogger](https://docs.wonderpush.com/docs/web-push-notifications-blogger)
  * [Drupal](https://docs.wonderpush.com/docs/drupal-web-push-notifications)
  * [Google Tag Manager](https://docs.wonderpush.com/docs/web-push-notifications-google-tag-manager)
  * [Joomla](https://docs.wonderpush.com/docs/joomla-web-push-notifications)
  * [Magento](https://docs.wonderpush.com/docs/magento-web-push-notifications)
  * [React](https://docs.wonderpush.com/docs/web-push-notifications-react)
  * [Shopify](https://docs.wonderpush.com/docs/web-push-notifications-shopify)
  * [Squarespace](https://docs.wonderpush.com/docs/web-push-notifications-squarespace)
  * [Wix](https://docs.wonderpush.com/docs/web-push-notifications-wix)
  * [Weebly](https://docs.wonderpush.com/docs/web-push-notifications-weebly)
  * [WooCommerce](https://docs.wonderpush.com/docs/web-push-notifications-woocommerce)
  * [WordPress](https://docs.wonderpush.com/docs/web-push-notifications-wordpress)
</Callout>

## Before we start: create your project

Click on *New Project*:

<Image align="center" src="https://files.readme.io/787d5ca-Capture_dcran_2023-12-11_101657.png" />

Choose a name for your project and select *Website* as a platform then click *Create*:

<Image align="center" width="80% " src="https://files.readme.io/08fdaec-Capture_dcran_2023-12-11_102005.png" />

> 📘 Already have a project?
>
> Just add the *Website* platform to any existing project by going to *Settings*, selecting the first tab named after your project and clicking *Edit*. You'll be presented a form that lets you add a platform.

## Step 1. Fill-in website information

Choose **Typical Site** as your setup type, unless you're using [WordPress](https://docs.wonderpush.com/docs/web-push-notifications-wordpress), [Wix](https://docs.wonderpush.com/docs/web-push-notifications-wix), [React](https://docs.wonderpush.com/docs/web-push-notifications-react),  [Google Tag Manager](https://docs.wonderpush.com/docs/google-tag-manager), [Weebly](https://docs.wonderpush.com/docs/web-push-notifications-weebly),  [Blogger](web-push-notifications-blogger) or  [Squarespace](https://docs.wonderpush.com/docs/web-push-notifications-squarespace).

<Image align="center" width="80%" src="https://files.readme.io/a77e6b0-Capture_dcran_2023-12-11_095159.png" />

Then fill in your website information:

<Image align="center" width="80%" src="https://files.readme.io/4899236-Capture_dcran_2023-12-11_095536.png" />

**Site name**\
Enter the name of your website. This name might be displayed when users subscribe to push notifications.

**Site URL**\
Enter the base URL of your site (e.g. `https://example.com`). This will be the default URL users will be redirected to when they click on a notification.
If your site is accessible from both `www.` and non-`www.` URLs (e.g. `example.com` and `www.example.com`) we recommend you redirect traffic to one of the URLs and use that to fill-in the URL field.

**Enter Icon**\
Enter the URL to your website icon or choose a file from your computer. Your website icon will be displayed in notifications. It should be a square image file. Prefer HTTPS.

**My site doesn't have HTTPS**\
If your site doesn't have HTTPS, check this box. Please note that HTTPS certificates are FREE these days, and very easy to install. Take a look at <a href="https://letsencrypt.org" target="_blank">let's encrypt</a>.

HTTPS is required for push notifications to work, and fortunately WonderPush can provide you with a free HTTPS enabled domain.

Choose an HTTPS notification domain.

<Image align="center" width="60% " src="https://files.readme.io/48f647f-Capture_dcran_2023-12-11_095623.png" />

#### About the Web push notification domain

Your push notification domain will be displayed in every notification you send:\ <img src="https://files.readme.io/d3843e5-notif.png" width="350" />\
On this example made with the chrome browser, the notification domain is `mywebsite.by.wonderpush.com`.
When users subscribe to push notifications, they grant your domain the permission to send them push notifications. When you change the push notification domain, users have to subscribe again!

For these reasons, it is especially important to choose the right push notification domain from the start.

**Using your own push notification domain**\ <span class="label label-recommended">Recommended</span>

This is the best option. It is only available for HTTPS websites. If your website does not support HTTPS, or if you can't [upload SDK files](https://docs.wonderpush.com/docs/web-push-notifications-quickstart#step-4-upload-sdk-files), use `.by.wonderpush.com`.

**Using a`by.wonderpush.com` subdomain**

If your site does not support HTTPS, or if you can't  [upload SDK files](https://docs.wonderpush.com/docs/web-push-notifications-quickstart#step-4-upload-sdk-files), that's your only option.

## Step 2. Configure subscription prompts

In this section, you can configure subscription prompts for your website. Subscription prompts are ready-made user-interfaces you can use to let users subscribe to push notifications.

To activate a subscription prompt, simply click the switch in front of its name so that it shows as **ON**. To customize it, click on **Customize**.

<Image align="center" width="80%" src="https://files.readme.io/a9fb874-Capture_dcran_2023-12-11_095846.png" />

You can find out more about subscription prompts [in our dedicated guide](https://docs.wonderpush.com/docs/subscription-prompts).

Hit *Save*.

## Step 3. Copy code

Hit *Save* if you haven't already.

To enable WonderPush on your site, paste the code from your dashboard into every page of your website. If you do not have access to your site's code, get help from a developer.

<Image align="center" width="80%" src="https://files.readme.io/1edbcda-8f3a475-Screenshot_20190911_122239.png" />

## Step 4. Upload SDK files

> 🚧 Ignore if your push notification domain is a subdomain of `by.wonderpush.com`
>
> Subdomains of `by.wonderpush.com` do not need any extra files. Skip to the next step.

1. Download [wonderpush-sdk-files.zip](https://www.wonderpush.com/downloads/wonderpush-sdk-files.zip)

2. Unzip the archive and upload its content to the **top-level root** of your website directory to make it publicly accessible.

Once you've uploaded both files, the following URLs should be publicly accessible (replace `example.com` with your site domain):

* `https://example.com/wonderpush.min.html`
* `https://example.com/wonderpush-worker-loader.min.js`

If you cannot upload SDK files in the root directory, you have the option to put them in a subdirectory:

<Image align="center" width="80%" src="https://files.readme.io/0887fc2-Capture_dcran_2023-12-11_101206.png" />

## Receive your first push!

Let's discover now on your Google Chrome how this first Chrome push notification appears.

Head over to your website and refresh the page until you see the [subscription dialog](https://docs.wonderpush.com/docs/subscription-prompts#html-dialog) and click the *Subscribe* button:

<img src="https://files.readme.io/c8dffc2-dialog.jpg" width="450" />

Wait a couple of minutes and receive the [default welcome notification](https://docs.wonderpush.com/docs/default-welcome-notification):

<img src="https://files.readme.io/d3843e5-notif.png" width="350" />

> 👍 Congratulations, you're done!