Contents
Understanding The Event Branding Page
How do you use The Event Branding Page?
Creating A Default Header Banner
Creating Additional Header Banners
Understanding The Event Branding Page
The Event Branding page holds all of the event imagery, advertising, and banners for your event in a single place.
It has three sections:
General, 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
Sidebar Ads, which is where you create and manage the sidebar adverts across your event
How do you use The Event Branding Page?
The event branding page allows you to control the look and feel of your event, the images you upload and the colours you choose on this page will define the look and feel of your event.
General
Event Color
The event colour field is where you can set the colour theme for your event. This is the colour that will be used to accent your event and will be used for elements like field boxes, buttons, and highlighting.
There are two ways of choosing the colour:
1. Enter the hex code
If you have a specific brand colour and you know the hex code for this colour, you can input this straight into the text box.
2. Use the colour picker
You can also choose the colour by clicking the dropper icon if no colour is selected or the coloured square if you have already chosen a colour and want to replace it.
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 allows 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 allows Grip users to have more control over the branding of their event.
- When updating the theme, there is a real-time preview of the changes made as seen below
- A Contrast Warning will display when the Platform Theme Color and the Icon/Font Color do not provide enough contrast between the two
Uploading Images
In order to upload an 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 then be active on your event.
Welcome Banner
The Welcome Banner appears on the right hand side of the login page on your browser app. Optimum size for this image is 1280 x 1440 pixels and the maximum file size is 2MB.
This is where the Welcome Banner appears on the event app:
Event Banner
This appears at the top of the login page on your browser app. Optimum size for this image is 500 x 160 pixels.
This is where the Event Banner appears on the event app:
Home Banner
This appears at the top of the app 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:
Event Logo
This appears on the top left of the browser window when a participant is viewing a profile or session. Optimum size for this image is 150 x 150 pixels, and the maximum file size is 2MB.
This is where the Event Logo appears on the event app:
Sponsor Logo
This image used on mobile app loading screens on the mobile app, the optimum size for this image is 200 x 200 pixels.
Background Image
TBC
Header Banner
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 colour is defined by the Event Colour chosen in the General 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
In order to create your default banner, you click the 'Create header banner' button on the screen below.
You will then arrive on the default header banner creation screen:
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 Toaster 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
The Banner Ads allow 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:
In order to create your first banner ad, simply click the 'create a new advert' button in the middle of the screen.
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 to inactive upon save.
Delete Advert: This will delete the adverts
Save Changes: This will save any changes made