Widget configuration

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. 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" data-lang="sv"></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.
lang	`en`, `no`, `nb`, `nn`, `sv`, `da`, `fi`, `is`	Set the language for widget labels. Defaults to `en` if omitted or unsupported.
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!

Overview

Events

Widgets

How to customise the widget

Make it a ‘recommended’ widget

Data Attribute list

Custom Fonts

​How to customise the widget

​Make it a ‘recommended’ widget

​Data Attribute list

​Custom Fonts

How to customise the widget

Make it a ‘recommended’ widget

Data Attribute list

Custom Fonts