Package Exports

ondc-campaign-sdk
ondc-campaign-sdk/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (ondc-campaign-sdk) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

🛍️ ONDC Campaign SDK

A lightweight & beautiful SDK to fetch and display live ONDC campaign products. Whether you're building a storefront, promotion landing page, or partner dashboard — plug & play this SDK to show campaigns with style 🚀

📺 Watch How It Works

✨ Features

📢 Campaign Info — name, description, banner, and URLs
🛒 Product Details — seller, pricing, image, category, discount
🎨 Styled UI Renderer — embed product cards with optional themes
📱 Mobile Responsive — optimized HTML ready for any screen
⚙️ Zero Config — just install & run. That's it.

📦 Installation

npm install ondc-campaign-sdk

⚡ Quick Start

1. Fetch Campaign Products (Raw JSON)

import { fetchLiveCampaignProducts } from "ondc-campaign-sdk";

const data = await fetchLiveCampaignProducts();
console.log(data);

2. Render Campaign Carousel with Dynamic Styling

⚠️ Bootstrap Required: This method requires Bootstrap 5.3.0+ CSS and JS to be imported in your project for carousel functionality.

<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

<div id="campaigns-carousel"></div>

import { renderCampaignsByCount } from "ondc-campaign-sdk";

async function loadCampaignsCarousel() {
  const container = document.getElementById("campaigns-carousel");
  if (container) {
    // Examples:
    // Single campaign: '1', '2', '3'
    // Multiple campaigns: '1,2', '2,3', '1,3'
    const html = await renderCampaignsByCount('1,2');
    container.innerHTML = html;
  } else {
    console.warn("Container #campaigns-carousel not found.");
  }
}

// Call the function
loadCampaignsCarousel();

Parameters:

campaigns (string, default: '') - Campaign selection parameter:
- Single campaign: '1', '2', '3' (renders specific campaign)
- Multiple campaigns: '1,2', '2,3', '1,3' (renders specified campaigns in order)

Examples:

// Render only the 1st campaign
await renderCampaignsByCount('1');

// Render only the 3rd campaign  
await renderCampaignsByCount('3');

// Render 1st and 2nd campaigns
await renderCampaignsByCount('1,2');

// Render 2nd and 3rd campaigns
await renderCampaignsByCount('2,3');

// Render 1st and 3rd campaigns
await renderCampaignsByCount('1,3');

Features:

🎠 Bootstrap Carousel - Responsive carousel with navigation arrows and indicators
🎨 Dynamic Styling - Each campaign can have custom styling via campaign_style object
📱 Mobile Responsive - Optimized for all screen sizes
🖱️ Click Tracking - Automatic tracking of campaign clicks via transaction API
🔄 Auto Rotation - Slides automatically every 5 seconds

Template Types:

classic - Centered content with gradient background
split - Left-aligned content with image background
overlay - Centered content with dark overlay card
modern - White floating card over image background

Dynamic Styling Options:

Each campaign can include a campaign_style object with the following options:

interface CampaignStyle {
  titleFontSize?: 'small' | 'medium' | 'large' | 'xl';          // Title font size
  titleColor?: string;                                           // Title color (hex/css color)
  titleFontWeight?: 'normal' | 'bold' | 'bolder';              // Title font weight
  descriptionFontSize?: 'small' | 'medium' | 'large';          // Description font size
  descriptionColor?: string;                                     // Description color
  bannerTemplate?: 'classic' | 'split' | 'overlay' | 'modern'; // Template type
  overlayOpacity?: number;                                       // Overlay opacity (0.0 to 1.0)
  showButton?: boolean;                                          // Show/hide CTA button
  buttonText?: string;                                           // Custom button text
  buttonBgColor?: string;                                        // Button background color
  buttonTextColor?: string;                                      // Button text color
  buttonBorderRadius?: number;                                   // Button border radius (pixels)
  buttonFontSize?: 'small' | 'medium' | 'large';               // Button font size
  buttonFontWeight?: 'normal' | 'semibold' | 'bold';           // Button font weight
}

Example Campaign Data with Styling:

{
  "_id": "campaign123",
  "campaignName": "Summer Sale",
  "description": "Get amazing summer discounts!",
  "banner": "https://example.com/banner.jpg",
  "campaign_style": {
    "bannerTemplate": "overlay",
    "titleFontSize": "large",
    "titleColor": "#ffffff",
    "titleFontWeight": "bold",
    "descriptionFontSize": "medium",
    "descriptionColor": "#e2e8f0",
    "overlayOpacity": 0.6,
    "showButton": true,
    "buttonText": "Shop Now",
    "buttonBgColor": "#10b981",
    "buttonTextColor": "#ffffff",
    "buttonBorderRadius": 12,
    "buttonFontSize": "medium",
    "buttonFontWeight": "semibold"
  }
}

Template Examples:

// Classic template with custom styling
const classicCampaign = {
  campaign_style: {
    bannerTemplate: "classic",
    titleFontSize: "xl",
    titleColor: "#ffffff",
    buttonBgColor: "#3b82f6",
    buttonText: "Explore Collection"
  }
};

// Split template for featured products
const splitCampaign = {
  campaign_style: {
    bannerTemplate: "split",
    titleFontSize: "large",
    overlayOpacity: 0.4,
    buttonBgColor: "#ef4444",
    buttonText: "Shop Category"
  }
};

// Modern template with dark text
const modernCampaign = {
  campaign_style: {
    bannerTemplate: "modern",
    titleColor: "#1f2937",
    descriptionColor: "#4b5563",
    buttonBgColor: "#8b5cf6",
    showButton: true
  }
};

🧪 API Response Format

{
    "_id": "",
    "campaignName": "",
    "description": "",
    "banner": "",
    "products": [
        {
            "productId": "",
            "additiveInfo": "",
            "locations": "",
            "brand": "",
            "commonOrGenericNameOfCommodity": "",
            "variantProducts": [],
            "parentCategory": "",
            "cancellable": "",
            "vendorName": "",
            "manufacturerName": "",
            "aiProductName": "",
            "attrTag": [
                {
                    "code": "",
                    "list": [
                        {
                            "code": "",
                            "value": ""
                        }
                    ]
                }
            ],
            "storefrontDays": [],
            "vegTag": "",
            "returnPickup": "",
            "nutritionalInfo": "",
            "deliveryTimeInShortText": "",
            "productRatings": "",
            "sellerId": "",
            "isNonVeg": "",
            "categoryName": [],
            "aiCategoryName": "",
            "unit": "",
            "galleryImages": [
                {
                    "url": "",
                    "type": ""
                }
            ],
            "hubId": "",
            "tags": [],
            "categoryId": [],
            "availableOnCod": "",
            "manufacturerAddress": "",
            "brandName": "",
            "groupAttributes": {
                "G1": {
                    "Brand": "",
                    "Colour": ""
                },
                "G3": {
                    "Gross Weight Unit of Measurement": "",
                    "Length x Breadth x Height (Cubic Cm.)": ""
                },
                "G2": {
                    "Time to Ship": ""
                },
                "G4": {
                    "Manufacturer": "",
                    "COD available (Y/N)": "",
                    "Returnable (Y/N)": ""
                },
                "g1": {
                    "Cancellable (Y/N)": ""
                }
            },
            "netQuantity": "",
            "storeName": "",
            "returnable": "",
            "discountPercentage": "",
            "winningVariant": "",
            "timeToShipUnit": "",
            "countryOfOrigin": "",
            "socialCredsTags": [],
            "discountedPrice": "",
            "ondcCategoryId": "",
            "discountEndDate": "",
            "imgUrl": "",
            "customerSupportDetails": "",
            "variantValue": "",
            "measureOfCommodityInPkg": "",
            "manufacturingDate": "",
            "monthYearOfManufacturePackingImport": "",
            "timeToShip": "",
            "customizedBlockId": "",
            "providerId": "",
            "estimatedDeliveryTime": "",
            "unitAmount": "",
            "tagsDetails": [],
            "productName": "",
            "ean": "",
            "storeImage": "",
            "regularPrice": "",
            "returnWindow": "",
            "_id": "",
            "images": []
        }
    ],
    "isActive": "",
    "createdAt": "",
    "categories": [],
    "__v": ""
}

🎨 Style Options (Optional)

{
  primary: "#3d5af1",
  primaryDark: "#2a3eb1",
  accent: "#ff6b6b",
  text: "#333333",
  textLight: "#777777",
  bgLight: "#f8f9fa",
  white: "#ffffff",
  shadow: "0 10px 30px rgba(0,0,0,0.08)",
  borderRadius: "12px"
}

📜 License

🤝 Contributing

We'd love your help to make this better!

🐞 Report bugs
💡 Suggest features
📥 Submit pull requests
🌟 Star the repo if you find it useful!

💬 Support

Have a question or need help?
Feel free to reach out: mja@samhita.org

🧩 Coming Soon

Filters by category or seller
Sorting options (price, discount)
Lazy loading for product lists
CDN-ready minified build

Enjoy building cool stuff with ONDC 💙