Learn how to design and customize the vFairs Badge Printing App using the App Builder to create a seamless check-in and badge printing experience for your event.
- Click on the Badge Printing App section to expand and select “App Builder”.
- This will take you to the App Builder page where you can view and edit the structure and visuals of your app.
- App Theme (Home Screen): This section is for you to configure your app's color theme, logo, and banner image.
- Branding Screen: This section is for you to design your custom self-serve screen.
App Theme (Home Screen)
- Click on the “App Theme” option in the sidebar on the right to expand this section.
- Click on the upload button to upload the logo for your event.
- Next, Upload your Event Thumbnail (the main banner image that appears on the home screen of your app) by clicking on the thumbnail upload button.
- Ensure that the dimensions of the image you upload are 1600x900 px.
- Scroll down to the section to select the App Title and App Colors.
- Enter/Select the following for your app:
- App Title (this will appear in big letters on the home screen).
- The primary color for the app
- The secondary color for the app
- The accent color for the app.
- Click on “Publish Changes” to save and apply the changes.
Branding screen
The branding screen is designed for self-service in the absence of staff. It allows attendees to easily walk up, search for themselves, scan their QR code, or even register if needed. They can then check in and collect their badge, all through a streamlined, self-serve process.
Steps to Design Your Branding Screen
- Click on the “Branding Screen” Tab to open the branding screen settings.
- This will take you to the next screen, where you’ll find a sidebar on the right with various options that allow you to create your own custom-designed self-serve screen.
- The branding Screen consists of 4 parts:
-
- Background Image
- Search User List image (If attendees click on this image, it will open the user list for them). Think of this like a button for the user list.
- Scan QR Code image (If attendees click on this image, it will open the QR code scanner for them to scan their QR code). Think of this like a button to access the scanner.
- Register Button Image (If attendees click on this image, it will open the registration form within the app).
-
- To upload and position images, click on each of the sections to expand them. This will reveal the upload and positioning options for each.
- You can drag and drop to resize and position them.
- You can also use the axis controls to set their coordinates for the images and control their dimensions.
- Once you have set up the relevant images, click on “Publish Changes” to save the changes made.