Header and footer

Header

Header block consists of:

Logo
Exhibitor name
Exhibitor city and country
Navigation menu with items: Analytics, Registration info, Security, Exhibitor settings, Sponsorship, Team members, Floor plan.
“Back to exhibitor list“ button
“Customer service“ button
“Actions” dropdown menu.

Sticky header

When a user scrolls down on an Exhibitor profile edit page, the “Back to exhibitor list“ button remains fixed in its position and the navigation menu scrolls down with all page content until it forms a line with the “Back to exhibitor list“ button. From this moment the page scrolls with this “navigation line“ fixed in the top of the screen. When the user scrolls the page back to the top position, all objects returns to their initial positions.

Each page/tab has the same footer. It is always attached to the bottom of the screen and consists just of “Cancel“ and “Save“ buttons. These buttons are disabled until any changes are made on the tab/page.

After some changes are made:

When the user clicks the “Cancel“ button, all changes are discarded and the buttons “Cancel“ and “Save“ become inactive.
When the user clicks the “Save“ button, all changes are saved and applied, and the buttons “Cancel“ and “Save“ become inactive.

Warning pop-up

When the user leaves a page/tab without saving changes, a warning pop-up will appear.

The warning pop-up consists of:

“Close“ button
“Warning” icon
Title “Do you want to leave without saving?“
Description “You have unsaved edits on this page. Leaving without saving will result in loss of changes.“
Buttons “Leave without saving“ and “Save сhanges“.

When the user clicks on the “Leave without saving“ button, no unsaved changes on the current tab will be saved or applied, the pop-up closes.

When the user clicks on the “Save сhanges“ button, all unsaved changes on the current tab are saved and applied, and the pop-up closes.

This warning mechanic perceives every tab of the profile edit page as a separate page, so the user should not switch between profile edit tabs without saving changes.

Some changes which would not be logical to save can be ignored by the warning mechanism, for example, language switcher

Logo

Empty state

When no exhibitor logo has been uploaded and Default Exhibitor Logo is not set in the admin panel at /admin/registration/esettings, a placeholder with the capitalized first letter of Exhibitor name (in English) on a colored background will display. Colors for placeholders are predefined in design and assigned to each exhibitor randomly. Once a color is assigned, it will be saved and used for this exhibitor every time.

Header background color is derived from the color of the logo placeholder with 10% opacity. Header background remains the same even after a logo image is uploaded.

A generated logo placeholder is shown on the frontend and in the admin panel in the saem way as an uploaded image.

Logo placeholderis not applied if Default Exhibitor Logo is set in exhibitor additional settings (/admin/registration/esettings).

Uploaded image

When a logo image is uploaded, it displays instead of placeholder, but header background color remains the same.

Logo image can’t be uploaded from the header – this can be done only on the “Registration info“ page.

Exhibitor name

Displays name of the Exhibitor.

Exhibitor name can’t be changed in the header – this can be done only on the “Registration info“ page/tab.

Exhibitor city and country

Displays city and country of Exhibitor.

Exhibitor city and country can’t be changed in the header – this can be done only on the “Registration info“ page.

This field can be empty or filled in partially depending on the presence of this information in exhibitor profile.

Every item leads to the respective page of exhibitor profile. Sponsorship, Team members and Floor plan functionality can be turned off for an exhibitor or category, but these items are always present in the navigation menu – there would be an empty state placeholder on the page of the turned off functionality.

“Back to exhibitor list“ button

This button always leads the user to the exhibitors list page (/admin/exhibitors/list).

“Customer service“ button

This button serves to login into the exhibitor’s profile on the frontend.

“Actions” dropdown menu

“Actions” dropdown menu contains:

Send agenda
Download agenda
Meeting wizard
Manage meetings
Lead questions
Export scanned badges
OTP
QR Code
Notes

“Actions” dropdown menu. Send agenda.

After the button is pressed, it sends agenda to the exhibitors email.

“Actions” dropdown menu. Download agenda.

After the button is pressed, it downloads agenda to the user’s current device.

“Actions” dropdown menu. Meeting wizard.

After the button is pressed, user is taken to the “Meeting wizard” page (/admin/visitors/meetingWizard/XXXXX).

“Actions” dropdown menu. Manage meetings.

After the button is pressed, user is taken to “Manage meetings” page (/admin/visitors/meetingManage/XXXXX).

“Actions” dropdown menu. Lead questions.

After the button is pressed, user is taken to “Custom Lead Questions” page (/admin/exhibitors/leadQuestions/XXXX). Page opens in current tab.

This menu item appears when the toggle “Custom Lead Questions“ for exhibitor in Module management (/admin/general/modules) in turned on.

“Actions” dropdown menu. Export scanned badges.

After the button is pressed, it downloads a file with scanned badges data to the user’s current device.

“Actions” dropdown menu. OTP.

After the button is pressed a one-time password is generated and shown in the message in the top part of the screen.

The OTP number can be copied manually by selecting the text or by pressing the “Copy“ button. When the user presses the “Copy“ button, an OTP number is added to the exchange buffer and the button changes text colour to green and the title to “✓ Copied“.

Unlike success messages for “Download agenda“, etc., this message doesn’t close by itself – it stays opened until the “Close“ button is pressed. This message doesn’t disable page scroll.

“Actions” dropdown menu. QR code.

When the user clicks the “QR code“ menu item, a pop-up “QR Code“ appears.

This pop-up consists of:

Header with pop-up name “QR code“ and “Close“ button
QR code of current exhibitor, placed in “SCAN ME“ block
Text line “Open your phone’s camera and point it at the QR code.“
“Download QR Code“ button.

When the user presses the “Close“ button, the pop-up closes.

When the user presses the “Download QR Code“ button, a .png image of the QR code downloads to the user’s current device.

“Actions” dropdown menu. Notes.

When the user presses on the “Notes“ menu item, a pop-up “Notes“ appears.

“Notes“ pop-up consists of:

Header with “Notes“ heading and “Close“ button
Container for added notes with horizontal separator line
Note that consists of admin’s (author) name and photo, note publication date, three-dots menu with options to delete and edit note;
Container for adding a note, which consists of admin’s photo, text input field and “Add note“ button, which becomes active after field is filled in with any text.

Note edit flow

When the user presses the “Edit” button in the note three-dots menu, the edited note becomes active, the three-dots menu disappears, and the “Save” and “Cancel” buttons appear under the editing note. User can make changes in note text that became active.

When the user presses the “Save“ button, the edited note changes, the note becomes inactive, the three-dots button appears and the “Save” and “Cancel” buttons disappear. Also, the “(Edited)“ mark appears when the note is published. When the user presses the “Cancel“ button, the edited note does not change, the note becomes inactive, the three-dots menu appears and the “Save” and “Cancel” buttons disappear.

Note deletion flow

When the user presses the “Delete“ button in the note three-dots menu, the respective note disappears together with the three-dots menu and button.