1. STAY Academy
  2. First Steps
  3. Configure the Home Page of your App

How to configure your homepage with the GRID template

This template displays all sections as boxes. We can create up to 5 categories with 5 boxes each. We can also create and configure up to 3 shortcuts (shortcuts are always visible, even if we scroll up or down). We can also activate the welcome message and the floating bubble (which is also always visible). This type of frontpage allows vertical srolling. 

Route: MY APP > Select your product > CUSTOMIZE APP > GRID Homepage 

We can configure the following settings: 

  • Logotype: we can add our hotel’s logo in PNG format. The recommended size is 500x250 px. To upload an image, click on the image box and choose one from the gallery or from your computer. 
  • Background image: we can add a background image for the frontpage header in PNG format. The recommended size is 500x250 px. To upload an image, click on the image box and choose one from the gallery or from your computer.
  • Enable dark overlay: we can switch this option on if we want to activate an overlay that makes the background image darker. This is useful if our background image is too light.
  • Main color: we can configure our app's main color in hexadecimal format. The main color is displayed in all of the app's buttons and banners.

 

Optional Settings 

  • Shortcuts always on top: These shortcuts are always visible, even when the guest scrolls down. We can create up to 3. 
    • Shortcuts background color: introduce the main color for the shortcuts background in hexadecimal format. 
    • Icon: upload an image from your computer or choose one from the predefined images. 
    • Section: introduce the shortcut's name in all available languages by clicking on the flag icon. 
    • Section contents: choose the section we want to display once the guest clicks on the shortcut we are creating.
    • Link to URL: select this option if we want the shortcut to display a specific URL. The text box will automatically turn into a box where we can insert different URLs for each language. We can also select the “Open URL in browser” option, as there are URLs that cannot properly be displayed inside the Web app. 
  • Welcome Message: we can select this option if we want to make display a pop up with a Welcome message to all guests who open the app for the first time. Once we activate the switch, we can edit the message by selecting the “Edit welcome message” option. 
  • Floating bubble: This bubble will always be visible in the right bottom corner of the homepage. We need to link this bubble to the content section we want to display. We also have to introduce the color for our bubble in hexadecimal format. 
    • Bottom bubble background color: introduce the main color for the bubble in hexadecimal format. 
    • Section: introduce the floating bubble's name in all available languages by clicking on the flag icon. 
    • Section contents: choose the content to be displayed when the guest clicks on the bubble. 
    • Link to URL: select this option if we want the shortcut to display a specific URL. The text box will automatically turn into a box where we can insert different URLs for each language. We can also select the “Open URL in browser” option, as there are URLs that cannot properly be displayed inside the Web app.

Homepage sections and categories 

We can have up to 5 categories with 5 sections inside each one. 

  • How to add a new category:

Select the “Add new category” option to create a new one and add the category's name in all available languages by clicking on the flag icon. Once created, we can add up to 5 sections for each category. 

  • How to add a section inside a category:

Select the “Add section” option to create a new section and fill in the following fields: 

  • Icon: upload an image from your computer or choose one from the predefined images. 
  • Section: introduce the name of the section in all available languages by clicking on the flag icon. 
  • Section contents: choose the content to be displayed when the guest clicks on the shortcut. 
  • Link to URL: select this option if we want the bubble to display an specific URL. The text box will automatically turn into a box where we can insert the different URLs according to each language. We can also select the “Open URL in browser” option, as there are URLs that do not allow being displayed in the web app. 
  • Superimposed text: add a text if you want to highlight something on this section, like “Book here”. This text should be no longer than 12 characters. We have to introduce it in all languages available by clicking on the flag icon. We can add one superimposed text for each section created. 
  • How to delete a category:

Click on the "X" icon tab of the category we want to delete and confirm in the pop up window. All sections included will also be removed. 

  • How to modify the order of categories:

Use the left and right arrows to the right of the category's name to move the category up (left arrow) or down (right arrow) in the Front Page. All sections included will also be moved. 

  • How to delete a section: 

Click on the trash icon to the right of the section we want to delete and confirm in the pop up window. 

  • How to modify the order of sections 

Use the up and down arrows to modify the order of the sections.