Customising Code in Event Displays
In addition to customising Event Displays via the visual editor, it is also possible to code your own unique experiences in Buzzspark with full access for developers to edit the HTML, CSS and JavaScript code for all Event Display Themes.
From the left menu, browse to Engage > Event Displays.
On the Event Displays page, click on the Edit button under the Actions column for the Event Display you wish to edit.
On the Edit Display page, click on the Custom Code tab on the right sidebar.
The Developer role is required for Account Users to access the Custom Code tab.
Click on the button for the template you wish to edit.
Depending on the Theme of the Event Display, the following code template are available:
Display Template (HTML) – contains markup for the main Display page.
Inline Templates (HTML) – contain markup for Inline Tile layouts within the Display.
Expanded Tile Templates (HTML) – contain markup for Expanded Tile layouts in the Display.
CSS – contains Cascading Style Sheets code for the Display.
Custom JS – for adding custom JavaScript code.
HTML Templates - Variables
A list of all variables along with descriptions is available directly within the template editor and can be accessed by clicking on the Allowed variables link at the bottom of the editor. All variables have the syntax:
[[VARIABLE_NAME]]
HTML Templates - Allowed Functions and Operators
In addition to variables, HTML templates also support the following functions:
[[IF ...]]
[[ELSEIF ...]]
[[ELSE]]
[[/IF]]
The following operators can be used with the above functions:
| | OR
&& - AND
! – NOT
Curly brackets ‘()’ can also be used to group conditions, for example:
[[IF (A || B) && C ]]
…
[[/IF]]
CSS Template
This template contains the CSS styles for the entire Display. You can add your own additional styles or overrides at the end of the template or edit any of the existing styles.
Custom JS Template
The Custom JS template is blank by default and allows you to add custom JavaScript code to the Display. Code added in this template is dynamically included in the Display Template before the closing </body> tag - the [[CUSTOM_JS]] variable in the Display Template is substituted by any custom JavaScript entered in the Custom JS template when the Display is loaded.
Reach out to us via chat or email if you have any questions or need help with planning your custom implementation - our developers are always happy to help.
Editing HTML, CSS, and JavaScript code for Event Displays
Step 1: Navigate to the Event Displays page
From the left menu, browse to Engage > Event Displays.
Step 2: Edit an Event Display as required.
On the Event Displays page, click on the Edit button under the Actions column for the Event Display you wish to edit.
Step 3: Select the Custom Code tab.
On the Edit Display page, click on the Custom Code tab on the right sidebar.
The Developer role is required for Account Users to access the Custom Code tab.
Step 4: Edit code templates as required
Click on the button for the template you wish to edit.
Depending on the Theme of the Event Display, the following code template are available:
Display Template (HTML) – contains markup for the main Display page.
Inline Templates (HTML) – contain markup for Inline Tile layouts within the Display.
Expanded Tile Templates (HTML) – contain markup for Expanded Tile layouts in the Display.
CSS – contains Cascading Style Sheets code for the Display.
Custom JS – for adding custom JavaScript code.
HTML Templates - Variables
A list of all variables along with descriptions is available directly within the template editor and can be accessed by clicking on the Allowed variables link at the bottom of the editor. All variables have the syntax:
[[VARIABLE_NAME]]
HTML Templates - Allowed Functions and Operators
In addition to variables, HTML templates also support the following functions:
[[IF ...]]
[[ELSEIF ...]]
[[ELSE]]
[[/IF]]
The following operators can be used with the above functions:
| | OR
&& - AND
! – NOT
Curly brackets ‘()’ can also be used to group conditions, for example:
[[IF (A || B) && C ]]
…
[[/IF]]
CSS Template
This template contains the CSS styles for the entire Display. You can add your own additional styles or overrides at the end of the template or edit any of the existing styles.
Custom JS Template
The Custom JS template is blank by default and allows you to add custom JavaScript code to the Display. Code added in this template is dynamically included in the Display Template before the closing </body> tag - the [[CUSTOM_JS]] variable in the Display Template is substituted by any custom JavaScript entered in the Custom JS template when the Display is loaded.
Reach out to us via chat or email if you have any questions or need help with planning your custom implementation - our developers are always happy to help.
Updated on: 04/02/2023
Thank you!