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. 

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.

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? 

Home screens have an additional advantage over basic custom views in that they have widgets, which are dynamic content areas that are used for example to show upcoming sessions, the activity feed, or rotating banners. 

1. Drag the banner widget onto your home screen (there can only be one banner widget on each home screen)
   
2. In Conference App Builder > Design > Now / Alerts> 
   1. upload a banner and set a time frame when it 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.
   2. click the publish proof button in the Now / Alerts page so you'll later be able to see it appear in the home screen preview
3. Go back to Conference App Builder > Design > Home Screens and preview your home screen with the ad showing
4. Double check the Conference App Builder > Settings > App Settings if rotation must be toggled ON

How do I use custom fonts for text?

1. In Conference App Builder >Design > Home Screens > choose either the blue  App Home Screen button or the Planner Home and then select the blue Edit  button.
2. Drag a Paragraph object into one of the layouts
   
3. Hover over the object where you’ve added it to your home screen > select the Pencil icon in the upper right.
   
4. Add your text.
   
5. Select the <> menu button, which changes the view to the HTML source
   
6. You will see paragraph tags — <p> and </p> — surrounding the content you’ve typed.
7. If you’d like an entire paragraph to appear in your chosen font:
   1. Click after the p in the paragraph tag at the beginning of that line
   2. Type style="font-family:arial black" where arial black is an example of a web-safe font family.
8. If you’d like just a portion of the line to appear in your chosen font:
   1. Click before the first word you’d like to change the font for.
   2. Add the text <span style="font-family:arial black"> where arial black is an example of a web-safe font family.
   3. Click after the last word you’d like to change the font for.
   4. Add the text </span>
9. You can use any web-safe font family. For more information and a list of these fonts, please refer to this article.
   
10. Click the <> button again to return to the paragraph view to see your text in the font you've chosen.
    
11. Click Done in the lower right
    

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