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.
<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.
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:
<div id="bc-widget" data-venue="YOUR-VENUE-ID" data-hidevenue="true" data-grid="true" data-recommended="false" data-key="" data-accentcolor="#dc566f"></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.