---
updatedAt: 2026-09-30T10:03:28.000Z
agentTools:
  projectIndex: https://docs.yespo.io/llms.txt
---

# Creating a Web Push Notification

Setting up Web Push includes:

1. Creating a Google Project to collect tokens for web push notifications.
2.  Adding a website to your Yespo account.
3. Configuring permission request prompt.

[See details >](https://docs.yespo.io/docs/web-push) 

After finishing all the necessary settings, you can create a Web Push campaign. 

## Creating New Web Push Notification

Go to **Messages** → **Messages** → **Web Push**. Click the **New Web Push** button

<Image src="https://files.readme.io/1b51cc60e7243ed50035b6717352a30526cb3e4cc7cb89a998219f9455612d8e-image.png" align="center" width="80%" alt="Messages page with the Web Push channel selected and the New Web Push button highlighted" />

### Main Settings

Fill in the following fields:

1. **Name**. The system name that the recipient will not see.
2. **Title**. Stick to no more than 30 characters for correct display on different devices.
3. **Text**. The main content of the Web Push. The optimal number of symbols is 45-70.

<Image src="https://files.readme.io/3e2effcd6c6afabc5a5fd7a9bf138ae56629fdf437f115531198a23eb0e9bbef-image01.png" align="center" width="80% " alt="Main settings panel with the Name, Title, and Text fields highlighted, next to a Chrome notification preview" />

Use emojis in the title and text fields to improve interaction and capture users' attention.

<Image src="https://files.readme.io/b428f36875804ec8e445e8744ee07b0b7838c7852fccca26a2a3cce788970730-image02.png" align="center" width="80% " alt="Title field emoji icon highlighted with an arrow to the Text field icon, showing an open emoji picker panel" />

4. **Personalization**. Use the dynamic variables to add a name, city, bonuses or any personal data available in the [user profile](https://docs.yespo.io/docs/user-profile). Click on the Personalization icon in the **Text** or **Title** field to select data.

<Image src="https://files.readme.io/87fd75d09d8a48a7b439836100de8f82e175d1739df9ff13baaf542164f6323f-image03.png" align="center" width="80% " alt="Title field personalization icon highlighted with an arrow to an open field search dropdown showing Personal info and Other categories" />

5. **Link**. Add the landing page URL.

<Image src="https://files.readme.io/f73471118f17605a7fedc106ba0a26f26dad1de149b4c5492618c12f105679a9-image04.png" align="center" width="80% " alt="Main settings panel with the Link field highlighted showing a landing page URL" />

6. **Logo**. Upload `JPEG` or `PNG` file up to 128 KB. You can also use a [variable](https://docs.yespo.io/docs/introduction-to-velocity) or a link to the image. Use only the `https` protocol for direct references in expressions.

<Image src="https://files.readme.io/14cbb7f350bbe40aa2b977aee85a6397d34ad5aae6b1ec9f1cbea84f744a9987-image05.png" align="center" width="80% " alt="Main settings panel with the Logo field highlighted showing an uploaded logo and Replace, Edit, and delete options" />

7. **Tags**. Select tags from the list or enter a new one and click **Enter**. Use [tags](https://docs.yespo.io/docs/how-add-tags) to filter search results and set [campaign frequency strategy](https://docs.yespo.io/docs/how-make-campaign-using-optimal-messaging-frequency-strategy).

<Image src="https://files.readme.io/e9f735fd0928d8fefd42bafd8b63c0cf9cb82f2af60df12bcbaf4714ea6f0615-image06.png" align="center" width="80% " alt="Main settings panel with the Tags field highlighted showing promo and welcome tags added" />

### Chrome Settings

Fill in the following fields:

1. **Big image**. Upload `JPEG` or `PNG` file up to **1.89 MB**. You can also use a [variable](https://docs.yespo.io/docs/introduction-to-velocity) or a link to the image. Use only the `https` protocol for direct references in expressions.

The image is passed to the browser as is: the browser or the operating system scales and crops it, so it can look different on different platforms.

<Image src="https://files.readme.io/6dc5ff97f973279aa54a518ac3ae41fbb1eee2809f91d15d87e711aeb4417fd3-image.png" align="center" width="80%" alt="Chrome settings section highlighted with the Big image field showing an uploaded image, next to browser preview tabs for Chrome and Firefox" />

<Callout icon="📘" theme="info">
  ### Note

  You can edit logo and big image directly in the editor when uploading (if it does not meet the requirements) or after uploading (the **Edit** button). After editing, the image is saved in `PNG` format.
</Callout>

<Image src="https://files.readme.io/00b60baf16882d4ded5fc2dd4d041d35fce3b6250684e341588a61ccc6292348-image.png" align="center" width="80%" alt="Change image editor with the Edit button highlighted and toolbar options such as Filter, Resize, Crop, Draw, and Text" />

2. **Button**. You can add one or two buttons with the following parameters:

* Title — the text on a button.
* Link.

<Image src="https://files.readme.io/eeb8b5882252c547d8bd59469c2619d9995c85b21e2c108e2d8bc3b5f9ade068-image09.png" align="center" width="80% " alt="Buttons toggle enabled with two button Title fields, New collection and All catalogue, underlined" />

### Additional Settings

Fill in the following fields:

* **Subscription categories**. Manage [subscription categories](https://docs.yespo.io/docs/how-use-subscription-category) to send messages to your contacts based on their preferences.
* **Time to Live (TTL)**. TTL — the period after which the message will not be displayed if it has not been delivered by this time. By default, it’s 1 day, but you can select other options.
* **Links**. Configure link settings for UTM tags.. <Anchor label="Learn more >" target="_blank" href="https://docs.yespo.io/docs/how-transfer-utm-parameter#/web-push-mobile-push-viber-app-inbox-telegram">Learn more ></Anchor>

<Image src="https://files.readme.io/285e706ffc624a91534f4a53beb4d9aa61deb62d371330c03f0884d935963109-image10.png" align="center" width="80% " alt="Additional settings panel highlighted showing Subscription categories, Linked workflows, Time to live, and Links options" />

### Multilingual Version (optional)

In our platform, you can create a multilingual version of any message. Click the **Globe icon** in the top panel, specify the default language, and add language versions. Fill each version with the content in the corresponding language. You can switch between versions within one template in one click.

<Image src="https://files.readme.io/2343ddea99d0e4a2e04a012ad35c9dc279fc7d533457ae118461340ee899d4c5-image11.png" align="center" width="80% " alt="Message editor top panel with the globe icon for language versions highlighted next to Save and exit and Create campaign buttons" />

[Learn more about multilanguage >](https://docs.yespo.io/docs/multilanguage-overview)

## Testing Message

You can test a message in two ways:

1. In the message editor, click the **TEST** button on the top panel.

<Image src="https://files.readme.io/3a0240d5d5f9b74861e4c59bf6f23b43ddba3b39e846a645d60cfe7b7392cc7d-image12.png" align="center" width="80% " alt="Message editor top panel with the TEST button highlighted next to Save and exit and Create campaign buttons" />

2. From the message list — open the menu with three dots to the right of the message name and select **Send test message**.

<Image src="https://files.readme.io/f43f0ef0b41249ced1e045a7366422a17a4b4de1b71fcb0ac89e2d4e8c1f93b2-image.png" align="center" width="80%" alt="Web Push message list with the three-dot menu open and Send test message highlighted" />

## Creating Campaign

1. Click on the **Create campaign** button.

<Image src="https://files.readme.io/9abe60bf68c1f9bfbff0201d039389284e32dc32ea285b0822d07798eebdee22-image14.png" align="center" width="80% " alt="Message editor top panel with the Create campaign button highlighted" />

2.  On the general checkout page:

* In the **Domain** section, select the domain you want to send the message to. If you want to send the campaign to all domains, select the appropriate option from the drop-down list.

<Image src="https://files.readme.io/a33f4578d90b2e698d6cf54ea7727e513fd89351ff81268fbbe6e6d871a9173f-image15.png" align="center" width="80% " alt="Campaign checkout Domain section with the domain dropdown open listing individual domains and an All domains option" />

The message will be on the screen until the contact clicks on it or closes it.  You can activate the switcher to hide notification automatically.

<Image src="https://files.readme.io/7026286a517c6d2bd24329c24ee723b939968d14fd904cd7b0a1e0cc90341a33-image16.png" align="center" width="80% " alt="Campaign checkout Domain section with the Hide notification automatically switcher highlighted" />

* In the Segments section, you can select segments to include or exclude from the campaign. 

<Image src="https://files.readme.io/d7c0c66fc7023cc03a024910b87b938863fb7b71faf6fd2e3ee545392a7b244c-image17.png" align="center" width="80% " alt="Campaign checkout Segments section with Select segments buttons for included and excluded segments highlighted" />

* See all the necessary information for verification: **Subscription categories**, **Message activity time**, **Links**, and **Button titles**.  You can see how the message will look on different operating systems:

  * Windows  – Chrome, Firefox browsers.
  * macOS – Chrome, Safari browsers.

<Image src="https://files.readme.io/b61e041b42aaf88c6d7c66cac33e8a7a4be4b230b377d565267e34ddcf9fe46c-image18.png" align="center" width="80% " alt="Campaign checkout summary with subscription categories, message activity time, links, and button titles, plus operating system preview tabs highlighted" />

* In the **Send options**, you can set the batching. Click the **Start immediately** button to launch the campaign. For a delayed start, select the **Schedule** button and set the date and time of sending.

<Image src="https://files.readme.io/39ff47229ecb34c562e95c58de604fd1c6a3cf4c80ac5b07de93d531d1bcdee2-image19.png" align="center" width="80% " alt="Campaign checkout Send options section with Batching set to As soon as possible and Schedule or Start immediately buttons" />

<br />