Using the EventPilot Conference App Builder, you can build responsive custom views without knowing HTML. Use the guide below to learn the basics. 

What views can I build?

From the Design tab in the Conference App Builder, you can build your Home Screens for the native apps as well as a home screen for the online planner. In addition to home screens, you can create additional pages such as general info or any other kind of landing page with more information via Design > Custom Views. 

Buttons and images can be linked to different areas within the app or the planner. 

Use the Custom View builder to create intermediary landing pages to:

• Improve Navigation: Simplify navigation pathways for even the most complex meetings and balance the need for comprehensive functionality with the demand for ease of use
• Enhance Usability: Reduce cognitive load by presenting only the most relevant options on each screen.

HRS 2024 Best Practice Example

What are vertical and horizontal layouts? 

Think of a layout as a container for your content. You can nest layouts within layouts. The layouts are responsive so if you have two half width vertical containers next to each other on a wide screen, they switch to being stacked when the screen size is smaller. 

There are vertical and horizontal containers. Whenever you add new objects into a horizontal container, they are positioned horizontally next to each other with an automatic wrap to the next row if the objects don't all fit in the row. In a vertical container, objects are stacked on top of each other.

The vertical layout below contains the Search object and underneath a Horizontal Layout object. 

Within the Horizontal Layout object, 3 individual buttons are positioned horizontally next to each other on a mobile device.

What kind of objects can I add?

Use drag and drop to add available objects from the left into your layout.

Available Objects:

• Layouts (vertical and horizontal)
• Title
• Button
• Image
• Paragraph
• Search bar (global search)
• Empty space (to create spacing between vertically stacked objects or layouts)

Widgets

• Social Feed
• Rotating Banners
• Upcoming/Scheduled Sessions (this should always be included in your Home Screen)

In the screenshot example below, you could drag a Title object into the layout. Since it's a vertical layout, you can position above or below the Search object or further down below the horizontal layout with all the buttons.

Then click the Pencil icon to edit the object and fill in the available fields. 

Delete an object you don't need. Attention: be careful deleting - there is no undo option. 

Add titles, paragraph text, buttons (you can choose from over 100 icons), or images. Review available objects on the left.

How do I add my own image buttons? 

If you wish to use your own images instead of button objects, create a png image with transparencies max 150px by 150px at 72dpi for the the entire button including the text you want to display below the icon image. Ensure that the font is large enough to read and include any margins and padding in the image itself. 

1. Drag a horizontal layout into your main layout where you wish your image icons to appear 
2. Drag an Image object into the horizontal layout.
3. Click the pencil to edit the image object and upload your graphic, select a width (we recommend 100 pixels for 3 buttons in a row), enter a label, and select the action where you want the button to go.

Repeat these steps with all your images.

How do I add my own icons inside button objects?

When you use the built in button objects, you can choose an icon for the button from more than 100 graphics. You can also upload your own icon image into a button object.

An icon is a graphic representation that is displayed on a background color. When you create your icon image, use white color on a transparent background. Do not add margins or padding - the colored circle automatically places your icon in the center with sufficient padding to the edges of the circle. 

Do not add a background color or any text. The button object already contains the label for your button. 

Save your icon as a .png file no larger than 100x100px at 72dpi. 

Sample icon with transparent background within an image editing tool.

How do I display rotating banners on my home screens? 

1. Drag the banner widget onto your home screen
   
2. Select the widget to upload your banner graphics and choose actions
3. Ensure rotation is toggled ON
   1. Set a time frame when the graphic should be included in the rotation. Some organizations charge a higher price for any ads shown for a longer period of time versus ads that start to be shown later throughout the event.

The Banner widget is a global widget. This means you can use it in all of your custom views and any banners you have set up will automatically appear. You can make changes to the banner widget from any custom view. Those changes globally affect all instances of the banner widget across all your custom views where you are displaying the widget. 

How do I add a session link to an image? 

Watch the video below to see how you can easily link from an image to a specific session. 

Tips and Tricks

Can I create a glass effect? 

Yes, add a vertical or horizontal layout and set the background color to white. Edit the hex code of the background color and add one of the following codes at the end: 

1A for 10%

33 for 20%

40 for 25%

66 for 40%

80 for 50%

99 for 60%

B3 for 70%

BF for 75%

CC for 80%

E6 for 90%

The top layout containing just the white title is set to 20% (#FFFFFF33).

The horizontal layout containing the buttons is set to 75% (#FFFFFFBF).

Additional transparencies: 

• 10% use 1A
• 20% use 33
• 30% use 4D
• 40% use 66
• 50% use 80
• 60% use 99
• 70% use B3
• 80% use CC
• 90% use E6

What size should I design my background graphic at?

Image requirements: 

• Image size: max 800x800 pixels
• File size: under 50Kb (best if under 40Kb)
• File format: jpg or png

Use a simple graphic with only a small number of colors.

Important: 

• No text all your text must be added via paragraph or title objects
• Avoid photographs or gradients. Use simple geometric imagery to keep file sizes as small as possible
• No transparencies 
• Low contrast since navigational features scroll above the image. 

The graphic may be cropped depending on the screen size and the orientation of the device. Avoid any text in the graphic and high contrast.

What are the click numbers in the previews?

For buttons and icons, you visually see clicks completed by logged in users. These numbers do not display to your end users, only to you. If you are still preparing and testing your project, you can delete any test tracking data via Conference App Builder > Design > Home Screen