# Web Push

**Web push** allows businesses to send push notifications to anonymous website visitors even when they are not signed up, even when they are not browsing the website and even when the browser is turned off. To receive push notifications, visitors must first opt-in to push notifications on your website.

## What Are the Benefits of Web Push?

* Reach **millions of anonymous website visitors** without requiring their user information. 
* Enjoy **high engagement rates and reachability** across all devices, from smartphones to desktops.
* **Dramatically cut costs** compared to traditional messaging services like SMS or WhatsApp.

### Web Push vs. Other Channels

<table><thead><tr><th width="148" align="center"> </th><th align="center">Web Push</th><th width="157" align="center">SMS</th><th align="center">Mobile Push</th></tr></thead><tbody><tr><td align="center"><strong>Cost</strong></td><td align="center">Low</td><td align="center">High</td><td align="center">Low</td></tr><tr><td align="center"><strong>Reaches anonymous web visitors</strong></td><td align="center">Yes</td><td align="center">No</td><td align="center">No</td></tr><tr><td align="center"><strong>App Installation</strong></td><td align="center">Not Required</td><td align="center">Not Required</td><td align="center">Required</td></tr><tr><td align="center"><strong>Message Length</strong></td><td align="center">Unlimited</td><td align="center">Limited</td><td align="center">Unlimited</td></tr><tr><td align="center"><strong>Devices</strong></td><td align="center">-Mobile<br>-PC<br>-Tablet</td><td align="center">-Mobile<br>-Tablet</td><td align="center">-Mobile</td></tr></tbody></table>

## How Web Push Works&#x20;

Web push notifications generally follow a three-step process: opt-in, send, and receive.

### 1. Opt-In

<figure><img src="/files/o7sdqZAN8yvF2noYyDll" alt="web push notification_browser prompt" width="563"><figcaption><p><em>Image by FlareLane</em></p></figcaption></figure>

Once all integrations are complete, a subscription pop-up will appear when users visit the website. The language of the pop-up will vary based on the browser's language settings.

If the user clicks **Allow**, they will automatically opt in to web push notifications, enabling them to receive alerts even after leaving the browser.

### 2. Send

Once the integrations are complete and users have opted in, you can send push notifications to subscribed devices.

### 3. Receive

The sent push notifications will be displayed through the browser app (e.g., Google Chrome) that was used to visit the website.

***

## Web Push by OS Type

<table><thead><tr><th width="148.33333333333331"> </th><th>Windows PC</th><th>macOS</th><th>Android</th></tr></thead><tbody><tr><td><strong>Notification Content</strong></td><td>Title, Message, URL, Image</td><td>Title, Message, URL, Image</td><td>Title, Message, URL, Image</td></tr><tr><td><p><strong>Image</strong> </p><p><strong>File Type</strong></p></td><td>JPG, PNG <br>(GIF, SVG not supported)</td><td>JPG, PNG <br>(GIF, SVG not supported)</td><td>JPG, PNG <br>(GIF, SVG not supported)</td></tr><tr><td><strong>Image Resolution</strong></td><td><strong>Recommended:</strong> <br>512x256px or 1440x720px<br>2:1 aspect ratio<br><br>Max width 2000px<br>Min width: 300px</td><td><strong>Recommended:</strong> <br>512x256px or 1440x720px<br>2:1 aspect ratio<br><br>Max width 2000px<br>Min width: 300px</td><td><strong>Recommended:</strong> <br>512x256px or 1440x720px<br>2:1 aspect ratio<br><br>Max width 2000px<br>Min width: 300px</td></tr></tbody></table>

<figure><img src="/files/zuENt6RUqmeW2PT9Iqcg" alt="web push notification displayed on windows PC" width="563"><figcaption><p><strong>Windows PC</strong></p></figcaption></figure>

<figure><img src="/files/r47sgHyKfmM1lltdQOnB" alt="web push notification displayed on macOS" width="563"><figcaption><p><strong>macOS</strong></p></figcaption></figure>

<figure><img src="/files/RAmHi9f7BSk16sGwi8EX" alt="web push notification displayed on Android" width="563"><figcaption><p><strong>Android</strong></p></figcaption></figure>

## Web Push Overview

<figure><img src="/files/ErNK4tfbEQ2JaaAqUFvu" alt=""><figcaption><p><em>Image by FlareLane</em></p></figcaption></figure>

<table><thead><tr><th width="229">Category</th><th>Description</th></tr></thead><tbody><tr><td>a (browser icon)</td><td>A square image of at least 72x72 pixels, with a transparent background and a "<strong>black</strong>" icon (no other colors allowed).</td></tr><tr><td>b (title)</td><td>Limited to 60 characters.</td></tr><tr><td>c (content)</td><td>Limited to 150 characters.</td></tr><tr><td>d (image)</td><td>A horizontal image with a 2:1 aspect ratio, at least 1440x720 pixels (GIFs not allowed).</td></tr><tr><td>e (browser)</td><td>The notification will be delivered through the subscribed browser, which cannot be changed.</td></tr><tr><td>f (URL)</td><td>The notification is tied to the subscribed site, which cannot be changed.</td></tr><tr><td>g (time)</td><td>The time the notification is received, which cannot be changed.</td></tr><tr><td>h (icon)</td><td>A square image of at least 256x256 pixels.</td></tr></tbody></table>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://guide.flarelane.com/channels/web-push.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.