🛍️ 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 Cards with Dynamic Styling

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

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

async function loadCampaignsGrid() {
  const container = document.getElementById("campaigns-grid");
  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-grid not found.");
  }
}

// Call the function
loadCampaignsGrid();

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:

🃏 Responsive Card Grid - Elegant card layout with 3 cards per row on desktop, 2 on tablet, 1 on mobile
🎨 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
✨ Hover Effects - Smooth animations and visual feedback on interaction

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 💙

Package detail