Creating a web push message

Article Topics

• Introduction
  • What is a web push notification
• Before you start
  • Requirements
• Step-by-step
  • Connect your site using Connected Sites
  • Create the invitation
  • Create and send the web push notification
  • Setting up web push notifications with your own domain
• Frequently asked questions
  • Icon position
  • Browser compatibility
  • iPad and iPhone compatibility
  • How to improve your results

 

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.
• Make sure you have a contact list in E-goi to manage the visitors who accept the invitations.

 

 

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 your site is integrated with one of our plugins like WordPress, it's very simple, as you just need to enable this option in the plugin with just one click.

 

 

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).

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 or Opera and you should see your invite popping up.

.

 

 

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 to make it snazzy. All set? Hit "Next" and send it out as you would any other E-goi campaign.

 

 

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.

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) You can optionally add a Safari Certificate if you'd like your web push notifications to be shown in Safari as well.

14) 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.

 

 

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. Your web push message will also slide in regardless of the site the user is browsing - and will be shown as a system notification even if they've closed their browser!

Mobile is a different kettle of fish though, as web push compatibility mostly depends on the browser and OS people use. 

 

Will my invite and web push messages messages pop up on iPhones and iPads?

Yes as long as the user's iPhone or iPad has been updated to the latest version. Some caveats though:

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.

The visitor must...

• Ensure their iPhone or iPad iOS or iPadOS is up to at least version 16.4.
• 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!).
• Use Safari as their main browser, ensuring the "Request desktop site" option is not set to "Always".

 

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 and Opera). Reach people using Safari too, just create a certificate and insert it when setting up the invitation that will appear on your site.
• 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.