🎯 Opportunities Widget

Display available opportunities with customizable count and layout options. See the Widgets Docs Index for theming and embed attributes.

📋 About this widget: The Opportunities Widget displays available opportunities in either horizontal carousel or vertical list format. You can customize the number of opportunities shown and filter by tags.

🔧 Customizable Display

  • Configurable opportunity count (1-20)
  • Horizontal carousel or vertical list layout
  • Flexible height options (auto, 100%, or specific px)
  • Tag-based filtering support
  • Responsive design for all devices

🎨 Theme Support

  • Light and dark theme options
  • Customizable styling
  • Seamless integration
  • Brand-friendly appearance

🔄 Real-time Data

  • Live opportunity updates
  • Gift indicators for special offers
  • Expiration date display
  • Direct claim links

🎛️ Widget Configuration

🚀 Live Widget Demo
This is a live demonstration of the Opportunities Widget. Use the controls above to customize it.

HTML Usage

<legion-opportunities
  count="5"
  layout="horizontal"
  tags="retail,food"
  theme="light"
  height="100%"
  base-url="https://your-domain.com"
  api-key="your-api-key"
>
</legion-opportunities>

JavaScript Integration

// Load the widget script
<script src="/js/opportunities-widget.js"></script>

// Listen for widget events
document.addEventListener('DOMContentLoaded', function() {
  const widget = document.querySelector('legion-opportunities');
  
  widget.addEventListener('load', function(event) {
    console.log('Widget loaded:', event.detail);
  });
  
  // Programmatically update widget
  widget.updateConfig({
    count: 10,
    layout: 'vertical',
    theme: 'dark'
  });
  
  // Refresh widget data
  widget.refresh();
});