New studio: Set up your home page and menus

This article describes how you can set up the home page on and menu on the web app and mobile app.

The web app and mobile app both use the same event data. However, the home page and menu can be configured separately, leaving you to be flexible on what you want to include and in what order. Through the side menu item Pages, you can configure the contents of the home page on the tab Home and that of the bottom navigation, top or side menu on the tab Menu.

Please note you have to publish a release to make the changes visible to your attendees.

Home

On this tab, you can configure the first page attendees see when opening your app by adding tiles and widgets.

At the top of the page, you can toggle between different layouts for different device types: Mobile, Tablet, and Web. When you add a widget, it automatically becomes available across all three layouts. However, you have the flexibility to customize the order of these widgets to suit your needs - for instance, using the web app before the event and the mobile app during the event.

Configure general layout settings

Through the Settings button, you can choose a few general layout options for your app, such as the title, background colour and whether to use a gradient between the image and the background. You can also add a search icon in the app bar and select the search page that should open when the icon is clicked. 

Add page banner

The page banner can be set by clicking the Add page banner placeholder when none is set yet, or the Change image button that appears when hovering over the image. Recommended dimensions are 3000x3000px.

This image appears above the first widgets. The top part of the image will be covered with the status bar, event title and some icons so make sure to not put any important content there.

Add intro screen

Intro screens are shown before the home screen is opened. They are only available for the mobile app. The images can be configured by clicking the Add intro screens placeholder or the small thumbnail at the top left of the device preview. 

In the main modal, you can set a few general properties:

• Slide to show when page opens: when set to First, the first image on the left will be shown first to attendees. That means that they will most likely see that one more often, which is useful if you're selling different sponsor packages. Setting it to Random allows for a more equal distribution of image views. 
• Allow users to skip intro screens: this will add a small cross at the top right of the intro screens on the app, that allows skipping them and viewing the home page directly.

For each image, a few other properties are available that can be different per slide.

• Background color: the image is fit to the screen, and the background is filled up with what is set here.
• Slide duration: set the time the image will be displayed. You can choose from a range from 1 up to 9 seconds.
• Availability: you can set a specific period in which this intro page will appear. Use this for example when the image refers to a session and is no longer relevant when that session is over.

Add widgets

You can add different types of widgets to your landing page with the Add widget button at the top left.

The following widget types can be added:

• News feed: this is a section that shows all available news messages within this event. Please note that due to the fact that these can be many, the widget has a fixed position: at the bottom of the page on the mobile layout, and at the right on the tablet and desktop layout.
• Sponsor banner: this is a tile to which you can add an image and set a link to redirect to when the tile is clicked. It can for example be used to promote for example sponsors, sessions, or related events.

• Video: this widget will add a preview of a YouTube or Vimeo video as a tile on the landing page. It can be played from there.

• Happening now: for this widget, you need to select a Happening now page. The widget will then be a tile containing the first 2 sessions on this page and a button to view the entire page. 
• Navigation: this will add a 'navigation' section to your web and mobile app, to which you can add buttons. These buttons can be small, medium or large, and can display an icon and label, or an image. They can be linked to a page or object in your app or to an external URL.The buttons can be moved and reordered within the widget. You can add as many navigation widgets as you want, and you can add as many buttons in a widget as you want.

Rearrange widgets

Widgets can be easily rearranged by dragging them to their desired position. Make sure to click Save in the toolbar to save your changes. 

Hide or show widget titles

All widgets display a title that can be edited by clicking on it, or turned off by clicking the option Hide title from the More (...) menu. If it's hidden, it will still be displayed as greyed out in the studio, but will not be visible in your app.

Delete widgets

To delete a widget, choose the option Delete widget from the More (...) menu. Make sure to click Save in the toolbar to save your changes. 

Menu

On the Menu tab, you can set the menu of the web and kiosk app on the left and the bottom navigation of the mobile app on the right.

In the Web section you can choose between using a side menu or top menu. When using Side menu, you can configure it below Menu items. Click Add new to add another item or click the ... icon that appears when hovering over an existing one to edit it. For every item, you can choose an icon, label and a page or object to redirect to.

Important points to note:

• If you want to show a daily programme on the web app, it has to be a direct link from the side menu. A navigation page referring to multiple programmes will not work, as it will try to open the programme table in the side panel. So if you have a scientific and industry programme, create two items in the side menu.

• If a page contains a link to a URL, this link will always open in a new tab. 

When choosing Top menu, the same items as on the mobile app are used. The items for the Mobile bottom navigation menu can be set up the same way.

Below Web, there is another section Kiosk where you can configure a 'kiosk' version of the web app that doesn't have the options to sign in or favourite items. This can for example be used to embed on another website or to put on a display on-site. You can set it up the same way as the other menus. Optionally, you can add a password to it, for example if you only want to use it for displays on-site.