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:
<script src="https://fclive.netlify.app/script/YOUR-SLUG"></script>
Slug: gorgeous-goose-trio
<!-- Add this to your HTML --> <div id="fclive"></div> <script src="https://fclive.netlify.app/script/gorgeous-goose-trio"></script>
Slug: krazyfish-grille
<!-- Add this to your HTML --> <div id="fclive"></div> <script src="https://fclive.netlify.app/script/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>