Customize the appearance of your opportunities widget with real-time preview. Perfect for WordPress and any website.
Quick Presets
How many opportunities to display (1-20)
Display orientation
Comma-separated tags to filter opportunities
Widget height setting
Your website domain (leave empty for current origin)
Panel Opacity Gradient
Controls the dark overlay that makes text readable
Start: 0.6
Mid: 0.45
End: 0.25
Base color for panel overlay (R, G, B)
CSS box-shadow value
Rounded corners for the card
CSS box-shadow for the card
How fast animations play
Hover Scale: 1.02
How much the card grows on hover (1 = no scale)
Live Preview
Embed Code
Complete Embed Code
<script src="https://your-domain.com/js/opportunities-widget.js"></script> <legion-opportunities count="5" layout="horizontal" base-url="https://your-domain.com" ></legion-opportunities>
Step 1: Add Script (One Time)
Add this script to your theme's header.php or use a plugin like "Header Footer Code Manager"
<script src="https://your-domain.com/js/opportunities-widget.js"></script>
Step 2: Add Widget
Paste this code in a Custom HTML block (Gutenberg) or switch to Text/HTML mode in Classic Editor
<legion-opportunities count="5" layout="horizontal" base-url="https://your-domain.com" ></legion-opportunities>
Gutenberg/Block Editor: Use a "Custom HTML" block and paste the widget code.
Classic Editor: Switch to "Text" mode (not Visual) and paste the code.
Elementor: Use the "HTML" widget and paste the complete embed code.
Widget Areas: Use a "Custom HTML" widget in your sidebar or footer.
Script Placement: For best performance, add the script tag to your site footer instead of header.
Complete reference for all available customization options.
Core Attributes
count - Number of opportunities (1-20), default: 5 layout - "horizontal" or "vertical", default: horizontal tags - Comma-separated filter tags theme - Preset theme name (light, dark, minimal, bold, corporate, vibrant) height - "auto", "100%", or specific px value base-url - Your deployment URL api-key - Optional API key for authentication
Panel Theming
opp-panel-start - Gradient start opacity (0-1), default: 0.6 opp-panel-mid - Gradient mid opacity (0-1), default: 0.45 opp-panel-end - Gradient end opacity (0-1), default: 0.25 opp-panel-color - RGB color, e.g. "0, 0, 0" or "99, 102, 241" opp-panel-shadow - CSS box-shadow value opp-panel-blur - Backdrop blur, e.g. "2px" opp-panel-radius - Border radius, e.g. "10px"
Card Theming
opp-card-radius - Card border radius, e.g. "12px" opp-card-shadow - Card box-shadow value
Typography
opp-title-size - Font size, e.g. "clamp(18px, 2.6vmin, 36px)" opp-title-color - Text color, e.g. "#ffffff" opp-title-weight - Font weight (400-900), default: 800 opp-title-shadow - Text shadow value opp-title-font-family - Font family, default: inherit opp-description-size - Font size for description opp-description-color - Text color, e.g. "rgba(255,255,255,0.95)" opp-description-shadow - Text shadow value opp-expires-size - Font size for expiration text opp-expires-color - Text color opp-expires-shadow - Text shadow value
Animations
opp-transition-duration - Animation speed, e.g. "0.3s" opp-animation-scale - Hover scale factor, e.g. 1.02 (1 = no scale)
default - Standard light theme with balanced overlay
dark - Higher contrast dark overlay for maximum readability
minimal - Subtle overlay, no shadows, clean look
bold - High contrast with larger typography and heavy shadows
corporate - Professional slate color, minimal animations, sharp corners
vibrant - Indigo-tinted overlay with glow effects
• Use clamp() for font sizes to keep text readable across different embed sizes
• Keep panel alpha values between 0.25-0.8 for best results over bright images
• If using a light host background, increase shadows for more separation
• Set opp-animation-scale="1" to disable hover zoom for a more static look
• For WordPress, add the script tag only once per page (in header or footer)
• Test on both desktop and mobile to ensure your styling works at all sizes
Styles not changing: Ensure attributes are set directly on the <legion-opportunities> element and clear browser cache
Widget not appearing: Confirm your base-url points to the correct environment (staging vs production)
WordPress issues: Make sure you are in "Text/HTML" mode, not "Visual" mode when pasting code
CORS errors: Ensure your domain is allowed in the widget's CORS configuration
Script not loading: Check browser console for errors and verify the script URL is accessible