# ποΈ 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 π
---
## β¨ 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. Generate Styled HTML (for embedding)
```ts
import { fetchLiveCampaignProductsWithHtml } from "ondc-campaign-sdk";
const html = await fetchLiveCampaignProductsWithHtml(5); // show 5 products
document.getElementById("campaign-section").innerHTML = html;
```
With custom styles:
```ts
const styles = {
primary: "#0d9488",
accent: "#ef4444",
bgLight: "#f0fdfa",
borderRadius: "16px",
};
const html = await fetchLiveCampaignProductsWithHtml(6, styles);
```
---
### 3. Render Directly into the DOM
```ts
import { renderLiveCampaignProducts } from "ondc-campaign-sdk";
// Renders 6 products directly into
renderLiveCampaignProducts(6);
```
With styles:
```ts
renderLiveCampaignProducts(6, {
primary: "#7c3aed",
accent: "#f43f5e",
bgLight: "#faf5ff",
});
```
---
## π§ͺ API Response Format
```json
{
"_id": "",
"campaignName": "",
"description": "",
"banner": "",
"products": [
{
"prices": {
"regular": {
"price": "",
"formatted_price": ""
},
"final": {
"price": "",
"formatted_price": ""
}
},
"ratings": {
"average": "",
"total": ""
},
"reviews": {
"total": ""
},
"id": "",
"sku": "",
"name": "",
"description": "",
"url_key": "",
"base_image": {
"small_image_url": "",
"medium_image_url": "",
"large_image_url": "",
"original_image_url": ""
},
"images": [
{
"small_image_url": "",
"medium_image_url": "",
"large_image_url": "",
"original_image_url": ""
}
],
"is_new": "",
"is_featured": "",
"on_sale": "",
"is_saleable": "",
"is_wishlist": "",
"min_price": "",
"price_html": ""
}
],
"isActive": "",
"createdAt": "",
"__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"
}
```
---
## π Full HTML Example
```html
ONDC Campaign
```
Or embed into a custom container:
```html
```
---
## π License
MIT License Β© 2025 [Your Company Name]
---
## π€ 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: `dev-support@yourdomain.com`
---
## 𧩠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 π