Introduction to the CMS

Introduction to the CMS

In this tutorial we show you what you need to know before you get started with the dedicated CMS of the Vaya Visitor App. After going through this introductory tutorial, you'll be well prepared to successfully manage your app's content.

Contents of this page:

Your event, your configuration
Buckets
Content
Adding components
Page types
Menu icons
Images
App preview

 

Your event, your configuration

The Vaya Visitor App is flexible. This means that the configuration of the app by our specialist is tailored to your event. The CMS for your app will therefore differ from the examples you see in this tutorial. Not only the names and icons will be different, but also the layout of the menu. The back-end of the Invitado demo app looks like this:

 

Buckets

To start with the most difficult part: within Vaya we distinguish Buckets and Pages. Buckets are filtered or unfiltered lists that can be displayed on the Pages (the pages that can be seen in the app). You won't have to work with it much, so don't be put off if you don't fully understand it, but it's good to know for the context.

There are three types of Buckets for specific use available, each with its own characteristics:

• Companies (for sponsors and exhibitors)
• Persons (for speakers and artists)
• Program items (for sessions within your program)

In addition, there is the Objects bucket, which can be used more broadly, comparable to a general text page.

Connections can be made between the different Buckets. For example, on the page of a session, the corresponding speaker can be displayed, and vice versa. These relationships can be defined globally in the Buckets (we do this for you) and then filled in by you per underlying item (company, person, program component) in the detail pages via the section marked blue in the image above. In addition, connections can also be made with the guest list. For example, to show the stand staff on an exhibitors page.

For each Bucket it can be set whether it is possible for users of the app to bookmark or rate the underlying items, and whether the result of the ratings is shared with the users of the app.

The contents of the Buckets can be synchronized with the data in Invitado's Puerto Registration System. In that case, Puerto is the central source in which any changes must be made.

The most important thing you need to know: Content is managed under the heading Content (blue), settings can be found in the red marked section. 

 

Content

Within the blue marked Content section, there are the Pages that form your app's menu on the one hand, and the (child) items of the buckets defined for your app on the other hand. For example: the overarching page for your exhibitors can be found under Pages, the various detailed pages (for example those of exhibitor Invitado) can in the speficic case be found under 'Exposanten' in the Content section:

The order of the Pages also determines the order in the app's menu. You can adjust this order with the arrows on the right in the overview of the pages. For each page you can indicate whether anyone viewing the app can see the content (public content), or whether a user must be logged in (protected content). If the entire app is shielded, this distinction obviously does not apply.

One of the pages can be marked as your app's homepage. A shortcut can be created for a maximum of 4 pages. These shortcuts appear as buttons in the footer of the app. In the example below there are three:

 

You set both the starting page and the footer buttons via the Settings, at the very bottom of the CMS page Pages.

 

Adding components

Items, pages or filters… Whatever you want to add to the CMS, you always do this with the plus button in the black circle.

Within the CMS, Name always determines the display in the back-end, and Title determines the display in the app. It can be useful for your own overview to use a numbering within the names, for example in your program overview.

In the following example we add a program item, and enter the Name, Title, Subtitle and (optional) location:

 

Page types

If you create a new page, you will see a pull down with available page types. We'll walk you through them here.

Content

• Home – The opening page of the app. See the separate tutorial for this.
• Iframe – This allows an external website, such as a dynamic floor plan, to be embedded and displayed as a page within the app.
• Image / floor plan – This allows an image to be displayed, such as a floorplan with zoom function and the option to make it clickable.
• Text – A flexible page for all possible content, with an image, text and a button with a link to an external URL.

Overviews

• List of child pages – This allows an overview of child pages to be shown.
• Tabs or child pages – An intermediate page on which various child pages are displayed in the form of tabs.
• List of bucket items – This allows the (filtered or not) contents of a bucket to be displayed.
• List of program items – Allows you to create a program page.
• List of guests - This allows a list of participants (filtered or not) to be displayed.
• List of matches - The page where the app user's match results are shown.
• List of business cards - This page allows app users to quickly connect via QR code. Scanned contacts can be added to contact list (phone) and address book (email)

System

• Bookmarks – An overview of the items saved by the user using the bookmark function.
• Chats – The user's chats.
• E-ticket – The user's e-ticket.
• Meetings – This page shows an overview of open, accepted and canceled appointments.
• Notifications – On this page the user will find an overview of the notifications received.
• Personal program – Overview of the sessions for which the user has registered.
• QR scanner – An in-app QR scanner, to be used for the QR Quest, for instance
• Social timeline – Interactive page on which logged in participants post posts and can like or comment on other messages.
• Stamps – An overview of QR Quest scanpoints (scanned and yet to be scanned)

Advanced

• Personalized iframe - Technical page that allows displaying a personalized iframe per guest.
• Redirection - Technical page users can be redirected to pages available within the app in a differentiated and automated manner.
• Transmisión – Technical page with which an (online) Transmisión event and the interaction within it are embedded for live interaction on location and/or online.
• Twig – Technical page on which different and personalized content can be shown to different groups of users.

 

Menu icons

You can provide the pages with icons for display in the menu of the app. There are more than 2000 of these available, and it is difficult to select from the pulldown in the CMS. We therefore recommend doing this via Google Fonts. In the CMS you will find a link to the available Google icons. Click on the link and find the icon you want to use. Then go back to the CMS and enter the name of the icon in the appropriate field. Use lowercase letters here and replace any spaces with 'underscores'.

In the following example we found a high five icon via the link above, which has the name 'Pan Tool'. We then select these in the CMS:

 

 

Images

You will find guidelines for the dimensions of the images in the CMS. These can be both JPG and PNG images, for best results we advice PNG. We distinguish two formats:

• 256 x 256 pixels: photos of speakers and logos. These square photos are placed in a circle in the app.
• 960 x 540 pixels: page headers.  

These are guidelines only, but keep in mind that the image can become grainy at lower resolutions, while the app can become slow at higher resolutions. The 16:9 aspect ratio for the header photos is also indicative. For a pleasant user experience, we recommend keeping this ratio constant.

 

App preview

With the orange colored button VIEW APP, at the left in the menu bar, you can view a current preview of the app in your browser. This preview opens in a new browser. If your browser asks for permission to open the vaya.invitado.nl pop-up, grant it.