WHAM Documentation

npm install @manano-ai/wham

import { WhatsApp } from '@manano-ai/wham';

const wa = new WhatsApp({
  token: process.env.WHATSAPP_TOKEN!,
  phoneNumberId: process.env.PHONE_NUMBER_ID!,
  businessAccountId: process.env.BUSINESS_ACCOUNT_ID, // optional
});

// Send a text message
await wa.sendMessage('+1234567890', 'Hello from WHAM!');

// Send a message with buttons
await wa.sendButtons(
  '+1234567890',
  'How can I help you today?',
  [
    { id: 'support', title: 'Get Support' },
    { id: 'sales', title: 'Talk to Sales' },
  ]
);

-c, --config <path>       Config file with credentials     (default: wham.config.ts)
-r, --resources <path>    Resource declarations module      (default: wham/resources.ts)
-s, --state <path>        State file path                   (default: .wham-state.json)

// wham.config.ts
export default {
  token: process.env.WA_TOKEN,
  phoneNumberId: '...',
  businessAccountId: '...',
};

// Simple text message
await wa.sendMessage('+1234567890', 'Hello! How can I help you?');

// The method returns the message ID
const messageId = await wa.sendMessage('+1234567890', 'Your order has shipped!');
console.log('Sent message:', messageId);

// Send image by URL
await wa.sendImage('+1234567890', {
  link: 'https://example.com/product.jpg',
  caption: 'Check out our new product!',
});

// Send image by media ID (after uploading)
await wa.sendImage('+1234567890', { id: 'MEDIA_ID_HERE' });

await wa.sendDocument('+1234567890', {
  link: 'https://example.com/invoice.pdf',
  caption: 'Here is your invoice',
  filename: 'invoice-2024.pdf',
});

await wa.sendLocation('+1234567890', 37.7749, -122.4194, {
  name: 'Our Office',
  address: '123 Main Street, San Francisco, CA',
});

await wa.sendButtons(
  '+1234567890',
  'How would you like to pay?',
  [
    { id: 'pay_card', title: 'Credit Card' },
    { id: 'pay_cash', title: 'Cash on Delivery' },
    { id: 'pay_transfer', title: 'Bank Transfer' },
  ],
  {
    header: 'Payment Options',
    footer: 'Choose your preferred method',
  }
);

await wa.sendList(
  '+1234567890',
  'Browse our menu and pick your favorites.',
  [
    {
      title: 'Pizzas',
      rows: [
        { id: 'margherita', title: 'Margherita', description: 'Classic tomato & mozzarella' },
        { id: 'pepperoni', title: 'Pepperoni', description: 'Spicy pepperoni & cheese' },
      ],
    },
    {
      title: 'Drinks',
      rows: [
        { id: 'cola', title: 'Cola', description: 'Refreshing cola drink' },
        { id: 'water', title: 'Sparkling Water' },
      ],
    },
  ],
  {
    buttonText: 'View Menu',
    header: 'Our Menu',
    footer: 'Tap an item to order',
  }
);

import { BodyText, HeaderImage } from '@manano-ai/wham';

// Simple template with no parameters
await wa.sendTemplate('+1234567890', 'hello_world', { code: 'en_US' });

// Template with parameters
const body = new BodyText(
  'Hello {{1}}, your order {{2}} has shipped!',
  'Alice',      // {{1}} example
  'ORD-1234'    // {{2}} example
);

await wa.sendTemplate(
  '+1234567890',
  'order_shipped',
  { code: 'en_US' },
  [body.toParams('Alice', 'ORD-1234')]
);

import {
  Template,
  HeaderText,
  BodyText,
  FooterText,
  QuickReplyButton
} from '@manano-ai/wham';

const tmpl = new Template('order_update', 'en_US')
  .header(new HeaderText('Order {{1}}', 'ORD-5678'))
  .body(new BodyText('Hi {{1}}, your order is {{2}}.', 'Alice', 'on its way'))
  .footer(new FooterText('Reply STOP to opt out'))
  .buttons(
    new QuickReplyButton('Track Order'),
    new QuickReplyButton('Get Help')
  );

// Submit for approval
await wa.createTemplate('BUSINESS_ACCOUNT_ID', {
  name: 'order_update',
  language: 'en_US',
  category: 'UTILITY',
  components: tmpl.toComponents(),
});

import {
  FlowJSON,
  FlowJSONVersion,
  Screen,
  Layout,
  TextHeading,
  TextInput,
  RadioButtonsGroup,
  Form,
  FlowFooter,
  NavigateAction,
  CompleteAction,
} from '@manano-ai/wham';

// Create the flow in Meta
const flowId = await wa.createFlow(BUSINESS_ID, {
  name: 'Appointment Booking',
  categories: ['APPOINTMENT_BOOKING'],
});

// Build the flow screens
const flow = new FlowJSON({
  version: FlowJSONVersion.LATEST,
  screens: [
    new Screen({
      id: 'SELECT_SERVICE',
      title: 'Book Appointment',
      layout: new Layout({
        children: [
          new TextHeading({ text: 'Choose a Service' }),
          new Form({
            name: 'service_form',
            children: [
              new RadioButtonsGroup({
                name: 'service',
                label: 'Service Type',
                dataSource: [
                  { id: 'haircut', title: 'Haircut - $30' },
                  { id: 'color', title: 'Hair Color - $80' },
                  { id: 'style', title: 'Styling - $50' },
                ],
                required: true,
              }),
            ],
            onSubmitAction: new NavigateAction({ next: 'CONTACT_INFO' }),
          }),
          new FlowFooter({
            label: 'Continue',
            onClickAction: { name: 'submit', payload: {} }
          }),
        ],
      }),
    }),
    new Screen({
      id: 'CONTACT_INFO',
      title: 'Your Details',
      terminal: true,
      layout: new Layout({
        children: [
          new TextHeading({ text: 'Contact Information' }),
          new Form({
            name: 'contact_form',
            children: [
              new TextInput({
                name: 'name',
                label: 'Full Name',
                required: true
              }),
              new TextInput({
                name: 'phone',
                label: 'Phone Number',
                inputType: 'phone',
                required: true
              }),
            ],
            onSubmitAction: new CompleteAction(),
          }),
          new FlowFooter({
            label: 'Book Now',
            onClickAction: { name: 'submit', payload: {} }
          }),
        ],
      }),
    }),
  ],
});

// Upload and publish
await wa.updateFlowJson(flowId, flow.toJSON());
await wa.publishFlow(flowId);

await wa.sendFlow(
  '+1234567890',
  'Book your appointment online.',
  flowId,
  'unique-session-123',  // Token to track this session
  {
    flowCta: 'Book Now',
    flowAction: 'navigate',
    screenId: 'SELECT_SERVICE',
    flowData: {
      preselected_service: 'haircut'
    },
  }
);

import { WebhookHandler, filters } from '@manano-ai/wham';

const handler = new WebhookHandler();

// Handle all incoming messages
handler.onMessage((msg) => {
  console.log(`New message from ${msg.from}: ${msg.type}`);
});

// Handle only text messages
handler.onMessage(filters.text, async (msg) => {
  if (msg.type === 'text') {
    const text = msg.text.body.toLowerCase();

    if (text.includes('hello')) {
      await wa.sendMessage(msg.from, 'Hi there! How can I help?');
    }
  }
});

// Handle button clicks
handler.onCallbackButton(async (event) => {
  console.log(`User clicked: ${event.title}`);

  if (event.data === 'get_support') {
    await wa.sendMessage(event.from, 'A support agent will be with you shortly.');
  }
});

// Handle list selections
handler.onCallbackSelection(async (event) => {
  console.log(`User selected: ${event.title}`);
});

// Handle flow completions
handler.onFlowCompletion(async (event) => {
  console.log(`Flow completed: ${event.flow_token}`);
  console.log('Response data:', event.response);
});

import express from 'express';
import { whatsappWebhook } from '@manano-ai/wham/express';

const app = express();

app.use('/webhook', whatsappWebhook({
  handler,
  verifyToken: process.env.VERIFY_TOKEN!,
  appSecret: process.env.APP_SECRET, // For signature validation
}));

app.listen(3000);