Beautiful interactive UI components for Baileys WhatsApp Bot - Carousels, Buttons, Lists made easy
npm install stephtech-uibash
npm install stephtech-ui
`
š Quick Start
$3
`javascript
const makeWASocket = require('@whiskeysockets/baileys');
const StephUI = require('stephtech-ui');
const sock = makeWASocket(/ your config /);
const ui = new StephUI(sock);
// Send carousel
await ui.carousel(jid, {
header: "šµ Search Results",
cards: [
{
title: "Amazing Video",
body: "š¤ Creator\nā±ļø 2:30\nā¤ļø 100K likes",
image: "https://example.com/image.jpg",
buttons: [
{ id: ".download", text: "š„ Download" },
{ id: "", text: "š View", type: "url", url: "https://youtube.com" }
]
}
]
});
// Send buttons
await ui.buttons(jid, {
text: "Choose an option:",
footer: "My Awesome Bot",
buttons: [
{ id: ".option1", text: "ā
Option 1" },
{ id: ".option2", text: "ā Option 2" }
],
image: "https://example.com/header.jpg"
});
// Send list
await ui.list(jid, {
text: "Select a category",
buttonText: "š View Options",
sections: [
{
title: "š® Entertainment",
rows: [
{ id: ".music", title: "Music", description: "Play music" },
{ id: ".video", title: "Videos", description: "Watch videos" }
]
}
]
});
`
$3
`javascript
const { sendCarousel, sendButtons, sendList } = require('stephtech-ui');
await sendCarousel(sock, jid, { / options / });
await sendButtons(sock, jid, { / options / });
await sendList(sock, jid, { / options / });
`
š API Reference
$3
`javascript
await ui.carousel(jid, {
header: string, // Header text
cards: [ // Array of cards (max 6)
{
title: string, // Card title
body: string, // Card description
image: string, // Image URL (optional)
buttons: [ // Array of buttons
{
id: string, // Button ID
text: string, // Button text
type: "quick_reply" | "cta_url", // Button type
url: string // URL (for cta_url type)
}
]
}
],
quoted: object, // Quoted message (optional)
maxCards: number // Max cards to display (default: 6)
});
`
$3
`javascript
await ui.buttons(jid, {
text: string, // Message text
footer: string, // Footer text (optional)
buttons: [ // Array of buttons
{
id: string, // Button ID
text: string // Button text
}
],
image: string, // Header image URL (optional)
video: string, // Header video URL (optional)
quoted: object // Quoted message (optional)
});
`
$3
`javascript
await ui.urlButtons(jid, {
text: string,
footer: string,
buttons: [
{
text: string, // Button text
url: string // Button URL
}
],
image: string,
quoted: object
});
`
$3
`javascript
await ui.mixedButtons(jid, {
text: string,
footer: string,
buttons: [
{ id: ".cmd", text: "Quick Reply" },
{ text: "Visit", url: "https://...", type: "url" }
]
});
`
$3
`javascript
await ui.list(jid, {
text: string,
title: string, // List title (optional)
buttonText: string, // Button text
footer: string, // Footer (optional)
sections: [ // Array of sections
{
title: string, // Section title
rows: [ // Array of rows
{
id: string, // Row ID
title: string, // Row title
description: string // Row description (optional)
}
]
}
],
quoted: object
});
`
š Translation Support
`javascript
await ui.carousel(jid, {
header: "Results",
phoneNumber: "1234567890",
userConfigManager: yourConfigManager,
translationKey: "search.results",
translationVars: { count: 5 },
cards: [/ ... /]
});
``