Skip to content
English
  • There are no suggestions because the search field is empty.

How to customize the guest app: widgets

Overview

The Customize app screen is where you edit and customize the guest app front page. The editing menu, which is located on the left side of the screen, is divided into two sections:

  1. General settings. This is where you set up the design for key elements of the guest app: the header, the menu, the user profile, and the general style of buttons and other transversal elements across the guest app. Follow this step-by-step guide to learn how to set up General settings.
  2. Widgets. This is where you set up the content of the guest app front page by adding new widgets and setting up their specific content and design. After uploading and configuring your features in the Content section, you use the Widgets section to decide which content will be visible on the front page. You fully customize the front page design and content using the widget design system to create a personalized and branded experience for your guests. This article walks you through the process of adding and configuring the different types of widgets available.

Before getting started

Before working with widgets, make sure you have the following:

  • Access to the CMS: My app > Customize app.
  • Content: Ensure all necessary content (services, activities, menus, etc.) has been uploaded and configured in the respective features within the Content section.
  • Design plan: Have a clear idea of which content you want to prioritize and make visible on the app's front page.

Step by step guide

Step 1: Choose which content to make visible on the guest app

After uploading content and setting up your features in the Content section, from the My app section decide which content will be visible on the front page. You fully customize the guest app's front page design and content using the widget design system. To design and make content visible on the guest app, you have different widgets available. Keep the following points in mind:

  • As you add new widgets, they will be placed on the left side under the Widgets section.
  • You can change the order of the widgets by dragging and dropping each widget to the desired position within the widget order.
  • Each widget has a different configuration screen, but the setup logic is the same: you first choose the data source, and then you define the design.
  • All widgets have a toggle button in the upper right corner, which you can use to choose whether to show or hide the widget on the guest app.

The available widgets are divided into five groups:

1. Separator widgets

Headline widget: Helps to differentiate one section from another by displaying a customizable text title.

  1. Go to Customize app > Edit app > Add widget (+ icon).
  2. Select Headline.
  3. Enter the text for the headline.
  4. Select the preferred font size and underline style.
  5. Choose a color (primary or custom color).
  6. Click Save changes.

Separator widget: Creates visual space between widgets with the option to include a dividing line.

  1. Go to Customize app > Edit app > Add widget (+ icon).
  2. Select Separator.
  3. Change the separation size (in pixels).
  4. Choose a color for the line (optional).
  5. Click Save changes.

2. Content widgets

Dynamic content widget: Displays rotating content (menus, offers, booking options).

  1. Go to Customize app > Edit app > Add widget (+ icon).
  2. Select Content.
  3. Choose the Content type.
  4. Customize design: title, action text, and cards orientation.
  5. Choose the image style: if showing a subtitle and what type.
  6. Click Save changes.

Grid widget: Displays multiple items in a structured layout.

  1. Go to Customize app > Edit app > Add widget (+ icon).
  2. Select Grid.
  3. Choose if you want a title or action text.
  4. Click Save changes.

Calendar widget: Shows your next 3 activities in a calendar view.

  1. Go to Customize app > Edit app > Add widget (+ icon).
  2. Select Calendar.
  3. Choose a calendar that you have already set up in your CMS as the data source.
  4. Decide whether to display a title and enter the text for it.
  5. Determine the action text for viewing the full calendar.
  6. Click Save changes.

Highlights widget: Shows highlighted content in an horizontal slider with image, title, subtitle, and a call-to-action button.

  1. Go to Customize app > Edit app > Add widget (+ icon).
  2. Select Highlights.
  3. Select the Content to link.
  4. Add an image.
  5. Customize design: title, subtitle, button text, and button color.
  6. Click Save changes.

Request widget: Displays a list of products or services that guests can request (like amenities or housekeeping) or a list of issues to report.

  1. Go to Customize app > Edit app > Add widget (+ icon).
  2. Select Requests.
  3. Choose the data source: Amenities, Issues, or Housekeeping.
  4. Decide whether to display a title and enter the text for it.
  5. Determine the action text for viewing all options for a request.
  6. Click Save changes.

Shortcut widget: Shows up to 3 buttons with icon and text that link to any section in the app.

  1. Go to Customize app > Edit app > Add widget (+ icon).
  2. Select Shortcuts.
  3. Click Add and select the content.
  4. Add an image, title, and background color.
  5. Click Save changes.

Video widget: Shows a card with a clickable autoplay video.

  1. Go to Customize app > Edit app > Add widget (+ icon).
  2. Select Video.
  3. Input the video URL.
  4. Choose the Content source: Hotel, Corporate, or URL.
  5. Click Save changes.

Note: This widget only allows a direct URL link to an actual video file uploaded to a server (not YouTube, Vimeo, etc.).

3. Interaction widgets

Upcoming Activity widget: Displays the guest's next scheduled activity, such as a reservation, request, order or activity.

  1. Go to Customize app > Edit app > Add widget (+ icon).
  2. Select Upcoming activity.
  3. Customize the widget by adding a title (e.g., "Your next activity").
  4. Click Save changes.

Guest Information widget: Displays the guest's name and stay dates, and includes a direct link to complete the hotel check-in. This widget only appears when the user is logged into the guest app.

  1. Go to Customize app > Edit app > Add widget (+ icon).
  2. Select Guest Information.
  3. Design the widget by customizing the text color and background color.
  4. Choose to show an image (optional).
  5. Choose to show the check-in button (optional).
  6. Click Save changes.

4. Direct links widgets

Banner widget: Shows a banner-style card with image or video, title, subtitle, and call to action link.

  1. Go to Customize app > Edit app > Add widget (+ icon).
  2. Select Banner.
  3. Select the Content to link.
  4. Customize design: banner type, image, title and button text and color.
  5. Click Save changes.

Button widget: Shows a button with customizable text and colors, linking to any section or external URL.

  1. Go to Customize app > Edit app > Add widget (+ icon).
  2. Select Button.
  3. Choose the Content source: Hotel, Corporate, or URL.
  4. Select the content item or input the external link.
  5. Define the Button text.
  6. Set the button Background color (Use main color or a custom color).
  7. Set the Button text color.
  8. Choose whether the Button width fits content (optional).
  9. Click Save changes.

5. Footer widgets

Shortcut widget: Shows up to 3 buttons with icon and text that link to any section in the app.

  1. Go to Customize app > Edit app > Add widget (+ icon).
  2. Select Shortcuts.
  3. Click Add and select the restaurant or list to link.
  4. Add an image, title, and background color.
  5. Set widget visibility.
  6. Click Save changes.

Floating bubble: A button that remains visible at the bottom right of the screen, even while the guest scrolls.

  1. Go to Customize app > Edit app > Add widget (+ icon).
  2. Select Floating bubble.
  3. Choose the Content source: Hotel, Corporate, or URL.
  4. Select the content item or input the external link.
  5. Select the Icon image to be displayed on the bubble.
  6. Set the Button color (Use main color or a custom color).
  7. Click Save changes.

Step 2: Review the draft design and publish changes

It is important to perform a final review before publishing the design and content of the guest app front page.

  1. Review the draft: Scan the internal QR code to perform a complete navigation and functionality test of your design.

  2. Publish changes: To publish the final design, click the Publish changes button.

    Note: Once the changes are published, you will not be able to go back to the previous version.

Next steps

Once your guest app and its front page are ready, you can start sharing access links and QR codes with guests across various points in the hotel. Learn more about how to promote your guest app with this step-by-step guide.

Need further assistance?

If you have additional questions or require further assistance:

  • Contact us via live chat
  • Send a ticket to our Support team
  • Visit STAY Academy, our training platform.