> ## Documentation Index
> Fetch the complete documentation index at: https://docs.broadcast.events/llms.txt
> Use this file to discover all available pages before exploring further.

# Festival widget

> Install the Broadcast festival widget and configure the base embed code for your website.

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

## 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).

```html theme={null}
<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:

```html theme={null}
<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](/widgets/standardHtml)
* [Squarespace](/widgets/squarespace)
* [Wix](/widgets/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`, `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:

```html theme={null}
<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](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.
</Info>

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.

```css theme={null}
#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.

```css theme={null}
.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!

```css theme={null}
.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;
}
```

### 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.

```css theme={null}
.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-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 */
}
```

#### 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.

```css theme={null}
/* 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
```