# How to create a Web push notification?

**This article includes a video demonstration:** [Watch video](https://www.youtube.com/embed/wZ6nXYHbZP4?feature=oembed)

**Web push notifications** allow you to reach contacts in a completely new way. They will display your notification using the browser of a person that agreed to the notifications. That person doesn’t need to be a subscriber to receive them.

**Push notifications** are a free feature that can influence your conversions, but also inform people about news on your pages, alert them or remind them about your site. It allows you to reach more people and display notifications that can redirect to a site of your choice.

With GetResponse you can now create **Rich push notifications** which let you create notifications containing images, add action buttons, and support topics. The appearance of the notification may differ from the preview depending on the recipient’s browser and the recipient’s operating system (and the fact that different browsers/OS’ support different rich push elements).

You can also generate the title and notification text with **AI**.

Introduction to Web push notifications
--------------------------------------

**Web push notifications** are notifications that can be sent to a user via desktop web browser and mobile web browser. Web push notifications are delivered to a user’s desktop or mobile screen anytime they have their browser open — regardless of whether the user is on the website.

**How does Web Push work?**

When the visitor clicks on **Allow notifications,** our application sends a request to the appropriate intermediary (called a push service), which delivers the message to the browser, if it is online. If the browser is offline, the message is queued until the browser is opened. [Click here for more information](https://developers.google.com/web/ilt/pwa/introduction-to-push-notifications#push_notification_terms).

We support all the main browsers apart from **Safari** and **Internet Explorer 11**.

We highly recommend creating a **custom prompt** before the native browser permission prompt is displayed. It will inform your visitors that you can send them notifications if they agree. It increases your conversion rate and also, some browsers may block the native browser prompt if there was no previous interaction with the website. Also, custom prompt can increase subscriptions to your notifications.

**Custom prompt:**

![Custom prompt.](https://us-wd.gr-cdn.com/help/2020/10/1-custom-prompt2.png)

**Native prompt**:

![Native prompt.](https://us-wd.gr-cdn.com/help/2020/10/2-native-prompt2.png)

Adding a site
-------------

You need to add your **site** to GetResponse – it will contain your notifications, as well as the URL and the image.

To add a site:

1.  Go to **[Tools > Push notifications](https://app.getresponse.com/notifications/web-push/sites)**.
2.  Click **Add site**.  
    ![Create site.](https://us-wd.gr-cdn.com/help/2020/10/3-create-site-.png)
3.  Provide a name for your site (up to 150 characters).
4.  Provide your exact website URL. This must be the exact URL that appears in the browser. Your site **must support HTTPS** to send notifications. If it doesn’t, you’ll need to set up an SSL certificate for your website.
5.  (Optional) Click **Upload an image** if you want to add an icon. That would be a default image displayed in all your notifications and custom prompts. It can be your logo or a brand icon.
6.  Click **Add site and continue**.

You can add only a domain or subdomain as your site, for example:

*   https://example.com
*   https://subdomain.example.com

It’s not possible to use a directory as your site, such as:

*   https://example.com/directory
*   https://subdomain.example.com/directory

The second step is to configure your website.

1.  Click **Get** [**Web Connect**](https://www.getresponse.com/help/what-is-web-connect-and-how-can-i-use-it.html) to copy the tracking code. Add the tracking code to the site where you want to display notifications. It needs to be placed in the **head** section.
2.  Click **Download service worker file** to download the service worker. Install it in the **root directory** of your site on your server. Ask your web developer for help if you’re not comfortable doing it yourself.  
    When people opt-in, the service worker will be downloaded to their browser. If they subscribe, then they’ll be able to get your notifications. Things to keep in mind:
    *   You need to have HTTPS to deploy the service worker.
    *   Don’t rename the file.
    *   The file must point to the same site origin (your domain).

3.  Click **Finish** to complete setting up your site.

You will always have access to the **Web Connect** code and service worker by going to **[Web push notifications](https://app.getresponse.com/notifications/web-push/sites)** and clicking **Get code and service worker**.

In the third step you can **Pick opt-in method**. Two-click opt-in (with custom prompts) will result in better conversions. That can be changed later in the **Prompt paths**.

*   With **One-click opt-in** only the native browser prompt will appear.
*   **Two-click opt-in** gives you the option to create a custom branded prompt that shows before the native browser prompt.  
      
    ![two-click opt-in in web push notification](https://us-wd.gr-cdn.com/help/sites/9/2023/10/1212/wpp1.png)

**Managing a site**
-------------------

To manage your site:

1.  Go to **[Web push notifications](https://app.getresponse.com/notifications/web-push/sites)**.
2.  Hover over the **Actions menu** (vertical ellipsis).  
    There you can:
    *   **Edit** your site
    *   **Get code and service worker**
    *   **Create prompt**
    *   **Create notification**
    *   **Remove** (it’s only possible if there are no active notifications).

On that screen, you will also see how many people are subscribed to notifications on that website.

Creating a prompt
-----------------

When creating a prompt, you are in fact always creating a **custom** prompt. The **native** prompt is created automatically and cannot be edited, as it’s a request directly from the browser to send notifications.

**Keep in mind that**:

*   It’s not possible to edit or remove the browser native prompt.
*   You can preview how the prompt will appear. The prompt’s appearance can differ between browsers and operating systems.
*   You’ll find it under **Permission prompts**, alongside any custom prompts you’ve created.

You can create a custom prompt for your website to increase subscribers and conversions.

To create a custom prompt:

1.  Go to **[Web push notifications](https://app.getresponse.com/notifications/web-push/sites)**.
2.  Hover over the **Actions menu** (vertical ellipsis) and select **Create prompt**.  
      
    ![Create a prompt.](https://us-wd.gr-cdn.com/help/2020/10/4-create-prompt.png)
3.  Enter an internal name for your prompt (up to 150 characters).
4.  Enter your prompt message (up to 128 characters). Create a personalized message to encourage people to subscribe. The custom prompt appears before the native prompt.
5.  Provide the text for the confirmation button and choose its color.
6.  Provide the text for the cancellation link and choose its color. A preview of your prompt will be displayed on the right side.
7.  Click **Save** to finish setting up the custom prompt.
8.  (Optional) Click on **Preview** to see how the native prompt will look like.
9.  Click **Save and activate** to activate the created prompt (while disabling the currently active one) or **Save progress** to save your progress without activating the prompt.

You will be able to see how many people **viewed** your prompts and how many **interacted** with it. For **native prompt,** you will see how many people subscribed. For **custom prompt**, you will see how many people viewed the native prompt, which means how many people accepted the custom prompt. This will allow you to compare the effectiveness of different prompts. You will also be able to check how many visitors subscribed through a given custom prompt.

Managing prompts
----------------

To manage your prompts:

1.  Go to **[Web push notifications](https://app.getresponse.com/notifications/web-push/sites)**.
2.  Click on the name of your site.
3.  On the **Permission prompts** tab, you can deactivate the prompt.
4.  To manage the prompt, hover over the **actions menu** (vertical ellipsis) next to your custom prompt. There you will be able to:
    *   **Edit** your prompt.
    *   **Delete** it (it’s only possible if prompt has not been displayed).

Controling where your prompts will appear
-----------------------------------------

You can control where your prompts will appear using **Prompt paths**.

**Prompth paths** are designed to display the prompt throughout the site or choose specific pages by adding a prompt path. The path refers to the URL part after the domain. For example, in “https://www.example.com/store/sale”, the path is “/store/sale”.

1.  Go to **[Web push notifications](https://app.getresponse.com/notifications/web-push/sites)**.
2.  Click on the name of your site.
3.  Click on the **Prompt paths** tab.
4.  Click **Edit paths** to edit all paths.
5.  Hover over 3 dots beside your path to delete it, or to add a path above or below it.  
      
    ![add new prompt path](https://us-wd.gr-cdn.com/help/sites/9/2023/10/1036/pp1.png)  
    
6.  When adding the path, you need to:
    *   Select the **Prompt**
    *   Enter the **Prompt path**, you have three types to choose from:
        *   **Path starts with** – enter the first part of URL displayed after your website’s URL – so if it is: https://www.example.com/store/, you enter /store and the prompt will show on all sites starting with https://www.example.com/store/
        *   **Path excludes** – enter the part of URL path that you would like to exclude from showing a prompt
        *   **Entire site** – select that if you want to show selected prompt on your entire website – selecting that will hide all prompts with lower priority selected with **Path starts with**
7.  Decide about order sequence of your prompt paths by moving them up and down using the triple bar icon on their left hand side.  
      
    ![paths order](https://us-wd.gr-cdn.com/help/sites/9/2023/10/1036/pp2.png)  
      
    
8.  Save your changes by clicking **Save Paths**.

You can specify the order in prompt paths to determine which rule should have priority, because the rules may overlap and block each other.

**Example**: You have two paths  
  
Prompt No. 1 >> Path starts with >> /store  
Prompt No. 2 >> Path starts with >> /store/product

In such case, Prompt No. 2 will never appear – because Prompt No. 1 will always appear on the /store path, but if you change their order Prompt No. 2 will appear on the /store/product/jacket page, and Prompt No. 1 will appear on the /store/category/winter page

Creating a notification
-----------------------

Notification is a window that is displayed right on your subscribers’ desktops and mobile screens. They can notify people who have opted-in to your notifications about what’s happening on your site. You can advertise a product launch, a sale, or inform them about new content.

**Note**: different browsers and devices might have different character limits. If you want the notification to display good for all the subscribers, it’s best not to create too long notifications, as they might not be displayed fully.

You can create notifications manually or using **AI**.

To create a notification:

1.  Go to **[Web push notifications](https://app.getresponse.com/notifications/web-push/sites)**.
2.  Hover over the **Actions menu** (vertical ellipsis) and click on **Create notification**.  
      
    ![create notification](https://us-wd.gr-cdn.com/help/sites/9/2022/08/0747/ntf0.png)  
      
    
3.  Provide an internal name for your notification (up to 150 characters).  
    At this stage you can decide if you want to use **AI** (table below) or create one manually (skip to point 4.). **AI works with paid plans only.**

1.  Click **Use Al Web Push Generator**.  
      
    ![use AI Web Push Generator](https://us-wd.gr-cdn.com/help/sites/9/2023/03/0859/wpai1.png)  
      
    
2.  Type **What is your notification about**. You can write specific keywords or a sentence.  
      
    ![web push notifications AI what is it about](https://us-wd.gr-cdn.com/help/sites/9/2023/03/0903/wpai2.png)  
      
    
3.  Move slider if you want to **Include Emoji**.  
      
    ![web push notifications AI with emojis](https://us-wd.gr-cdn.com/help/sites/9/2023/03/0904/wpai3.png)  
      
    
4.  Click **Generate**. It may take a few minutes to generate the content.
5.  Select one of three titles and one of three notification texts suggested by **AI**.  
      
    ![Notification content generated by AI](https://us-wd.gr-cdn.com/help/sites/9/2023/03/0910/wbai4.png)  
      
    
6.  Click **Use**. You can now edit the generated text.

4.  In the **Audience** section, you can configure your prompts to display to specific groups of users. The section is divided into three sections:
    *   **Visitors** – choose the group to display the prompt for:
        *   All visitors
        *   New visitors
        *   Returning visitors (with the option to specify the number of visits)
    *   **Device** – select the device or devices to display the prompt on:
        *   Phone
        *   Tablet
        *   Desktop
    *   **Country** – target visitors based on their country.  
          
        ![audience](https://us-wd.gr-cdn.com/help/sites/9/2025/05/1120/1audience.png)  
          
        
5.  (Optional) **Add** **triggers** for when the prompt appears:
    *   **After** a specified **number** **of** **seconds**
    *   **After scrolling** a certain percentage of the page
    *   **On exit intent** (when the user attempts to leave the page)
    *   **After** a period of **inactivity**
    *   **On click** of a specific element  
          
        You need to choose if you want the promt to be shown when **All** selected **triggers occur** or is it enough if **Any trigger occurs**.  
          
        ![Prompt](https://us-wd.gr-cdn.com/help/sites/9/2025/05/1124/2prompt.png)  
          
        
6.  **Prompt cooldown.** To prevent overwhelming users, you can set a cooldown period for the prompt. This determines how many days should pass before the prompt is shown again to the same user if they previously dismissed it.  
      
    ![](https://us-wd.gr-cdn.com/help/sites/9/2025/05/1127/3prompt.png)  
      
    
7.  Enter the notification title (up to 250 characters). Use a catchy phrase or your brand name.
8.  (Optional) Add the notification text (up to 250 characters). Use it to share more details about the thing you’re promoting, inform your notification subscribers about changes, or notify them about running sales or new products.
9.  (Optional) Provide the destination URL to which people will be redirected after they click on your notification.  
      
    ![editing notification](https://us-wd.gr-cdn.com/help/sites/9/2022/08/0753/ntf1.png)  
      
    
10.  (Optional) Upload an image to the notification. You can use: JPEG, .JPG, PNG, GIF, WEBP, ICO, CUR, BMP no bigger than **10 MB**. We recommend using an image with a **width-to-height ratio of 2:1**.
11.  (Optional) Upload an icon to the notification. You can use: .JPEG, .JPG, .PNG, .GIF, .WEBP, .ICO, .CUR, .BMP up to 10 MB. For best results, use a **square** image at least **196 x 196 px**.  
       
       
       
     ![create notfification](https://us-wd.gr-cdn.com/help/sites/9/2022/08/0803/ntf2.png)  
       
     
12.  (Optional) Click **Add button** to create **Action buttons** for visitors to take specific actions from your notifications. Then enter the text that shows on the button, paste the URL that opens upon button click and the button icon that appears next to the button text.  
     ![notifications action  button](https://us-wd.gr-cdn.com/help/sites/9/2022/08/0810/ntf25.png)  
     
13.  On the right, you will be able to see the preview of your notification and test it in the browser. The preview will apply to the Google Chrome browser on macOS, Windows, and Android. For other browser and operating systems, there can be visual differences. The preview is purely informational, as there can be differences on particular devices.  
     To test how the notification will work in your system, click **Preview in browser**. You will be prompted to agree to receiving notifications.
14.  You will be able to preview your audience (how many people have subscribed to your notification).
15.  You can decide if want to **Send** the notification **immediately** or **Schedule** it **for later**. When scheduling the notification, you can change the time zone to other than the default one in your account.  
     **Note:** scheduled notification can also be used in the automation workflow.
16.  You can click **Cancel**, **Save draft** to use the notification later on, **Send notification**, or **Schedule notification.**  
     **Note:** to send the notification immediately, you need at least one permission to send notifications (one notification subscriber), but you don’t need one at this time to schedule notification for later.
17.  (Optional) You can set notification **topic**. It works when you have multiple notifications with the same topic. An older notification that hasn’t been clicked will be replaced by a new notification with the same topic, however if a visitor is offline and has several messages queued for delivery with the same topic, they will only get the last one.  
       
     You will be redirected to the **Notification page**. There you will be able to see the notification status, when the notification was created and sent, how many notifications were sent, delivered and clicked.

Managing notifications
----------------------

To manage your notifications:

1.  Go to **[Web push notifications](https://app.getresponse.com/notifications/web-push/sites)**.
2.  Click on the name of your site.
3.  On the **Notifications** tab, hover over the **actions menu** (vertical ellipsis) where you can:
    *   **View** your notification
    *   **Duplicate** it
    *   **Cancel** (if scheduled)

To change the scheduled date and time of your notification you need to cancel it and schedule again.

For a notification that wasn’t sent or is a draft, you have the option to:

*   **Edit** it,
*   **Delete** it.