<constell-widget venue="your-venue-uuid"></constell-widget>

<constell-widget 
    venue="018fe794-d2b3-7370-955d-f68b7880d224"
    locale="en"
    position="top-right"
    offset-x="20"
    offset-y="20"
    brand-color="#FF6B6B"
    button-label="Get Quote"
    button-label-close="Close"
    min-guest-amount="10"
    max-guest-amount="500"
    guest-amount-step="5"
    min-budget-amount="1000"
    max-budget-amount="50000"
    budget-step="250">
</constell-widget>

<script>
// Get reference to widget
const widget = document.querySelector('constell-widget');

// Change brand color based on season
const month = new Date().getMonth();
if (month >= 11 || month <= 1) { // Winter
  widget.setAttribute('brand-color', '#2E8B57'); // Green
} else if (month >= 2 && month <= 4) { // Spring
  widget.setAttribute('brand-color', '#FF69B4'); // Pink
} else if (month >= 5 && month <= 7) { // Summer
  widget.setAttribute('brand-color', '#FFD700'); // Gold
} else { // Fall
  widget.setAttribute('brand-color', '#FF4500'); // Orange
}

// Update based on user preferences
function updateWidgetLocale(userLocale) {
  widget.setAttribute('locale', userLocale);
  
  if (userLocale === 'en') {
    widget.setAttribute('button-label', 'Get Quote');
    widget.setAttribute('button-label-close', 'Close');
  } else {
    widget.setAttribute('button-label', 'Offerte aanvragen');
    widget.setAttribute('button-label-close', 'Sluiten');
  }
}
</script>

<!-- Add to your theme's footer.php or use a plugin -->
<script type="module" src="https://cdn.constell.com/widget/latest/constell-widget.js"></script>
<constell-widget 
    venue="<?php echo get_option('constell_venue_id'); ?>"
    brand-color="<?php echo get_theme_mod('primary_color', '#44C7CE'); ?>"
    locale="<?php echo get_locale() === 'nl_NL' ? 'nl' : 'en'; ?>">
</constell-widget>