Standard HTML

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.

<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:

</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>

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.

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:

<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. Save the page and refresh in your browser and you should now see a default widget loading with your events.

Last modified on March 8, 2026

Overview

Events

Widgets

Add the required CSS and Javascript files

Add the widget code

Add your unique Id

Marvel at your widget.

​Add the required CSS and Javascript files

​Add the widget code

​Add your unique Id

​Marvel at your widget.

Add the required CSS and Javascript files

Add the widget code

Add your unique Id

Marvel at your widget.