Choose which view displays by default when the embed loads on desktop
Events will be hidden from the list view this many hours after their start time (0 = hide immediately after start, 24 = hide after 1 day)
When enabled, clicking an event name opens a popup instead of highlighting in list view
Enter the full URL where this embed will be placed. This ensures share links work correctly.
Enter the base URL for your GoodTicket widget. Ticketed events will open at: [Widget URL]/#/event/[EVENT_ID]
Includes auto-resizing, modal support, and smooth scrolling. Perfect for most use cases.
<!-- GoodTicket Events Embed -->
<iframe id="gt-embed" src="https://v0-react-web-page-clone-gamma.vercel.app /embed?venues=5,6,36&bg=1f2937&calbg=374151&highlightbg=4b5563&venuecolor=3b82f6&daytext=9ca3af&eventhl=ffffff&pastcolor=ea580c&addcal=2563eb&toggle=3b82f6&font=Inter%2C%20system-ui%2C%20sans-serif&title=&venuecolors=&listdaytext=9ca3af&listeventhl=ffffff&textbg=000000&datebadgebg=000000&datebadgetext=ffffff&highlightring=3b82f6&carddesign=default&clickable=true&hidepastbutton=true&showtimezone=true&showVenueFilters=0&showAddCalendar=0&showPricing=true&view=list&calendartitle=ffffff&embedtitle=ffffff&calendarEventPopup=true&hoursAfterStartToHide=0&descriptiontext=9ca3af&pricingtext=3b82f6&modalbuttonbg=4b5563&navbuttonbg=374151&togglecontainerbg=1f2937&ticketsbuttonbg=4b5563&venuenamecolor=9ca3af&directToTickets=false" style="width: 100%; border: none; min-height: 600px;"></iframe>
<script src="https://v0-react-web-page-clone-gamma.vercel.app /gt-embed-sdk.v1.js" data-target="gt-embed"></script>Basic iframe embed without additional features. Use if you need a simple integration.
<iframe src="https://v0-react-web-page-clone-gamma.vercel.app /embed?venues=5,6,36&bg=1f2937&calbg=374151&highlightbg=4b5563&venuecolor=3b82f6&daytext=9ca3af&eventhl=ffffff&pastcolor=ea580c&addcal=2563eb&toggle=3b82f6&font=Inter%2C%20system-ui%2C%20sans-serif&title=&venuecolors=&listdaytext=9ca3af&listeventhl=ffffff&textbg=000000&datebadgebg=000000&datebadgetext=ffffff&highlightring=3b82f6&carddesign=default&clickable=true&hidepastbutton=true&showtimezone=true&showVenueFilters=0&showAddCalendar=0&showPricing=true&view=list&calendartitle=ffffff&embedtitle=ffffff&calendarEventPopup=true&hoursAfterStartToHide=0&descriptiontext=9ca3af&pricingtext=3b82f6&modalbuttonbg=4b5563&navbuttonbg=374151&togglecontainerbg=1f2937&ticketsbuttonbg=4b5563&venuenamecolor=9ca3af&directToTickets=false" style="width: 100%; height: 600px; border: none;"></iframe><!-- GoodTicket Events Embed -->
<div id="gt-events-embed" style="width: 100%; min-height: 400px;"></div>
<script>
(function() {
// Create iframe
var iframe = document.createElement('iframe');
iframe.src = 'https://v0-react-web-page-clone-gamma.vercel.app /embed?venues=5,6,36&bg=1f2937&calbg=374151&highlightbg=4b5563&venuecolor=3b82f6&daytext=9ca3af&eventhl=ffffff&pastcolor=ea580c&addcal=2563eb&toggle=3b82f6&font=Inter%2C%20system-ui%2C%20sans-serif&title=&venuecolors=&listdaytext=9ca3af&listeventhl=ffffff&textbg=000000&datebadgebg=000000&datebadgetext=ffffff&highlightring=3b82f6&carddesign=default&clickable=true&hidepastbutton=true&showtimezone=true&showVenueFilters=0&showAddCalendar=0&showPricing=true&view=list&calendartitle=ffffff&embedtitle=ffffff&calendarEventPopup=true&hoursAfterStartToHide=0&descriptiontext=9ca3af&pricingtext=3b82f6&modalbuttonbg=4b5563&navbuttonbg=374151&togglecontainerbg=1f2937&ticketsbuttonbg=4b5563&venuenamecolor=9ca3af&directToTickets=false';
iframe.style.width = '100%';
iframe.style.border = 'none';
iframe.style.minHeight = '400px';
iframe.id = 'gt-events-iframe';
// Insert iframe
var container = document.getElementById('gt-events-embed');
container.appendChild(iframe);
// Handle iframe height updates
function handleMessage(event) {
if (event.data && event.data.type === 'gt-embed:height' && typeof event.data.height === 'number') {
iframe.style.height = Math.ceil(event.data.height) + 'px';
}
// Handle modal display
if (event.data && event.data.type === 'gt-embed:show-modal') {
var eventData = event.data.event;
var colors = event.data.colors || {};
// Remove any existing modal first
var existingModal = document.getElementById('gt-modal');
if (existingModal) {
existingModal.remove();
}
// Create modal
var modal = document.createElement('div');
modal.id = 'gt-modal';
modal.style.cssText = 'display:flex;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.75);z-index:999999;padding:16px;align-items:center;justify-content:center;';
var modalDialog = document.createElement('div');
modalDialog.style.cssText = 'background:' + (colors['--embed-calbg'] || '#374151') + ';border-radius:16px;max-width:600px;width:100%;max-height:90vh;overflow-y:auto;position:relative;overflow:hidden;';
var modalHeader = document.createElement('div');
modalHeader.style.cssText = 'padding:16px;border-bottom:1px solid #4b5563;display:flex;justify-content:space-between;align-items:center;background:' + (colors['--embed-calbg'] || '#374151') + ';border-radius:16px 16px 0 0;';
var modalTitle = document.createElement('h2');
modalTitle.style.cssText = 'color:' + (colors['--embed-listeventhl'] || '#ffffff') + ';font-size:20px;font-weight:bold;margin:0;flex:1;';
modalTitle.textContent = eventData.name;
var modalActions = document.createElement('div');
modalActions.style.cssText = 'display:flex;gap:8px;align-items:center;';
var shareButton = document.createElement('button');
shareButton.textContent = 'Share';
shareButton.style.cssText = 'background:' + (colors['--embed-modalbuttonbg'] || '#4b5563') + ';border:none;color:white;cursor:pointer;padding:8px 16px;border-radius:8px;font-size:14px;font-weight:500;transition:background-color 0.2s;height:40px;min-height:40px;display:flex;align-items:center;justify-content:center;';
shareButton.title = 'Copy event link';
shareButton.onclick = function() {
if (eventData.shareUrl) {
navigator.clipboard.writeText(eventData.shareUrl).then(function() {
var originalText = shareButton.textContent;
shareButton.textContent = 'Copied!';
setTimeout(function() {
shareButton.textContent = originalText;
}, 2000);
}).catch(function(err) {
console.error('Failed to copy link:', err);
});
}
};
shareButton.onmouseenter = function() {
shareButton.style.backgroundColor = '#374151';
};
shareButton.onmouseleave = function() {
shareButton.style.backgroundColor = (colors['--embed-modalbuttonbg'] || '#4b5563');
};
var modalClose = document.createElement('button');
modalClose.innerHTML = '×';
modalClose.style.cssText = 'background:' + (colors['--embed-modalbuttonbg'] || '#4b5563') + ';border:none;color:white;cursor:pointer;padding:8px 16px;border-radius:8px;font-size:24px;font-weight:500;transition:background-color 0.2s;height:40px;min-height:40px;display:flex;align-items:center;justify-content:center;';
modalClose.onmouseenter = function() {
modalClose.style.backgroundColor = '#374151';
};
modalClose.onmouseleave = function() {
modalClose.style.backgroundColor = (colors['--embed-modalbuttonbg'] || '#4b5563');
};
modalActions.appendChild(shareButton);
modalActions.appendChild(modalClose);
var modalImage = document.createElement('div');
modalImage.style.cssText = 'position:relative;aspect-ratio:3/2;width:100%;background:transparent;overflow:hidden;';
if (eventData.image) {
modalImage.innerHTML = '<img src="' + eventData.image + '" alt="' + eventData.name + '" style="width:100%;height:100%;object-fit:cover;display:block;">';
} else {
modalImage.innerHTML = '<div style="width:100%;height:100%;background:linear-gradient(135deg, #ef4444, #ec4899);display:flex;align-items:center;justify-content:center;"><svg width="64" height="64" fill="rgba(255,255,255,0.5)" viewBox="0 0 24 24"><path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z"/></svg></div>';
}
var ticketSection = null;
if (eventData.hasTickets && eventData.ticketUrl) {
ticketSection = document.createElement('div');
ticketSection.style.cssText = 'padding:16px 24px;border-bottom:1px solid ' + (colors['--embed-border'] || '#4b5563') + ';';
var ticketHtml = '';
if (eventData.showPricing && eventData.minPrice !== undefined && eventData.minPrice !== null && !isNaN(eventData.minPrice)) {
var formattedPrice = new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD',
minimumFractionDigits: 2,
maximumFractionDigits: 2
}).format(eventData.minPrice);
var pricingColor = colors['--embed-pricingtext'] || '#3b82f6';
ticketHtml += '<p style="color:' + pricingColor + ';font-size:18px;font-weight:bold;margin:0 0 12px 0;">Starting at ' + formattedPrice + '</p>';
}
ticketHtml += '<button id="gt-tickets-btn" style="width:100%;padding:12px 16px;border-radius:8px;font-weight:600;border:none;cursor:pointer;transition:opacity 0.2s;background-color:' + (colors['--embed-ticketsbuttonbg'] || colors['--embed-highlightbg'] || '#4b5563') + ';color:' + (colors['--embed-hovertext'] || '#ffffff') + ';font-size:16px;">Get Tickets</button>';
ticketSection.innerHTML = ticketHtml;
setTimeout(function() {
var ticketBtn = document.getElementById('gt-tickets-btn');
if (ticketBtn) {
ticketBtn.addEventListener('click', function() {
window.open(eventData.ticketUrl, '_blank', 'noopener,noreferrer');
});
ticketBtn.addEventListener('mouseenter', function() {
ticketBtn.style.opacity = '0.8';
});
ticketBtn.addEventListener('mouseleave', function() {
ticketBtn.style.opacity = '1';
});
}
}, 0);
}
var modalContent = document.createElement('div');
modalContent.style.cssText = 'padding:24px;';
var contentHtml = '';
contentHtml += '<div style="margin-bottom:16px;"><h3 style="color:' + (colors['--embed-daytext'] || '#9ca3af') + ';font-size:14px;font-weight:500;margin:0 0 4px 0;">Date & Time</h3><p style="color:' + (colors['--embed-listeventhl'] || '#ffffff') + ';font-size:20px;margin:0;">' + eventData.date + '</p></div>';
if (eventData.venue) {
contentHtml += '<div style="margin-bottom:16px;"><h3 style="color:' + (colors['--embed-daytext'] || '#9ca3af') + ';font-size:14px;font-weight:500;margin:0 0 4px 0;">Venue</h3><p style="color:' + (colors['--embed-listeventhl'] || '#ffffff') + ';font-size:20px;margin:0;">' + eventData.venue + '</p></div>';
}
if (eventData.description) {
contentHtml += '<div><h3 style="color:' + (colors['--embed-daytext'] || '#9ca3af') + ';font-size:14px;font-weight:500;margin:0 0 8px 0;">Description</h3><div style="color:' + (colors['--embed-descriptiontext'] || '#9ca3af') + ';">' + eventData.description + '</div></div>';
}
modalContent.innerHTML = contentHtml;
function closeModal() {
var modalToRemove = document.getElementById('gt-modal');
if (modalToRemove) {
modalToRemove.remove();
}
iframe.contentWindow.postMessage({type: 'gt-embed:close-modal'}, '*');
}
modalClose.addEventListener('click', closeModal);
modal.addEventListener('click', function(e) {
if (e.target === modal) closeModal();
});
modalHeader.appendChild(modalTitle);
modalHeader.appendChild(modalActions);
modalDialog.appendChild(modalHeader);
modalDialog.appendChild(modalImage);
if (ticketSection) {
modalDialog.appendChild(ticketSection);
}
modalDialog.appendChild(modalContent);
modal.appendChild(modalDialog);
document.body.appendChild(modal);
}
if (event.data && event.data.type === 'gt-embed:update-hash') {
if (event.data.hash) {
window.location.hash = event.data.hash;
} else {
history.pushState('', document.title, window.location.pathname + window.location.search);
}
}
if (event.data && event.data.type === 'gt-scroll-to' && typeof event.data.offset === 'number') {
var embedContainer = document.getElementById('gt-events-embed');
if (embedContainer) {
var containerRect = embedContainer.getBoundingClientRect();
var scrollTarget = containerRect.top + window.pageYOffset + event.data.offset;
window.scrollTo({
top: scrollTarget,
behavior: 'smooth'
});
}
}
}
window.addEventListener('message', handleMessage);
if (window.location.hash && window.location.hash.startsWith('#event-')) {
iframe.onload = function() {
iframe.contentWindow.postMessage({
type: 'gt-embed:initial-hash',
hash: window.location.hash
}, '*');
};
}
})();
</script>Copy and paste this code into your website where you want the events calendar to appear.