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

# Custom options

> This guide documents the current custom options for the festivals widget and how they work together.

## Quick Start

Base embed:

```html theme={null}
<div id="bc-widget" data-venue="YOUR_VENUE_ID"></div>
```

Optional custom options:

* `data-showdaybuttons="true"`
* `data-splitschedule="true"`
* `data-mainschedule="true"` or `data-mainschedule="false"`
* `data-default-stage="Main Stage"`
* `data-label-ticket-button="Buy tickets"`
* `data-hide-ticket-button="true"`

## Option: Show Day Buttons

### Enable

```html theme={null}
<div id="bc-widget" data-venue="YOUR_VENUE_ID" data-showdaybuttons="true"></div>
```

### Behavior

* Default is off.
* Day buttons are shown only when `data-showdaybuttons="true"` is set.
* Day buttons are shown only when there are at least 2 unique days in the schedule.
* Day filter works together with schedule split/main filtering.

### CSS Classes For Day Labels

* `.bcfw-settings-day-buttons-wrapper`
* `.bcfw-settings-day-label`
* `.bcfw-settings-day-label-name`
* `.bcfw-settings-day-label-date`
* `.bcfw-settings-day-label-month`
* `.bcfw-settings-tab-button`
* `.bcfw-settings-tab-button-active`

### Example CSS

```css theme={null}
/* Optional: scope styles to this widget instance */
#bc-widget .bcfw-settings-day-buttons-wrapper {
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

#bc-widget .bcfw-settings-day-label {
    display: inline-flex;
    align-items: baseline;
    gap: 0.25rem;
}

#bc-widget .bcfw-settings-day-label-name {
    font-weight: 600;
    text-transform: capitalize;
}

#bc-widget .bcfw-settings-day-label-date {
    font-size: 1.05em;
    font-weight: 700;
}

#bc-widget .bcfw-settings-day-label-month {
    font-size: 0.85em;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    opacity: 0.8;
}

/* Selected/active day button */
#bc-widget .bcfw-settings-tab-button-active .bcfw-settings-day-label-name,
#bc-widget .bcfw-settings-tab-button-active .bcfw-settings-day-label-date,
#bc-widget .bcfw-settings-tab-button-active .bcfw-settings-day-label-month {
    color: inherit;
}
```

## Option: Split Schedule

### Enable

```html theme={null}
<div id="bc-widget" data-venue="YOUR_VENUE_ID" data-splitschedule="true"></div>
```

### Behavior

* Default is off.

* When enabled, the widget shows tabs for:
  * `All`
  * `Festival` (`isMainSchedule === true`)
  * `Conference` (`isMainSchedule === false`)

* Filtering is done client-side by tab selection.

* By defaut the labels are in English, but can be changed to Norwegian by using the `data-lang="no"` attribute. Custom labels per festival can be configured on request.

## Option: Main Schedule

### Enable

```html theme={null}
<!-- Show only main schedule events -->
<div id="bc-widget" data-venue="YOUR_VENUE_ID" data-mainschedule="true"></div>
```

```html theme={null}
<!-- Show only non-main schedule events -->
<div id="bc-widget" data-venue="YOUR_VENUE_ID" data-mainschedule="false"></div>
```

### Behavior

* If `data-mainschedule` is omitted, no main-schedule filtering is applied.
* If set to `true`, only `isMainSchedule === true` events are shown.
* If set to `false`, only `isMainSchedule === false` events are shown.

## Option: Default Stage

### Enable

```html theme={null}
<div
    id="bc-widget"
    data-venue="YOUR_VENUE_ID"
    data-default-stage="Main Stage"
></div>
```

### Behavior

* Default is off.
* When set, the widget loads with that stage selected in the stage filter.
* The value should match the stage name as it appears in the widget.

## Schedule Item Ticket Links

Ticket buttons in schedule item details appear when a ticket URL is available. The widget checks the schedule item first, then the related event:

* `scheduleItem.custom_fields.ticketUrl`
* `scheduleItem.relatedEvent.custom_fields.ticketUrl`

## Option: Ticket Button Label

### Enable

```html theme={null}
<div
    id="bc-widget"
    data-venue="YOUR_VENUE_ID"
    data-label-ticket-button="Buy tickets"
></div>
```

### Behavior

* The default ticket button label comes from `data-lang`.
* `data-label-ticket-button` overrides the translated default.

## Option: Hide Ticket Button

### Enable

```html theme={null}
<div
    id="bc-widget"
    data-venue="YOUR_VENUE_ID"
    data-hide-ticket-button="true"
></div>
```

### Behavior

* Default is off.
* When set to `true`, schedule item ticket buttons are hidden.

## How `splitSchedule` And `mainSchedule` Work Together

### Rule Of Precedence

* If `data-splitschedule="true"`:
  * Split tabs are used.
  * `data-mainschedule` is effectively ignored for initial filtering.
  * Users can switch between `All`, `Festival`, and `Conference`.

* If `data-splitschedule` is not true:
  * `data-mainschedule` (if provided) is applied directly as a filter.

### Recommended Usage

* Use `splitSchedule` when you want users to switch between views.
* Use `mainSchedule` when you want a fixed single view.
* Avoid setting both unless you intentionally want split tabs to take priority.

## Combined Example

```html theme={null}
<div
    id="bc-widget"
    data-venue="YOUR_VENUE_ID"
    data-splitschedule="true"
    data-showdaybuttons="true"
></div>
```

In this setup:

* User can switch `All / Festival / Conference`.
* Day buttons update based on the currently selected tab.