Add to Home Screen Button

The Add to Home Screen button allows players to add your store directly to their device’s home screen for quick and easy access. Once the store is added to the home screen, the button will no longer appear when the player accesses the store from their home screen.

Note: The Add to Home Screen button is available only on mobile devices and tablets. Players will not see this option when accessing the store via desktop browsers.

Benefits

• Convenience: Players can access the store quickly without needing to open a browser.
• User Experience: Adds an app-like experience to the web store.

High Level Flow

1. Publisher Configures Add to Home Screen Button:
   The publisher configures the Add to Home Screen button in the Store Page within the Builder tab.
2. Publisher Configures Language Localization:
   The publisher enables language localization for the button text and popup instructions. This allows the publisher to provide localized instructions to players.
   Note: If a custom Button Image is used, the default text will be hidden, and localization will only apply to the popup instructions.
3. Player Opens Store:
   The button appears at the bottom left corner of the store screen on the player’s device.
4. Player Clicks the Button:
   When the player clicks the Add to Home Screen button, a pop-up appears based on the platform (iOS or Android).
5. Player Saves Store to Home Screen:
   The player is prompted to name the shortcut and save it based on the platform (iOS or Android).
6. Player Reopens Store via Home Screen:
   The player adds the store to their home screen and can now access it directly from there, just like an app. The Add to Home Screen button will no longer appear when the player opens the store from the home screen.

Publisher Journey

1. Navigate to the Builder tab:
   • Open the Builder tab in the publisher dashboard and make sure you are in General Settings in the header menu.
2. Choose Your Font:
   • Select the font for the button in the Font section. This will be the same font used in your webstore.

3. Navigate to the Store Page:
   • Navigate to the Store Page within the Builder Tab.
4. Customize Your Button:
   • Border and Text Color: Choose the colors for the button’s border and text. These settings apply only when no image is uploaded for the button.
   • Background Color: Set the background color for the button (overridden if a button image is uploaded).
   • Button Image (Optional): Upload a custom image for the button. If added, the custom image will replace the button's default text ("Add to Home Screen") and background color. To revert to the default settings, clear the Button Image field.
     Note: Ensure the image meets the Button Image Requirements mentioned below.
5. Set Icon Image and Store Title:
   • Icon Image: Upload an icon to represent your store in the native browser popup and modal window. This field is required and defaults to a placeholder if not configured.
     Note: Ensure the image meets the Icon Image Requirements mentioned below.
   • Store Title: Enter a title for the store, which will appear in the modal window and browser popup. This field is required and defaults to "Gaming Store" if not customized.

6. Save Changes:
   • Click Save to apply your configurations.

Image Size and Format Requirements

When configuring the Add to Home Screen button, ensure that the images meet the following requirements:

1. Icon Image:
   • Aspect Ratio: 1:1
   • Max Dimensions: 192px by 192px
   • Format: PNG or SVG
2. Button Image:
   • Aspect Ratio: 2:1
   • Minimum Dimensions: 122px width x 32px height
   • Format: PNG or JPEG

Note: Using images that do not meet these specifications may result in display issues or incorrect rendering.

Player Journey

The behavior of the Add to Home Screen button differs slightly depending on whether the player is using iOS or Android. Below are the platform-specific steps and how the player interacts with the button:

iOS:

1. The player clicks the Add to Home Screen button, and an instructional modal appears:
   "This site has app functionality. Add it to your Home Screen for easier access and better experience. Follow the instructions to add to your home screen."
2. The player follows the provided instructions to add the store to their home screen.
3. After adding the store, the button will no longer appear when accessed from the home screen.
4. To remove the store, the player can press and hold the app icon on their home screen and select the Remove App option.

Android:

1. The player clicks the Add to Home Screen button, triggering a native Android popup.
   • The player is prompted to name the shortcut and save it.
2. After adding the store, the button will no longer appear when accessed from the home screen.
3. To remove the store, the player can press and hold the app icon and drag it to the Remove or Delete option at the top of the screen.