ondc-campaign-sdk
Version:
[](https://www.npmjs.com/package/ondc-campaign-sdk) [](LICENSE) [ • 10.5 kB
Markdown
# 🛍️ ONDC Campaign SDK
[](https://www.npmjs.com/package/ondc-campaign-sdk)
[](LICENSE)
[](#)
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
[](https://drive.google.com/file/d/1k689DUW03KnvPEdFExAki0D2f1jydg5D/view?usp=sharing)
---
## ✨ 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
```bash
npm install ondc-campaign-sdk
```
---
## ⚡ Quick Start
### 1. Fetch Campaign Products (Raw JSON)
```ts
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.
```html
<!-- 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>
```
```html
<div id="campaigns-carousel"></div>
```
```ts
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:**
```ts
// 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:
```ts
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:**
```json
{
"_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:**
```ts
// 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
```json
{
"_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)
```ts
{
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
MIT License © 2025 Samhita CGF
---
## 🤝 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 💙