Discover in this tutorial how to activate and configure a promotion so that users can install it as a Progressive Web App (PWA). This allows participants to easily access it from their device's home screen, as if it was a mobile app but without needing to download any actual application from an app store.

With this functionality, you can customize the name, icon, and colors of the app to match your brand. It also includes an installation banner that will be shown to users when they access the promotion from mobile devices.

This functionality is ideal for long-term promotions where users access frequently, such as loyalty cards, advent calendars, or long-term purchase receipt validation promotions.

Below, we will guide you step-by-step through the process of activating and configuring the PWA.

1. Introduction

2. How to activate the PWA option in your promotion

3. How to install the PWA on the user's device

   • How to install the PWA on iOS

   • How to install the PWA on Android

   • How to install the PWA on desktop

1. Introduction

A Progressive Web App (PWA) is a web application that users can install on their mobile devices just like a native app, allowing them to access the promotion quickly and easily, without the need to enter a URL every time or access from your website.

With this functionality, the administrator can turn the promotion into a progressive web app, so that users can install the promotion as an app on their mobile device or computer, thus providing easier and direct access to the promotion.

The administrator can customize the appearance of this app to match the look & feel of their brand and the design configured in the promotion itself. When accessing the promotion, users will see a link to install it as an app, and on mobile devices, a banner will appear inviting them to do so.

This option is particularly useful in campaigns where the user needs to access it frequently, such as a long-term promotion, advent calendars, multi-day betting pools, purchase ticket validation campaigns, etc.

Below, we explain how to configure your promotion so that it can be installed as a PWA.

2. How to activate the Progressive Web App option in your promotion 

To activate the functionality, access the Editor of the promotion > Utilities > Progressive Web App section and click on 'Enable Progressive Web App.

Once the functionality is activated, you will find the following customization options:

• App Icon: You can upload a 512x512px image as the web app icon, which will be saved and displayed on the user's device.
• App Name: The full name of the app. This will appear in the app’s installation and setup message.
• Short App Name: The short name of the app, which will be used when the full name is too long, for example, on the device's home screen.
• Theme Color: Select the desired main color of the app’s interface.
• Background Color: Select the desired background color of the app when it is opened.

3. How to install the PWA on the user's device 

Once the option is activated, users will be able to install the promotion on their devices. When users access the promotion from their mobile devices, they will see a banner inviting them to install the app, along with instructions on how to do so. It will also be possible to install the app on desktop or laptop computers.

3.1. How to install the PWA on iOS

1. The user must access the promotion in their mobile browser.
2. Once inside the browser, they must click the icon to the right of the URL.
3. With the menu expanded, select the "Add to Home Screen".
4. Confirm the PWA installation by clicking "Add".

Once completed, the user will see the app icon on their iPhone's home screen, ready for quick access.

3.2 How to install the PWA on Android

1. The user must first access the promotion from their mobile device's browser.
2. Access the browser menu (represented by three vertical dots in the top right corner),
   Click the "Add to Home Screen" option.
3. Finally, a message will appear asking if they want to install the app. They must confirm by clicking on "Install".

On compatible devices, the user will directly see the "Install" button when opening the promotion in their Android device's browser.

In this way, the app icon will appear on the users' home screen, making it easier to access the promotion whenever they want to access it again.

3.3. How to install the PWA on desktop

If the user wants to install the Progressive Web App (PWA) on their computer to easily access it from their desktop, they will be able to do so.

1. They will need to open a compatible browser (Chrome, Edge, etc.) and go to the promotion's URL.
2. In the browser's address bar, they will find an icon shaped like a screen or a "+" symbol (usually located to the right of the URL).
3. A message will appear asking if they want to install the app. They will need to confirm by clicking on "Install".
4. Automatically, the app will be added to their desktop, and they can access it directly from there, just like any other installed application on their computer.

Set up complete! Now the user will be able to quickly access the promotion from their PC in just one click.