Widget options
Broadcast widgets have a number of configuration options available that change the layout and appearance of how the events are rendered on your website.
How to customise the widget
The snippet of text that you embed on the page where you want your widget to appear can have a number of options added, and these are refferred to as attributes.
See below for a full list.
Make it a 'recommended' widget
Lets take a practical example, and see how we can customise something in the widget.
By default the widget displays all your current active events, but it can also be reused to show only events that are marked as recommended.
To enable this feature add the following to your snippet:
data-recommended="true"
The complete snippet should look something like this:
<div id="bc-widget" data-venue="[YOUR-VENUE-ID]" data-recommended="true" ></div>
Now when the widget loads it will show the 3 upcoiming events marked as recommended.
If you try the above code and get no events loading in the widget remember to check the following:
- When adding your venue code you must remove the brackets as well eg:
data-venue="XXXXXXX"where XXXXXXX is your venue code. - It is also equally important to remember to have marked some events marked as recommended in Backstage 😊
Data Attribute list
This is the complete list of currently supported attributes, the options available and their default behavour.
Remember, each attribute should be preficed with 'data-'. eg 'data-venue'.
| Attribute | values | description |
|---|---|---|
| venue | String | The venue identifier that is required to enable the widget. You can get this from Broadcast. |
| recommended | true, false | Show a 3 event, one row widget with just events that are flagged as recommended in Broadcast. |
| column | true, false | Switch to a single column view. Default behavour is false, and the the 3 column grid view is rendered |
| accentcolor | Hex code | Change the colour of the accent, which is used on the event name. Supports web Hex Codes eg #ff00ff |
| hidevenue | true,false | Prevent the name of the venue from displaying in the widget. Default behaviour is false . |
| limit | number | Select the number of events to return. If blank then the default is 36. Max number of events returned is 100. |
| hideshadow | true, false | Hide the shadow around each event. |
| hidebounce | true, false | Hide the scaling effect on hover of the event. |
| hideborder | true, false | Hide the border around the event. |
| cornerborder | true, false | Use straight corners instead of rounded |
| bordercolor | Hex code | Set the color of the border surrounding the event. Supports web Hex Codes eg #ff00ff |
| bodybkg | Hex code | Set the color of the container that holds the main text of the event. Supports web Hex Codes eg #ff00ff |
| dailycal | true, false | When set to true this will add an extra date option for formatting in the style of a tear off desktop calendar. The default behaviour is false |
| fallback-text | String | Set some text to load when there are no events to show. Note: scripts and special characters will be removed |
| use-starttime | true,false | If you are using the "show start time" in Backstage, you can set to this to true to show the start time instead of the doors time on the listings card |
| mode | string | Choose the display mode for your widget, from 'text, 'compact', 'list' and 'grid'. If nothing is specified the widget defaults to 'grid' |
The only required attribute is venue, the widget will not function without this.
If an attribute is omitted it will function in the default mode outlined below.
Custom Fonts
It is not currently possible to set a custom font within the widget.
In order to do this you will need some custom CSS magic!