Customising Code In Widget Displays
In addition to customising Widget 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 Widget Display Themes.
From the left menu, browse to Engage > Widget Displays.
On the Widget Displays Page:
Click on the Edit button under the Actions column for the Widget Display you wish to edit.
On the Edit Display page, click on the Custom Code tab in the right sidebar.
The Developer role is required for Account Users to access the Custom Code tab.
Click on the button corresponding to the template you wish to edit.
The following code template are available:
Display Template (HTML) – contains markup for the main Display page.
Tile Templates
Inline - contain markup for Inline Tile layouts.
Expanded Portrait – contain markup for portrait layouts of Expanded Tiles.
Expanded Landscape – contain markup for landscape layouts of Expanded Tiles.
Advert Templates
Inline – contain markup for Inline Adverts.
Expanded – contain markup for Expanded Adverts.
CSS – contains Cascading Style Sheets code for the Display.
JS Overrides – for adding JavaScript overrides.
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 Widget Displays
Step 1: Navigate to the Widget Displays page
From the left menu, browse to Engage > Widget Displays.
Step 2: Edit the Widget Display as required.
On the Widget Displays Page:
Click on the Edit button under the Actions column for the Widget Display you wish to edit.
Step 3: Select the Custom Code tab.
On the Edit Display page, click on the Custom Code tab in 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 corresponding to the template you wish to edit.
The following code template are available:
Display Template (HTML) – contains markup for the main Display page.
Tile Templates
Inline - contain markup for Inline Tile layouts.
Expanded Portrait – contain markup for portrait layouts of Expanded Tiles.
Expanded Landscape – contain markup for landscape layouts of Expanded Tiles.
Advert Templates
Inline – contain markup for Inline Adverts.
Expanded – contain markup for Expanded Adverts.
CSS – contains Cascading Style Sheets code for the Display.
JS Overrides – for adding JavaScript overrides.
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!