The Event Branding page is where you will customize the overall look and feel of your event platform. This includes customization with your company fonts, brand colors and imagery as well as being able to add sponsor images and banner ads. This article will give you an overview of the Event Branding section of the organizer dashboard, and a step-by-step guide on how to use it.
In this article we will cover:
Understanding the Event Branding page
The Event Branding page holds all of the event colors, imagery, advertising, and banners for your event in a single place.
It has four sections:
- Colors, which is for the colors used across your event.
- Assets, which is for the imagery used across the entirety of the event.
- Header banners, which is where you create and manage the header banners across your event.
- Banner ads, which is where you create and manage the sidebar adverts across your event.
Colors
Primary event color
The primary event color field is where you can set the color theme for your event. This is the color that will be used for all primary buttons and many accents around the web and mobile platforms.
Primary text & icon color
The primary text & icon color field is used for text and icons that appear on primary buttons.
There are two ways of choosing the color:
1. Enter the hex code
If you have a specific brand color and you know the hex code, you can input this straight into the text box.
2. Use the color picker
You can also choose the color by clicking the colored square and selecting a color you would like to use.
Once you have either entered a valid hex code or chosen a color, the green box with the message: ‘Successfully updated primary event color’ will flash in the right upper corner to show that your selection has been successfully saved.
Once you have either entered a valid hex code or chosen a colour the box will flash green to show that your selection has been successfully saved.
Navigation and top bar menu - theming settings
The navigation and top bar menu theming settings allow users to change the color of the navigation bar and header bar, as well as the text and icon color within these menus. The Web Application Theme Color and the Theme Texts and Icon Color settings allow Grip users to have more customization control over the branding of their event.
- When updating the theme, there is a real-time preview for both the Web platform and mobile app of the changes made as seen below.
- Preview for Recommendations & Homepage is available too for the Web platform and mobile app.
- Login page customization is not available on mobile as mobile login page is set up on an Application level rather than on an Event level. For login screen customization on mobile, kindly reach out to your designated Grip contact person.
- A contrast warning will display when the platform theme color and the icon/font color do not provide enough contrast between the two.
Header & Sidebar Background Color
This color will be used for the background of headers, footers, and sidebars across the apps. It defaults to white if no custom color is configured.
Header & Sidebar Icon & Text Color
This color will be used for all text & icons in any areas that use the Header and sidebar Background Color. It defaults to dark grey if no custom color is configured.
Main Background Color
This color will be used for the background of the main content area across the apps. It defaults to light gray if no custom color is configured.
Main Text & Icon Color
This color will be used for all text & icons in any areas that are using the Main Background Color. It defaults to dark gray if no custom color is configured.
Content Container Background Color
This color will be used for the background of any content container across the web and mobile apps including profiles, sessions, and meetings. Cards, modals, dropdowns, and any other content area in the platform will have this background color. It defaults to white if no custom color is configured.
Content Container Text & Icon Color
This color will be used for all text & icons in any areas that are using the Content Container Background Color. It defaults to dark gray if no custom color is configured.
Assets (brand imagery)
Uploading images
To upload an image:
- Click 'Upload image' or select the image file you would like to upload from your computer
- Once chosen and uploaded you will be taken to an image adjustment page where you can adjust the size of the image you are uploading. This will always stay in proportion to make sure that images always fit in their allocated spaces.
- After you have resized your image, just click save the image and your image will then be active on your event.
Image sizes
Welcome image
This image appears on the right hand side of the login page on your browser app. The optimum size for this image is 1280 x 1440 pixels. Maximum file size 2MB.
Event banner
This image appears at the top of the login page on your browser app. The optimum size for this image is 500 x 160 pixels.
Home banner
This appears at the top of the platform home page, the optimum size is 1440 x 600 pixels, and the maximum file size is 2MB. This is where the home banner appears on the event app:
Background image
This image appears behind the home feed blocks on your event app. The optimum size for this image is 2560 x 1600 pixels. If you do not have an image you can choose a specific Hex code colour for your background (web and mobile).
Event logo
This image appears on the browser tab and as the event logo on the mobile app. The optimum size for this image is 150 x 150 pixels.
Sponsor image
This image appears on the mobile application during loading. The optimum size for this image is 200 x 200 pixels. Maximum file size 2MB.
Enabling custom fonts
At the bottom of the general page, you will see a toggle saying 'Enable custom fonts in the event'. If you toggle this on you will see two boxes; Regular font variant and Bold font variant. You can upload your custom fonts here.
The Header banner section
The header banner section of the Event Branding page deals with header banners, which allow you to convey information and send your users to a specific place.
A header banner looks like this on your event's application (the color is defined by the event color chosen in the Primary Event Color section):
When you first access this section you must first create a default header banner, which will display to all types unless you have assigned another header banner to be displayed to a type.
Creating a default header banner
To create your default banner, you click the 'create header banner' button on the screen below.
Creating a banner ad
The first page you will encounter is the banner ad list page, which will display like this if you have not previously created any banner ads:
Button Text: This field defines the text that will appear on the button within the notification banner. This is limited to 20 characters.
Button Link: This is the link where your users will be sent after they click on the button. This must a valid URL.
Message: This is the message that will appear on the header banner. This is limited to 120 characters.
Once you have completed these fields, click 'Create header banner' and your default banner will be saved.
Header banner list page
You will then be taken back to the header banner section, where all the created header banners are listed:
| # | Name | Function |
| 1 | Default Banner Label |
This shows you which is your default banner. You cannot delete your default banner, but it can be edited. |
| 2 | Type Label | This show you which Types are associated with this Header Banner. |
| 3 | 'More' Label | This shows you that there are additional Types that are not currently displayed. Clicking this expands the row and allows you to see all associated Types. |
| 4 | Message | This shows you the Header Banner message. |
| 5 | Button Text | This shows you the button text for the Header Banner |
| 6 | Button Link | This shows you the button link for the Header Banner |
| 7 | Display Frequency | This dropdown allows you to choose when you want to show your banners, either only once for each user or displayed on every session. The choice made on this dropdown will impact all header banners within the event. |
| 8 | Create Header Banner | This button opens the create header banner screen where you can create additional Header Banners. |
| 9 | Select Box | This allows you select multiple Header Banners to perform group actions. |
| 10 | Edit Button | This takes you to the edit page for the associated Header Banner. |
| 11 | Success Toast Banner | This demonstrates that the action you have taken has been successfully saved |
Creating Additional Header Banners
In order to create another Header Banner after you have created your default Header Banner, you click on the 'Create Header Banner' button
This will send the user to the Create Header Banner screen:
This screen acts in the same way as the screen where you create the default banner, with the only difference being that you are required to select Types.
Select Types: This field allows you to select the Types that this header banner is to be associated with. You cannot select types that have already been associated with another
Button Text: This field defines the text that will appear on the button within the notification banner. This is limited to 20 characters.
Button Link: This is the link where your users will be sent after they click on the button. This must a valid URL.
Message: This is the message that will appear on the header banner. This is limited to 120 characters.
Once you have completed each field click on the 'create header banner' button in order to save the header banner and return to the header banner list page.
Editing header banners
After you have created header banners you can then edit certain elements of them.
In order to edit them, you simply click the pencil icon in the row associated with the header banner.
Select types: This field allows you to select the Types that this header banner is to be associated with. You cannot select types that have already been associated with another
Button text: This field defines the text that will appear on the button within the notification banner. This is limited to 20 characters.
Button link: This is the link where your users will be sent after they click on the button. This must a valid URL.
Message: This is the message that will appear on the header banner. This is limited to 120 characters.
Delete banner: This button allows you delete the banner, you just need to confirm on the window that appears after you have clicked.
Once you have made the necessary amendments to the fields click on the 'save changes' button in order to save the header banner and return to the header banner list page.
Banner ads section
The banner ads section allows you to control the advertising space in your event app. There are three spaces where these can appear:
1. Side bar (web)
On the top right of the event app.
2. Lists (mobile app)
At the top of lists on the mobile app.
3. Event agenda (mobile app)
At the bottom of the event agenda page on the mobile app.
4. More tab (mobile app)
At the bottom of the more tab on the mobile app.
Creating a banner ad
The first page you will encounter is the banner ad list page, which will display like this if you have not previously created any banner ads:
Upload Image:
- Click 'upload image' or and select the image file you would like to upload from your computer
- Once chosen and uploaded you will be taken to an image adjustment page where you can adjust the size of the image you are uploading. This will always stay in proportion to make sure that images always fit in their allocated spaces.
- After you have resized your image, just click save image and your image will appear on the preview on the right hand side of the page.
Advert name: This field allows you to give your advert a name, this allows you to save.
Advert location: This field allows you to choose where the advert is displayed, the choices are:
- Side bar (web)
- Lists (mobile app)
- Event agenda (mobile app)
- More tab (mobile app)
Advert link type: This allows you to define where a user should be sent once they click on the ad. You can choose:
- Profile
- Link through to a profile that already exists within the event, for instance a company or item.
- This opens the 'choose profile' field, which then allows you to choose which profile you would like to link to.
- Session
- Link through to a session that already exists within the event.
- This opens the 'choose session' field, which then allows you to choose which session you would like to link to.
- URL
- An external URL, for instance your homepage or an advertiser's landing page.
- This open the 'advert link' field, which then allows you to type a URL.
- None
- This makes the advert non-clickable.
Once you have added all of the required fields, simply click 'create advert' and your banner ad will be saved.
Side bar list page
| # | Name |
Function |
| 1 | Multi-Select Box | You can use these boxes to select multiple Side Bar Ads simultaneously |
| 2 | Image Column | This column displays a thumbnail of the image associated with the Side Bar ad |
| 3 | Name | This column displays the name of the Side Bar Ad |
| 4 | Status | This column allows you to see whether this Side Bar Ad is either Active or Inactive |
| 5 | Created Date | This column displays the date when the advert was originally created |
| 6 | Location | This column shows you where this advert is displayed |
| 7 | Link Type | This column shows you what kind of link then Side Bar Ad has |
| 8 | Link | This column either shows you the Session ID, Profile ID, or URL depending on the Link Type chosen |
|
9 |
Edit | Clicking on this column allows you to edit the |
|
10 |
Create New |
This button opens the 'create new side bar ad' page |
Selecting multiple ads
On the list page you can also select multiple side bar ads simultaneously, which then allows you to perform bulk actions.
Select all: You can instantly select all side bar ads by clicking the tick box in the table header.
Activate selected: This allows you to activate all of the selected adverts, however, this option will not be available if you have selected active adverts.
Deactivate selected: This allows you to deactivate all of the selected adverts, however, this option will not be available if you have selected inactive adverts.
Delete selected: This allows you to delete all of the selected adverts.
Editing side bar ads
When you click the edit button beside a side bar ad, you are taken to the edit side bar ad page.
Advert name: This cannot be edited, but it displays the name of the advert.
Advert location This cannot be edited, but it displays the location of the advert.
Advert link type: This cannot be edited, but it displays the advert link type.
[If advert link type is session] Choose session: This cannot be edited, but it displays the session that the advert is linked to.
[If advert link type is profile] Choose profile: This cannot be edited, but it displays the profile that the advert is linked to.
[If Advert Link Type is URL] Advert link: This cannot be edited, but it displays the URL that the advert is linked to.
I would like to activate the advert for event platform: This can be edited, if ticked the advert will be set to active upon save, if unticked the advert will be set as inactive upon save.
Delete advert: This will delete the adverts.
Save changes: This will save any changes made.
FAQs
Can I change the branding mid event, like sponsor images?
Yes. Although if using the app, users will have to close and re-open the app to see the changes.
Does the branding translate over to the mobile app?
Yes.
Can I add an external link to banner ads?
Yes.
Can I update the advert link within a banner ad after I have created it.
No, you will have to create a new banner ad and add the new link in.
Can I change the banner ad image after creating the ad?
Yes.