Learn how to build a custom home screen and configure content blocks.
It's important that you get participants engage by highlighting key content that they will need for the event. The Home Editor module in Backstage allows you to customize what appears on the home screen so that you can deliver key content directly to your participants as soon as they enter the app.
This is a step-by-step guide for customizing the home screen in your event app using layouts and content blocks.
Home Screen Layouts
Home screen layouts are the configuration and order of content blocks used in-app.
Your Default Layout
The first time the Home Editor module is opened in Backstage you will see the default Home menu that is available in every event. You can edit and configure that menu according to your event.
In order to configure the Home menu, you should remove or add new home blocks to it. To do that click on the Edit Layout and delete the rows you won't be using. To add new blocks, click on the + Add a row button at the bottom of the Home menu and select the block type you would wish to use.
Creating Multiple Layouts
You are not limited to only having one layout for all users throughout the entire event. Multiple layouts can be created for different use-cases, which will be reviewed in the "Using Conditional Layouts" section later on.
To create a new layout, click the "+ add" button below the "Home Editor" title. You'll be prompted to select a base configuration from the list of four preset configurations and the blank configuration to start the new layout from. You'll then have a new layout available in the layouts list.
Highlighting Key Content on the Home Screen
The home screen is the first thing that participants will see once they activate the event in-app. For that reason, it’s important that the key content for the event is highlighted front-and-center. Make sure to include content in the home screen that’s most important for the attendees to have a successful event and engage with the app most effectively. Note that you can rotate the content that appears on the home screen using conditional home screen layouts if the key content differs for different groups of participants or different time frames.
Editing a Layout
Layouts can be customized to include a combination of whichever content blocks in whatever order you would like them to appear. To edit a layout, choose the layout that you would like to edit from the list, and click the "Edit Layout" button. This will open the layout editor, where you can set the details of the layout.
The "Layout name" field is used to identify which layout is being worked on. Be sure to use differentiated layout names in order to keep track of which layout you are editing at any given time.
Adding and Removing Rows of Blocks
Rows of content blocks can be added to or removed from the layout as desired. To add a new row of content blocks, click the + Add a row button at the bottom of the layout or in the Row Options section. To remove a row of content blocks from the layout, click the recycle bin icon next to the row that you would like to remove. Upon clicking the "✓ done" button in the upper right-hand corner of the layout editor, these changes will be applied to the layout. Click the Save button to have your changes reflected in the home screen in-app.
Reordering Rows of Blocks
Rows of content blocks can be reordered in the layout as desired too. To change the order of the content blocks, mouse over the row of content blocks that you would like to move. The icon will appear in the upper right-hand corner of the row. Click on the icon and drag it to reorder the rows of content blocks. Once the content blocks have been reordered, click the "✓ done" button and then the "Save" button to have these changes reflected in the home screen in-app.
Using Conditional Layouts
Customized layouts can be set to appear only under certain circumstances. These layouts can be set to appear only during certain periods of the event, only during certain timeframes, only for certain participants based on the targeting rules, or only for certain device platforms. In order to set up a conditional for the layout, open the layout editor and click the "+ add" button under the "Show this layout only if" section. A list of options will then appear in the pop-up menu.
Layouts Based on Event Dates
Customized layouts can be set to appear during different periods of the event based on the event dates set in the "Event Settings" page found in the "Setup" menu in the upper right-hand corner of Backstage. The "At event" option will set the layout to appear only between the start date and end date of the event. The "Pre event" option will set the layout to appear only before the start date of the event. The "Post event" option will set the layout to appear only after the end date of the event.
These options are useful if you'd like to highlight different content prior to the event, during the event, and after the event.
Layouts Based on Timeframes
Customized layouts can be set to appear during specified timeframes. The "Timeframe" option will open a pop-up menu that asks for a specified start date and time and an end date and time. This option is useful if you would like to highlight different content on each day of the event. For example, you can highlight key content for Day 1 during that timeframe, followed by different key content for Day 2 during that timeframe, and so on throughout the event.
Layouts Based on Participant Targeting
Customized layouts can be set to appear for specific participants using targeting rules to specify the group who should see the layout. The "Target participant" option will open a pop-up menu that asks for a target or exception rule by which the content should be shown. For more information on how to use targets and exceptions to specify a participant group who should see the content, please refer to the "Creating Targets in Backstage" tip sheet.
This option is useful if you would like to highlight additional content for a specific group of people. For example, if you would like to include specific documents for the senior leadership team at the event, you can create a targeted layout meant only for them that includes content blocks that link to this content.
Layouts Based on Device Platform
Customized layouts can be set to appear for based on what device platform the app is being viewed on. The "Device Platform" option will open a pop-up menu with checkboxes for "Android", "iOS", and "Web App". Select the checkboxes for which platforms this customized layout should appear in.
This option is useful if you would like to link to outside apps that are platform-contingent. For example, if you would like to include a content block that links to an outside app in the App Store or Google Play, you can create customized layouts for each platform and have the content block link to the app listing in the App Store for iOS devices and Google Play for Android devices.
Content blocks are the individual content pieces that make up the home screen. These blocks can be configured in a variety of ways to reflect the different materials that are being included on the home screen.
Choosing Content Block Sizes
Content blocks come in four sizes: wide and short, wide and tall, narrow and short, and narrow and tall. Wide blocks take up the width of the device, while two narrow blocks also span the width of a device.
Setting Content Blocks to Display as Text Blocks or Image Blocks
Many of the content blocks, regardless of what content the block is linking to, can be displayed with either simple text in the block or with an image spread across the block. Those block types that allow for this option have been identified in the "Block Types" section of this tip sheet below.
Displaying Content Blocks as a Text Block
Content blocks can be set to display with only text by choosing the "display as text" option in the "Appearance" setting. Choosing this option will allow you to include title text, subtitle text, and body text. Each of these lines of text can be customized based on font size, font type, font color, and horizontal alignment by opening the drop-down menu for the corresponding text section that you would like to edit.
Text blocks can also have an image included on the left or right side of the block if desired. These are used as icons to identify what the block is more so than images to take up the entirety of the block. If these images are going to be used, they should be included as 200×200px .png files.
Displaying Content Blocks as an Image Block
Content blocks can be set to display with an image spanning the entirety of the content block by choosing the "display as image" option in the "Appearance" setting. Choosing this option will allow you to include an image in the "Image file" field as well as optional overlay text in the "Title text" field.
Images that will be used in an image block should be sized based on the size of the content block being used:
- Wide, short blocks created as 2000×400px .png images (or larger with a 10:2 aspect ratio)
- Wide, tall blocks created as 2000×800px .png images (or larger with a 10:4 aspect ratio)
- Narrow, short blocks created as 1000×400px .png images (or larger with a 5:2 aspect ratio) Recommended for use on tablets only
- Narrow, tall blocks created as 1000×800px .png images (or larger with a 5:4 aspect ratio) Recommended for use on tablets only
The overlay text can be included by entering text into the "Title text" field, and can be configured by opening the "Title" dropdown and customizing the font size, font type, font color, horizontal alignment, and vertical alignment.
There are a variety of content block types that can be used in building out a customized home screen.
This content block is used to display banner images on the home screen. This is default in all preset configurations and should generally appear at the top of any home screen. Please note that each home screen can only contain one banner content block.
The banner images field should contain at least two images, one for the landscape orientation of a device and another for the portrait orientation of a device. However, additional images can be added in for each orientation so that they appear as a series of images that participants can swipe through. If multiple images are being used for each orientation, the "Autosliding interval" field can be used to set the interval at which the photos will rotate on the home screen.
Landscape images should be created as 2000×500px .png files, while portrait images should be created as 1500×700px .png files. For more information on creating event banners and how those are used in the event branding, please refer to the "Branding Your App" tip sheet.
This content block is used to display a list of the next four upcoming sessions in the participant’s personalized agenda on the home screen, which the participant can swipe through. The color of the session titles can also be customized using the "Title color" field in the block editor.
This content block is used to display a static text message on the home screen. A title, subtitle, and body text can be added to the content block using the corresponding fields.
This content block is used to display a static image on the home screen. The image can have a text overlay, which is set by the "Title text" field.
This content block is used to link to a list that is available from the navigation menu. Options include, but are not limited to, the People list, the Speakers list, and the Messages Inbox list. This block can be displayed as either a text block or an image block.
This content block is used to add items such as Pages, features from the SpotMan menu, documents, particular sessions, feed, etc. In the placeholder under Item, select the one you would wish visible on the Home menu.
This content block is used to display an inbox on the home screen where all messages are listed in reverse time order, with the most recent message appearing at the top of the list and the oldest message appearing at the bottom of the list. There is also a View all button on this content block that brings the participant to their full Messages Inbox in-app. The content block can also be configured to show only private messages, only public messages, both, or only unread messages.
This content block is used to open the new message template in-app. The New Message content block can be configured to open with specific recipients already included in the new message, or with specific content already included in the message text field if desired. This block can be displayed as either a text block or an image block.
Link an external URL using this content block.
This content block is used to open the participant profile editor in-app, where participant's can edit the details of their profile. There is no customization required on this block, as the feature can only be included as-is.
This content block is used to open the Q&A submission screen in-app. If there are multiple Q&A interactive sessions created in the Q&A module in Backstage, the content block will open to the sub- menu listing out all of the available Q&A interactive sessions much like it would from the navigation menu. This block can be displayed as either a text block or an image block.
This content block is used to link to a form that has been created in the Forms module in Backstage. The item can be set to open once you select the form you would wish participants to complete. This block can be displayed as either a text block or an image block.
Forms to Complete
This content block is used to display the form inbox on the home screen where all forms are listed, with the most recent appearing at the top of the list and the oldest appearing at the bottom of the list.
This content block is used to open the default Word Cloud function. If there are multiple Word Cloud interactive sessions created in the Word Cloud module in Backstage, those should be added separately as follows: Generic item > Interactive sessions > the respective session. This block can be displayed as either a text block or an image block.
This content block is used to open the Voting selection screen in-app. If there are multiple Voting interactive sessions created in the Voting module in Backstage, those should be added separately as follows: Generic item > Interactive sessions > the respective session. This block can be displayed as either a text block or an image block.
Using Conditional Content Blocks
Much like layouts, content blocks can be set conditionally to only appear under certain circumstances. Please reference the "Using Conditional Layouts" section earlier in this tip sheet for more information on the options for how content blocks can be set conditionally.
Home Page in the App
You also have the option to the define the Home or Landing page in your event app. By default, this is the Home Menu, however, you can also change it to something more relevant to your case.
In order to change the landing page of the app, in Backstage go to Setup -> Event Settings and click on the "App Preferences" tab. In the dropdown menu just below "Item to launch", simply choose the new item (feature) that would serve as a home page in your app.
Once you save the changes, quit and re-open the app so that the new landing page will appear.