Creating a web push message

Article Topics

Introduction
- What is a web push notification
Before you start
- Requirements
Step-by-step
Frequently asked questions

With E-goi, you can send instant notifications to visitors on your website, capturing and retaining these people.

What is a web push notification?

Web push is an instant browser-based message sent to people who subscribe to receive it.

Web push works by first adding an invite to your site, asking people whether they want to be notified, for example, of important news and updates. Visitors who say "yes" to the invite will be stored in E-goi. When you send out a web push notification, subscribed visitors will see it in their own browser (or even as a system notification if they've closed their browser). Perfect to acquire leads and grow repeat customers!

Before you start

Requirements

Make sure your website is connected to E-goi through our Connected Sites. This is a crucial step to enable the integration and operation of web push notifications.
Ensure your site uses HTTPS, as web push notifications require a secure connection.
Bear in mind that each visitor will need to give permission in their own browser to receive your web push notifications.

Step-by-step

Connect your site to Connected Sites

1) Start by setting up Connected Sites. This step will allow you to connect E-goi to the website where you want to display the invite.

If you've integrated your site with E-goi using one of our plugins (such as WordPress) simply enable Connected Sites in the plugin (in case it's not enabled by default).

Create the invitation

1) Hit the "Collect" menu, hover the mouse pointer over "Web push apps", and click "Create".

2) Choose the "E-goi Domain" option and the contact list where visitors who accept the invite will be located.

Choosing the E-goi domain allows you to put your brand name in the URL and your visitors will see something like "yourbrand.egoiapp2.com". If you prefer the invite to show your site's domain instead of "egoiapp", you should follow these steps.

3) Then, type the name of your invite to customise its URL. It's usually the same as your site or brand name, but you can change it at will (it'll replace "example" as shown below).

Your custom URL will be shown here.

4) Design the invite and define its behaviour.

Select the type of invite and personalise the image, title, message, colors, and position.
Customise the opt-in and opt-out messages, and give the option to subscribe by email.
Define under what conditions you want to show the invite and associate add a tag to the visitors who subscribe.

6) Next, personalise the message confirming the subscription.

7) Finalise by choosing the website where the invite will be displayed and you're done.

8) Now simply go to your website using Chrome, Firefox, Opera or Safari and you should see your invite popping up.

The invitation usually appears like this. .

Important: If the invite appears and people accept it, but the invite keeps popping up or they don't receive web push messages, they should check their browser and device permissions. If they're using an iPhone or iPad, they should also check they added your site to their Home Screen before accepting your notifications.

Create and send the web push notification

1) Hit the "Engage" menu, hover the mouse pointer over "Web push", and click "Create".

2) A window will pop up. Choose "Web push", pick the website which will send your message, hit "Broadcast" and then "Next".

3) Enter your message title and click "Next".

4) Then choose how you'd like to add the link to your web push message - it can by your own URL or a landing page created in E-goi.

5) Now just type in your message text (you'll see a preview on the right-hand side). Under "Message link", you'll see the site or page address where people will be taken to when clicking through your message and then select a picture and logo to make it snazzy.

6) Under Advanced options, you can also:

Use a button for the message link instead of just a link.
Important: Some browsers, such as Firefox may not be fully compatible with the button.
Limit message display to a specific number of hours or days. Your message will only be shown for the duration you set here.
This setting, also known as "TTL (time to live)" is perfect to engage people (eg. flash-promos, time-limited abandoned carts, service maintenances, etc.).

7) When you're done, hit "Next" and send your web push message out as you would any other E-goi campaign.

Important: Whether notifications are displayed to your contacts depends on the browser and device they use. Browsers such as Chrome may limit, silence or block notifications they see as repetitive, intrusive or that your contacts rarely interact with. Avoid sending too many messages and go for timely, relevant notifications with an engaging call-to-action.

Sending web push notifications using your own domain

By default, web push messages display E-goi's domain, but you can have it show your own URL.

You'll need to xreate a custom Firebase web app for your domain. This is done outside E-goi. Ask a helping hand from your developers!

You'll be accessing Firebase, a Google feature to easily create a web app with your website domain. There you'll get a code snippet and a keyfile for your custom web app.

Using your own domain helps provide a more consistent experience for visitors, because the invite and notifications are associated with your website domain. On iPhone and iPad, this setup is especially important, as web push notifications depend on the web app associated with your own site.

1) Head over to https://firebase.google.com/ and click Go to console on the upper right corner.

2) Hit Create a project. Enter your project name and choose the settings that best suit your needs.

3) These will be saved in your project. You'll be taken to a dashboard, where you should click the < / > symbol to create a web app within the project.

4) Type in a name for your web app and hit Register app. Scroll all the way down and click Continue to the console.

5) You'll be back to the project dashboard. View the web app you just created by clicking the cog-shaped icon next to Project Overview.

6) You are now in the project settings. Scroll down to the SDK setup and configuration section and hit Config. This is the code snippet you'll need to paste into E-goi later.

7) Scroll up the project settings page and click the Service accounts tab. Then hit Generate new private key. This will pull up a keyfile which you'll need to add to E-goi in the next step.

If later on you need to access your Firebase projects, go to https://console.firebase.google.com/.

8) Once you have your web app created, go to your E-goi account. This is where you'll be adding the code snippet and keyfile you generated above. Click the Collect menu and hit Web push apps.

9) Then click Custom domain and choose the contact list your web push subscribers will be fed into.

10) Type in your site URL, paste the code snippet and upload the private keyfile.

Be sure to paste in just the snippet of code between curly brackets { }. The words before the colon should also be enclosed in quotes, as shown below.

11) Now upload an image for your web push invite.

12) Proceed with creating the web push invite as usual. When E-goi provides you the invite code to paste on your site, keep this in mind:

Service worker file: Place it in your site's root folder (you'll need to log into your hosting service to do this).
Code: Same location as where you paste Google Analytics tracking codes. This will usually be your site's footer HTML.
Icon code: If you've opted for a custom invite above, add this snippet to the element ID or tag in your site where the icon will appear.

Automatically publishing RSS content across web push messages

Got an RSS feed for your website or blog? You can have E-goi plug it automatically into a web push campaign and deliver it straight to your subscribers!

Example: Your news website includes an RSS feed. Whenever you publish a new article on your site, it'll be added to the RSS, which E-goi will fetch and immediately send to your web push subscribers as a "Breaking news!" notification.

1) Head over the Engage menu, hover the mouse pointer over Web push, and hit Create.

2) Then click RSS and Next.

3) Create your RSS-based web push campaign:

Choose the campaign title: This is an internal title, just for your own reference.
Type your RSS feed address: You can also just type the site the RSS feed is hosted at. Either way, remember to start with "https://".
Type in the message title: Such as "Breaking news".
Edit the content of your message: It automatically includes the RSS code to pull the content of your feed, but you can customise your message by using our RSS language.

4) Once it's finished, click Next.

5) Set how it'll be published: Every time the RSS has a new post or Periodically (how often, which day and time). Then click Next.

6) Confirm your campaign and hit Activate.

Subsequently editing your RSS-based web push campaign

1) Head over the Campaigns menu and click Automation.

2) Select RSS, among the left-handed options.

3) Go to the search bar and apply a filter by channel, choosing Web push.

4) Then find the campaign and edit it as you like

Frequently asked questions

Can I use a floating icon as my invite instead of a window?

Yes. The good thing about this is that your invite icon will be visible at all times, even when scrolling up and down the page:

To enable it, just choose "As a floating icon" when setting your invite up. The right-hand side preview will display your change:

Will my invite and web push messages pop up on major browsers?

Yes. The invite will be displayed on all webpush-compatible desktop browsers (ie. Chrome, Firefox, Opera and Safari) as long as people aren't browsing anonymously.

Once people accept your invite, any time you then send out a web push message using E-goi, it'll slide in immediately on their screen regardless of the site they're browsing - and will be shown as a system notification even if they've closed their browser, as long as their browser and computer permissions allow web push notifications.

Browser limitations

If the browser of your contact is closed when the web push message is sent out, the message will still be displayed to the contact but the browser may not open its link straight away when clicked. This behaviour depends on the contact's specific browser, security policies and the operating system's security protocols.

Each browser can also manage notifications differently. For example, if your site sends a lot of web push notifications which people don't interact with, some browsers may reduce their visibility, silence them or block future notifications.

Important: In incognito browsing, your invite and web push notifications won't work properly, as the browser session doesn't keep the required data.

What permissions do my contacts need to give to receive my web push notifications?

It depends on the browser and device each of your contacts use. For them to see your web push notifications, the following must happen:

On your site
- When a contact (ie a site visitor) sees the invite on your site to receive web push notifications, they need to accept it by clicking "yes".
In the contact's browser
- Site notifications are enabled in the browser's general settings.
- Your site is in the list of sites allowed to send web push notifications and is not in the list of blocked sites.
On the contact's device
- The browser has permission to show web push notifications on the contact's computer, smartphone or tablet.
- Modes such as Do Not Disturb, Focus, battery saver or background restrictions are configured so they do not block notifications.
On the contact's iPhone/iPad
- The iOS or iPadOS notification settings are configured to accept notifications from web apps.
- The contact added your site to the Home Screen as a web app before accepting the site's web push invite.

Checking notifications in Chrome

Open Chrome.
Tap the three vertical dots and go to Settings.
Go to Site settings and then Notifications.
Confirm that notifications are enabled.
Check whether your site is under Allowed and not under Blocked.

Checking notifications in Firefox

Open Firefox.
Tap the three vertical dots and go to Settings.
Go to Site permissions.
Check whether notifications are allowed for your site.

Checking notifications in Edge

Open Edge.
Go to Settings.
Go to Privacy, search, and services and then Site permissions.
Choose the site and confirm that the Notifications permission is enabled.

Checking notifications on Android

Open Android Settings.
Go to Apps.
Choose the browser used on the device, such as Chrome, Firefox, Edge or Opera.
Go to Notifications.
Confirm that the browser allows notifications.

Checking notifications on a computer

In the browser used to navigate to your site, click the lock icon (or information icon) next to the site address.
Confirm that the Notifications permission is set to Allow.
If it is set to Block, change it to Allow or remove the permission so the site's web push invite can appear again.
In the computer settings (eg. Windows), also confirm that the browser can show notifications.

Example: A contact using an Android smartphone may have accepted your site's invite in Chrome, but their web push notifications are disabled in their general Android settings. If this happens, even if your notification is sent to the contact, their device won't it to be shown.

Unblocking browser notifications

If a contact has ever blocked notifications from your site, their browser may never display your web push invite even if the person visits the site again. In this case, the contact will need to unblock your site manually:

Chrome

Open the site in Chrome.
Click the lock icon (or information icon) next to the site address.
Go to your site permissions.
Look for Notifications.
Change Block to Allow or remove the permission so the web push invite can appear on the site again.

Firefox

Open the site in Firefox.
Click the permissions icon next to your site address.
Remove or change the notification permission.
Visit your site and accept the web push invite again.

Safari on desktop

Open Safari.
Go to Settings or Preferences.
Go to Websites and then Notifications.
Find your site and confirm it is allowed.

Important: If the contact clears their browser data, changes browser or uses another device, they may need to accept your web push invite again.

iPhone or iPad

Open the site in Safari.
Tap the Share button.
Choose Add to Home Screen.
Confirm that your site has been added to the Home Screen.
Open your site using the new icon created on the Home Screen.
Accept your site's web push invite.
Go to Settings and then Notifications and confirm that the web app has notifications allowed.

Will my invite and web push messages messages pop up on mobile?

Yes - with some caveats though.

Android

On Android, web push notifications can appear in compatible browsers, such as Chrome, Firefox, Edge or Opera, as long as the visitor has accepted the invite and has notification permissions enabled in both the browser and Android itself.

Most Android devices (such as Samsung, Xiaomi or Google) only allow up to 24 active web push notifications at the same time on a browser.

If the browser reaches the notification limit, any new web push may not show up, as Android will discard it. In case the user clears their notifications, only the next ones you send will be shown.
Already discarded notifications can only be seen if the user has Notification History enabled on their Android.
If browser notifications are blocked in Android settings, the web push may also not appear.

Important: Don't swamp users with too many web push notifications in a short time. Always be sure your notification is important and engaging enough to be clicked right away, which helps prevent notifications from accumulating in the browser and supports a healthier interaction reputation.

IPhone and iPad

Web push notifications are fully supported as long as you keep in mind the following.

You must:

Set your web push app in E-goi to use your own domain via Firebase config.
Add a Firebase-generated manifest.json file to your site's root folder.

Your site visitors must:

Ensure their iOS or iPadOS is up to at least version 16.4.
Open the site in Safari.
Add your site to their iPhone or iPad's Home Screen before accepting your web push invite (try encouraging your iPhone and iPad visitors to do it!).
After adding the site to the Home Screen, open it using the icon that was created, as if it were an app.
Accept the web push invite inside that web app.
After accepting, go to Settings > Notifications and confirm that the web app has notifications allowed.
Use Safari as their main browser, ensuring the "Request desktop site" option is not set to "Always".

Example: If someone uses iPhone and accepts the invite directly in Safari, but hasn't added your site to their Home Screen as a web app, the notifications won't be displayed.

How to improve web push results?

Show up at the right time: It's important for the invite (when people subscribe) and also for the messages you send.
- Determine what will trigger the invitation and under what circumstances. For example, it's to be shown after a certain period of time and once a day. If you prefer, you can also choose an invite with an interactive icon to give your visitors more freedom to register themselves.
- Limit the message view so that it can only be received for a certain length of time. For example, if your goal is to promote flash discounts for two days, it's important for the message to only be available during that time so that it remains clear and relevant.
Increase your chances of being seen: The invitation appears in browsers that accept web push (Chrome, Firefox, Opera and Safari), as long as permissions are enabled in the browser and device.
Avoid being intrusive: Too many sends, low-relevance messages or low interaction may lead some browsers to reduce, silence or block notifications from the site. Prioritise useful, well-spaced messages with a clear value proposition.
Make the most of traffic peaks: Are your contacts usually online during working hours? What about on Sunday evenings? Do you have audiences that behave differently? Get to know your contact base, segment it, and send web push messages at a time that can generate the most impact.
Enable email subscriptions: This way, you will get a second chance to obtain contacts in the event that people don't want to receive web push notifications. Remember tag them so that you can target these contacts more easily in the future.
Personalise your messages: How about beginning your message with a "Hi Mary (...)" or using other relevant and specific information?
All you need to do is have the data in fields from your contact list and use our merge codes in your message.
In addition, you can also capture the attention of your subscribers by using images that enhance your message, rather than just using your brand logo.
Encourage action: Try to send direct, relevant, and time-limited messages. Using just one call to action often yields better results. Also ensure that the landing page contains the key elements to achieve your goal.
Recover abandoned carts: Ideal for those who need a solution that is both easy to implement and more effective at conversion.