Skip to main content

Festivals widget

info

This doc only provides information to help with customisation of the new festivals widget, which is still in beta 🤓

Basic embed code:​

To get a widget up and working you need the following embed code at minimum (where YOURCODE is the unique id for your widget).

<div id="bc-widget" data-venue="YOURCODE" data-lang="en"></div>

You will also need to add the following scripts to get the widget to work:

<link
    href="https://widgets.broadcast.events/v2/festivals/widget.css"
    rel="stylesheet"
/>
<script
    src="https://widgets.broadcast.events/v2/festivals/widget.js"
    type="module"
></script>

Depending on your platform there are different ways for adding this code to your site. We have some examples in our widgets section here:

Available configuration options:​

Here is an example of some of the configuration options currently available:

Attributevaluesdescription
modalcontenthexSet a colour for the text in the modal
modalbkghexSet a background colour for the modal
accentcolorhexCustomise the accent colour used in the widget
hideDividerbooleanSet to true to hide. False by default
langen,noSet the language for labels
hide-ctabooleanThis hides the link to Broadcast. This can only be used if you add you own custom link
label-finishedstringOverride the text label for the checkbox that toggles between showing all events, or just 'up next'

And an example of how these can be used:

<div
    id="bc-widget"
    data-venue="YOURCODE"
    data-modalcontent="#ffffff"
    data-modalbkg="#000000"
    data-accentcolor="#ff00ff"
    data-hideDivider="true"
    data-lang="no"
    data-hide-cta="false"
    data-label-finished="Up next..."
></div>

Custom CSS​

For for grained control of the layout you can use custom css to override the styles of the widget.

Behind the scenes we use Tailwind CSS for the majority of the widget, alongwith Radix UI and inline styles to make the modal accessible.

For a visual overview of the layout you can look at this zoomable Excalidraw document: https://link.excalidraw.com/readonly/uQHtiuAGTgUcIBurDCOc

Widget structure​

info

Where something is marked with TODO, this is to inform you that changes will be made in the handling of this element.

The core outline of the widget is determined by the element ID's listed below. You can paste this code to use as starting point for customisations.

#bc-widget-poweredby-header {
    /* The CTA banner with QR code */
}

#bcfw-wrapper {
    /* The wrapper around the entire widget */
}

#bcfw-settings {
    /* The settings panel, which contains filtering etc. */
}

#bcfw-settings-sort-wrapper {
    /* The wrapper around the sorting options */
}

#bcfw-settings-sort-time {
    /* The sorting option for time */
}
#bcfw-settings-sort-stage {
    /* The sorting option for stages / venues */
}
#bcfw-settings-sort-name {
    /* The sorting option for name */
}
#bcfw-settings-sort-starred {
    /* The sorting option for stared */
}

#bcfw-settings-filter-wrapper {
    /* The wrapper around the filtering options */
}

#bcfw-settings-filter-label {
    /* Label for the filter input. Hidden and used for screen readers */
}

#bcfw-settings-filter-input {
    /* The input field for filtering
    TODO: Upgrade to a Radix UI input
    */
}

#bcfw-settings-venues-wrapper {
    /* The wrapper around the venues select */
}

#bcfw-settings-venues-label {
    /* Label for the venues select. Hidden and used for screen readers */
}

#bcfw-settings-venues-select {
    /* The select  for venues
    TODO: Upgrade to a Radix UI select
    */
}

#bcfw-settings-finished-wrapper {
    /* The wrapper around the finished checkbox */
}

#bcfw-settings-finished-input {
    /* The checkbox for finished
    TODO: Upgrade to a Radix UI toggle switch
    */
}

#bcfw-settings-finished-label {
    /* Label for the finished input.
    override the text with data-label-finished */
}

#bcfw-heading-venue {
    /* The heading for the venues list. This only shows when the sort option for stages is selected*/
}

#bcfw-schedule-wrapper {
    /* The wrapper around the schedule items */
}

#bcfw-poweredby-footer {
    /* The footer CTA banner with QR code */
}

#bcfw-scroll-to-top {
    /* The button to scroll to the top of the widget */
}

Schedule item​

We refer to the program of the festival internally as the schedule, and therefore we call each individual row the schedule item.

As this are repeated many times we use classes rather than element ids, and this are distinguised with a '-cl-' in the class name to aide with trouble shooting.

.bcfw-cl-schedule-item {
    /* Top level wrapper */
}
.bcfw-cl-schedule-item-wrapper {
    /* Wrapper around the image, name, date, venue, tags, and star */
}

.bcfw-cl-schedule-item-time-wrapper {
    /* wrapper around the icon and label */
}
.bcfw-cl-schedule-item-time-svg {
    /* The clock icon */
}
.bcfw-cl-schedule-item-time {
    /* The time label */
}
.bcfw-cl-schedule-item-image {
    /* The thumbnail image */
}
.bcfw-cl-schedule-item-name {
    /* The name of the item */
}
.bcfw-cl-schedule-item-date {
    /* The date of the item */
}
.bcfw-cl-schedule-item-venue-mobile {
    /* The venue name on mobile */
}
.bcfw-cl-schedule-item-tags-wrapper {
    /* Wrapper around the tags */
}
.bcfw-cl-schedule-item-tag {
    /* Individual tags */
}
.bcfw-cl-schedule-item-venue-desktop {
    /* The venue name on desktop */
}
.bcfw-cl-schedule-item-star-desktop {
    /* The star icon on desktop */
}
.bcfw-cl-schedule-item-star-mobile {
    /* The star icon on mobile */
}
.bcfw-cl-schedule-item-divider {
    /* Divider between each shedule item. 
    Disable with data-hideDivider="true" */
}

Bonus: Schedule Item Grid​

If you want to get up to speed quickly with whats what in the schedule item, you can add the following CSS to highlight the grid around your content.

This can help you find the element you are looking for quickly when time is short!

.bcfw-cl-schedule-item {
    /* Top level wrapper */
    border-color: green;
    border-width: 1px;
}
.bcfw-cl-schedule-item-wrapper {
    /* Wrapper around the image, name, date, venue, tags, and star */
    border-color: aqua;
    border-width: 1px;
}

.bcfw-cl-schedule-item-time-wrapper {
    /* wrapper around the icon and label */
    border-color: grey;
    border-width: 1px;
}
.bcfw-cl-schedule-item-time-svg {
    /* The clock icon */
    border-color: green;
    border-width: 1px;
}
.bcfw-cl-schedule-item-time {
    /* The time label */
    border-color: teal;
    border-width: 1px;
}
.bcfw-cl-schedule-item-image {
    /* The thumbnail image */
    border-color: pink;
    border-width: 1px;
}
.bcfw-cl-schedule-item-name {
    /* The name of the item */
    border-color: magenta;
    border-width: 1px;
}
.bcfw-cl-schedule-item-date {
    /* The date of the item */
    border-color: teal;
    border-width: 1px;
}
.bcfw-cl-schedule-item-venue-mobile {
    /* The venue name on mobile */
    border-color: blue;
    border-width: 1px;
}
.bcfw-cl-schedule-item-tags-wrapper {
    /* Wrapper around the tags */
    border-color: blue;
    border-width: 1px;
}
.bcfw-cl-schedule-item-tag {
    /* Individual tags */
    border-color: red;
    border-width: 1px;
}
.bcfw-cl-schedule-item-venue-desktop {
    /* The venue name on desktop */
    border-color: yellow;
    border-width: 1px;
}
.bcfw-cl-schedule-item-star-desktop {
    /* The star icon on desktop */
    border-color: pink;
    border-width: 1px;
}
.bcfw-cl-schedule-item-star-mobile {
    /* The star icon on mobile */
    border-color: brown;
    border-width: 1px;
}
.bcfw-cl-schedule-item-divider {
    /* Divider between each shedule item. 
                    Disable with data-hideDivider="true" */

    border-color: red;
    border-width: 1px;
}

TODO: Documentation for this part of the widget is still on the todo list.

If you have a specific question please reach out to us.