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

# Standard HTML

> If you are rolling your own html for your website, then you have the most flexibiltiy for installation and customisation of the widget.

## Add the required CSS and Javascript files

Depening on where you want the widget to appear, you can either add the following scripts to an individual page or a template.

Add the following scripts to the bottom of the page, after your content, but **BEFORE** the closing `</body>` tag. Similar to how you might install scripts for Google Analytics or other third party libraries.

```html theme={null}
<link href="https://widgets.broadcast.events/v2/listings/widget.css" rel="stylesheet" />
<script src="https://widgets.broadcast.events/v2/listings/widget.js" type="module"></script>
```

After completion it will look something similar to this:

```html theme={null}
</div>
<link href="https://widgets.broadcast.events/v2/listings/widget.css" rel="stylesheet" />
<script src="https://widgets.broadcast.events/v2/listings/widget.js" type="module"></script>
</body>
</html>
```

<Warning>
  Make sure that these files are referenced in the correct order, as outlined above, with the CSS file **BEFORE** the javascript file.

  This is required for the layout to function correctly.
</Warning>

## Add the widget code

The standard widget returns events in a responsive 3 column grid, and thus performs best on a full width div within your layout.

Navigate to the page where you want to insert the widget, and add the following code snippet:

```html theme={null}
<div
  id="bc-widget"
  data-venue="YOUR-VENUE-ID"
  data-hidevenue="true"
  data-grid="true"
  data-recommended="false"
  data-key=""
  data-accentcolor="#dc566f"
  data-lang="en"
></div>
```

### Add your unique Id

In order for the widget code to work correctly, you must substitute the text YOUR-VENUE-ID with the unique code supplied by Broadcast.

### Marvel at your widget.

Save the page and refresh in your browser and you should now see a default widget loading with your events.