Campaigns Carousel Widget - Web Component Integration

Live Demo

Step 1: Include the Script

Add this script tag to your HTML head or before the closing body tag:

          <script
          src="https://your-domain.com/js/campaigns-carousel-widget.js"></script>
        

Step 2: Use the Component

Add the web component anywhere in your HTML:

          <legion-campaigns-carousel max-campaigns="5" theme="light"
          height="280" show-expiration="true">
          </legion-campaigns-carousel>
        

Available Attributes

Attribute	Type	Default	Description
`max-campaigns`	number	5	Maximum number of campaigns to display (1-10)
`theme`	string	light	Widget theme: "light" or "dark"
`height`	number	280	Widget height in pixels (200-500)
`show-expiration`	boolean	true	Show campaign expiration dates
`base-url`	string	auto	Base URL for campaign links
`api-key`	string	-	Optional API key for authenticated requests

Advanced Examples

Dark Theme

          <legion-campaigns-carousel theme="dark" max-campaigns="3"
          height="300"> </legion-campaigns-carousel>
        

Compact Version

          <legion-campaigns-carousel max-campaigns="3" height="240"
          show-expiration="false"> </legion-campaigns-carousel>
        

With Custom Base URL

          <legion-campaigns-carousel base-url="https://your-main-site.com"
          max-campaigns="4"> </legion-campaigns-carousel>
        

Browser Support

This web component works in all modern browsers that support Custom Elements:

Chrome 54+
Firefox 63+
Safari 10.1+
Edge 79+

For older browsers, a polyfill will be automatically loaded.