Log inSign up
Lyte
Lyteuntitled-3191
Public
Like
untitled-3191
Code
5
Val Town is a collaborative website to build and scale JavaScript apps.
Deploy APIs, crons, & store data – all from the browser, and deployed in miliseconds.
Sign up now
Code
/
README.md
Search
…
README.md

WhatsApp Auto-Reply App

A web application that can handle incoming WhatsApp messages and send automated replies on your behalf.

Features

  • Web interface to configure auto-reply settings
  • Webhook endpoint to receive WhatsApp messages
  • Automated response system with customizable messages
  • Message history and analytics
  • Support for different reply modes (always, business hours, away message)

Setup

  1. WhatsApp Business API Setup:

    • Sign up for WhatsApp Business API through Meta Business
    • Get your access token and phone number ID
    • Set webhook URL to: https://your-val-url.web.val.run/webhook

  2. Environment Variables: Set these in your Val Town environment:

    • WHATSAPP_ACCESS_TOKEN: Your WhatsApp Business API access token
    • WHATSAPP_PHONE_NUMBER_ID: Your WhatsApp Business phone number ID
    • WEBHOOK_VERIFY_TOKEN: A secret token for webhook verification

  3. Webhook Configuration:

    • URL: https://your-val-url.web.val.run/webhook
    • Verify Token: Use the same value as WEBHOOK_VERIFY_TOKEN
    • Subscribe to: messages events

Project Structure

├── backend/
│   ├── index.ts              # Main Hono server
│   ├── database/
│   │   ├── migrations.ts     # Database schema
│   │   └── queries.ts        # Database operations
│   └── routes/
│       ├── webhook.ts        # WhatsApp webhook handler
│       ├── api.ts           # API routes for frontend
│       └── static.ts        # Static file serving
├── frontend/
│   ├── index.html           # Main web interface
│   ├── index.tsx            # React app entry point
│   └── components/
│       ├── App.tsx          # Main app component
│       ├── Dashboard.tsx    # Settings dashboard
│       └── MessageHistory.tsx # Message history view
└── shared/
    └── types.ts             # Shared TypeScript types

Usage

  1. Access the web interface to configure your auto-reply settings
  2. Set up your WhatsApp Business API webhook
  3. Messages will be automatically replied to based on your configuration
  4. Monitor message history and analytics through the dashboard

API Endpoints

  • GET / - Web interface
  • POST /webhook - WhatsApp webhook endpoint
  • GET /webhook - Webhook verification
  • GET /api/settings - Get current settings
  • POST /api/settings - Update settings
  • GET /api/messages - Get message history