Live demonstration of EventBookings widgets for Shopify stores
Shop:{{ $shopDomain }}
Events List Widget
Displays a list of upcoming events with customizable options.
Implementation Code:
<!-- Include the widget script -->
<script src="{{ $apiBaseUrl }}/widgets/events.js?shop={{ $shopDomain }}"></script>
<!-- Add container element -->
<div id="eventbookings-events"></div>
<!-- Optional: Custom configuration -->
<script>
// Widget will auto-initialize, or you can customize:
new EventBookingsEventsWidget({
container: '#eventbookings-events',
shop: '{{ $shopDomain }}',
limit: 10,
showDescription: true,
showLocation: true,
showDate: true
});
</script>
Featured Events Widget
Shows only featured events with the same styling as the main widget.
Implementation Code:
<!-- Include the featured widget script -->
<script src="{{ $apiBaseUrl }}/widgets/featured.js?shop={{ $shopDomain }}"></script>
<!-- Add container element -->
<div id="eventbookings-featured"></div>
Event Details Widget
Shows detailed information for a specific event.
Implementation Code:
<!-- Include the event details script with event UUID -->
<script src="{{ $apiBaseUrl }}/widgets/event-details.js?shop={{ $shopDomain }}&event_uuid=EVENT_UUID_HERE"></script>
<!-- Add container element -->
<div id="eventbookings-details"></div>
Integration Notes
📋 Quick Setup
Replace {{ $shopDomain }} with your actual shop domain
Add the script tag and container div to your theme
Widgets auto-initialize when the DOM is ready
All widgets are responsive and mobile-friendly
🎨 Customization
Style widgets using CSS classes: .eb-event-item, .eb-event-title, etc.
Configure display options via JavaScript parameters
Featured events automatically get the .eb-featured class
All widgets support CORS for cross-domain embedding
@if(str_contains($shopDomain, 'demo'))
Demo Mode: This is using demo data. Connect your actual shop by changing the shop parameter in the URL:
?shop=your-shop.myshopify.com