Loading...
Display upcoming events from FCLive on your website with a simple script tag. The widget automatically shows events with images and keeps your site updated.
Add a div with the ID fclive where you want the events to appear:
<div id="fclive"></div>
Add the script tag anywhere after the container div. Use the appropriate path for artists or venues:
<!-- For an artist --> <script src="https://fclive.netlify.app/script/artist/YOUR-ARTIST-SLUG"></script> <!-- For a venue --> <script src="https://fclive.netlify.app/script/venue/YOUR-VENUE-SLUG"></script>
Slug: frank-fletcher
Shows venue names, locations, and times for this artist's upcoming events
<!-- Add this to your HTML --> <div id="fclive"></div> <script src="https://fclive.netlify.app/script/artist/frank-fletcher"></script>
Slug: krazyfish-grille
Shows artist names, images, and times for this venue's upcoming events
<!-- Add this to your HTML --> <div id="fclive"></div> <script src="https://fclive.netlify.app/script/venue/krazyfish-grille"></script>
The widget includes basic default styles, but you can customize the appearance using CSS classes:
| Class Name | Description |
|---|---|
.fclive-widget | Main container |
.fclive-events-list | Events list container |
.fclive-event | Individual event container |
.fclive-event-link | Event link wrapper |
.fclive-event-image | Event image |
.fclive-event-content | Event text content container |
.fclive-event-title | Event title |
.fclive-event-subtitle | Event subtitle |
.fclive-event-datetime | Date/time container |
.fclive-event-date | Event date |
.fclive-event-time | Event time |
<style>
.fclive-event {
background: #fff;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.fclive-event-title {
color: #1a202c;
font-size: 1.5rem;
}
.fclive-event-image {
border-radius: 8px;
}
</style>