🎯 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

Tune the live demo below. Core settings stay aligned in a responsive grid; optional theming overrides use monospace attribute chips so labels don't wrap into neighboring inputs.

Card Theming (optional overrides)

Leave blank to use the selected preset. Attribute names stay on one line as code chips so inputs align across rows.

color
color
CSS
CSS
CSS
CSS
CSS
color
color
CSS
🚀 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();
});