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:

• Standard Html
• Squarespace
• Wix

Available configuration options:

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

Attribute	values	description
modalcontent	hex	Set a colour for the text in the modal
modalbkg	hex	Set a background colour for the modal
accentcolor	hex	Customise the accent colour used in the widget
hideDivider	boolean	Set to true to hide. False by default
lang	en,no	Set the language for labels
hide-cta	boolean	This hides the link to Broadcast. This can only be used if you add you own custom link
label-finished	string	Override 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;
}

Modal / Details

The details modal can also be customised, and for consistency we have chosen to use class selectors here rather than the id selectors.

.bcfw-cl-details-wrapper {
    /* Top level wrapper for the entire details section */
}

.bcfw-cl-details-image {
    /* The main image/thumbnail of the festival */
}

.bcfw-cl-details-content {
    /* Container for all content below the image */
}

.bcfw-cl-details-content-wrapper {
    /* Wrapper for the main content section */
}

.bcfw-cl-details-content-name-wrapper {
    /* Wrapper for the festival name section */
}

.bcfw-cl-details-content-name {
    /* The festival name text */
}

.bcfw-cl-details-content-date {
    /* The date display section */
}

.bcfw-cl-details-content-time-venue-wrapper {
    /* Wrapper for time and venue information */
}

.bcfw-cl-details-content-time {
    /* The time display section */
}

.bcfw-cl-details-content-venue {
    /* The venue name display */
}

.bcfw-cl-details-content-venue-address {
    /* The venue address display */
}

.bcfw-cl-details-content-ticket-button-wrapper {
    /* Container for the ticket button */
}

.bcfw-cl-details-content-tags-wrapper {
    /* Container for all tags */
}

.bcfw-cl-details-content-tag {
    /* Individual tag styling */
}

.bcfw-cl-details-content-youtube-wrapper {
    /* Container for YouTube video if present */
}

.bcfw-cl-details-content-description {
    /* The festival description text */
}

Outdated selectors

When investigating the soucre code of the details you may find additional ids and classes that are not in the above list. These are from earlier incarnations of the widget, that have been left in for backwards compatiability, but are now deprecated and will be removed in future versions of the widget.

/* Non-standard classes to avoid */
.bcfw-details-wrapper
.bcfw-details-image
.bcfw-details-content

/* IDs to avoid  */
#bc-widget-detail-name
#bcfw-details-date
#bc-widget-detail-time
#bc-widget-detail-venue
#bc-widget-detail-description;