Festival widget

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:

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`, `nb`, `nn`, `sv`, `da`, `fi`, `is`	Set the language for labels. Defaults to `en` if omitted or unsupported.
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’
default-stage	string	Select a stage by default when the widget loads. Use the stage name as it appears in the widget.
label-ticket-button	string	Override the default ticket button label.
hide-ticket-button	boolean	Set to `true` to hide the festival ticket button, even when a ticket URL is available.

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..."
    data-default-stage="Main Stage"
    data-label-ticket-button="Buy tickets"
    data-hide-ticket-button="false"
></div>

Language support

Use the data-lang attribute to set widget labels and text. Supported values:

English (en, fallback)
Norwegian (no, nb, nn)
Swedish (sv)
Danish (da)
Finnish (fi)
Icelandic (is)

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

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-row {
    /* Wrapper for a schedule group heading */
}
.bcfw-cl-schedule-row-title {
    /* The schedule group heading text */
}
.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 schedule 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 schedule item.
     Disable with data-hideDivider="true" */
    border-color: red;
    border-width: 1px;
}

Artist cards

Use these classes to customise cards in the artist grid.

.bcfw-cl-artist-card {
    /* The card button that opens the artist's details */
}
.bcfw-cl-artist-card-image-wrapper {
    /* The square container for the image or placeholder */
}
.bcfw-cl-artist-card-image {
    /* The artist image */
}
.bcfw-cl-artist-card-image-placeholder {
    /* The placeholder shown when no image is available */
}
.bcfw-cl-artist-card-name {
    /* The artist name below the image */
}

Use these classes to customise the schedule item details modal.

Responsive layout

The layout changes automatically with the viewport width. You do not need a new embed option.

Below 1024px, the image sits above the content and the dialog scrolls as a whole.
At 1024px and above, a square image fills the left half of the modal. Its height sets the height of the details section. The right half scrolls independently, starting below the close button, with a fade at the top edge.
The desktop dialog uses width: 90vw and max-width: min(1440px, 180dvh). This keeps the square image at or below 90dvh.
At 1440px and above, the content column has more padding.
When no image is available on desktop, the content fills the width and determines its own height, up to 95dvh. It scrolls when needed and has no top fade.

The desktop close button floats at the top right, and ticket button labels stay on one line. The scrollbar uses a thin thumb tinted from data-modalcontent, with a grey fallback when no text colour is set. Browsers that do not support the scrollbar styling use their default appearance.

CSS classes

.bcfw-cl-details-wrapper {
    /* Layout wrapper around the image wrapper and content body */
}
.bcfw-cl-details-image-wrapper {
    /* Image container. Square and 50% wide on desktop; absent without an image */
}
.bcfw-cl-details-image {
    /* The schedule item image, cropped to fill its container */
}
.bcfw-cl-details-body {
    /* All details except the image. The scrollable content column on desktop */
}
.bcfw-cl-details-content {
    /* Header content inside the body, including the name, times and ticket button */
}
.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-performances {
    /* The "Also playing" heading and list of additional performances */
}
.bcfw-cl-details-content-ticket-button-wrapper {
    /* Container for the ticket button */
}
.bcfw-modal-close-control {
    /* The details modal close 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 */
}

The .bcfw-cl-details-performances section appears only when the selected schedule item has additional performances. It contains their dates, times and stages or venues. The selected performance stays in the main details header and does not repeat in this list. The heading follows your data-lang setting. The image and .bcfw-cl-details-content are no longer direct children of .bcfw-cl-details-wrapper. Update selectors that use > to account for the new image wrapper and body. Apply content-column padding and scrolling overrides to .bcfw-cl-details-body. The body also contains additional performances, tags, social links, video and the description. The new wrappers also carry .bcfw-details-image-wrapper and .bcfw-details-body, which the widget uses for its built-in styles. Use their .bcfw-cl- equivalents for your custom CSS. The modal renders in a portal under the page body, outside #bc-widget. Selectors such as #bc-widget .bcfw-cl-details-body will not match it. You can scope overrides to .bcfw-details-modal instead:

/* Adjust the image crop */
.bcfw-details-modal .bcfw-cl-details-image {
    object-position: center top;
}

/* Optional: remove the fade at the top of the desktop content column */
@media (min-width: 1024px) {
    .bcfw-details-modal .bcfw-cl-details-body {
        -webkit-mask-image: none;
        mask-image: none;
    }
}

Internal and legacy selectors

Use the customization classes above instead of the selectors below. The classes without -cl- still control the built-in layout; they are not deprecated. The IDs below belong to older detail markup.

/* Built-in layout classes. Prefer their .bcfw-cl- equivalents */
.bcfw-details-wrapper
.bcfw-details-image-wrapper
.bcfw-details-image
.bcfw-details-body
.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

Overview

Data integration

Festival widget

Basic embed code:

Available configuration options:

Language support

Custom CSS

Widget structure

Schedule item

Bonus: Schedule Item Grid

Artist cards

Responsive layout

CSS classes

Internal and legacy selectors

​Basic embed code:

​Available configuration options:

​Language support

​Custom CSS

​Widget structure

​Schedule item

​Bonus: Schedule Item Grid

​Artist cards

​Modal details

​Responsive layout

​CSS classes

​Updating existing modal CSS

​Internal and legacy selectors

Basic embed code:

Available configuration options:

Language support

Custom CSS

Widget structure

Schedule item

Bonus: Schedule Item Grid

Artist cards

Modal details

Responsive layout

CSS classes

Updating existing modal CSS

Internal and legacy selectors