WhatsApp Template Management

A comprehensive template management system for WhatsApp Business API message templates. This open-source tool provides an intuitive interface for creating, editing, approving, and managing WhatsApp message templates with advanced features for bulk operations and analytics.

🚀 Features

Template Editor: Rich text editor with WhatsApp template syntax support
Bulk Operations: Create, edit, and manage multiple templates at once
Approval Workflow: Submit templates for WhatsApp approval with status tracking
Template Analytics: Track template performance and usage statistics
Multi-language Support: Create templates in multiple languages
Template Categories: Organize templates by categories and use cases
Version Control: Track template changes and maintain version history
Export/Import: Export templates to JSON/CSV and import from external sources
Preview Mode: Preview templates before submission
Template Library: Pre-built template examples and best practices

🛠️ Tech Stack

Frontend: Next.js 15 with App Router
UI Framework: React 19
Styling: Tailwind CSS
Components: shadcn/ui
Language: TypeScript
Package Manager: pnpm
Build Tool: Turbo
Rich Text Editor: Tiptap
State Management: Zustand

📦 Installation

Prerequisites

Node.js >= 20
pnpm >= 10.15.0

Setup

# Clone the repository
git clone https://github.com/sendzen-io/whatsapp-template-management.git

# Navigate to the project directory
cd whatsapp-template-management

# Install dependencies
pnpm install

# Start the development server
pnpm dev

The application will be available at http://localhost:3000

🎯 Usage

Basic Template Creation

import { TemplateEditor } from '@sendzen/ui-template-management'

function CreateTemplate() {
  const handleSave = (template) => {
    console.log('Template saved:', template)
  }

  return (
    <TemplateEditor
      onSave={handleSave}
      category="UTILITY"
      language="en_US"
    />
  )
}

Advanced Template Management

import { TemplateManager } from '@sendzen/ui-template-management'

function TemplateDashboard() {
  return (
    <TemplateManager
      features={{
        bulkOperations: true,
        analytics: true,
        versionControl: true,
        exportImport: true
      }}
      onTemplateUpdate={(template) => {
        // Handle template updates
      }}
      onBulkOperation={(operation, templates) => {
        // Handle bulk operations
      }}
    />
  )
}

🔧 Configuration

Environment Variables

Create a .env.local file in the root directory:

# WhatsApp Business API Configuration
WHATSAPP_ACCESS_TOKEN=your_access_token_here
WHATSAPP_PHONE_NUMBER_ID=your_phone_number_id
WHATSAPP_BUSINESS_ACCOUNT_ID=your_business_account_id

# Template Management API
TEMPLATE_API_BASE_URL=https://api.sendzen.io/templates
TEMPLATE_API_KEY=your_template_api_key

# Optional: Database for template storage
DATABASE_URL=your_database_url_here

# Optional: File storage for media
STORAGE_BUCKET=your_storage_bucket
STORAGE_ACCESS_KEY=your_storage_access_key

# Optional: Analytics
GOOGLE_ANALYTICS_ID=your_ga_id

Template Configuration

interface TemplateConfig {
  categories: TemplateCategory[]
  languages: Language[]
  maxTemplates: number
  approvalWorkflow: boolean
  autoSave: boolean
  versionControl: boolean
}

📝 Template Types

1. Text Templates

Simple text messages with optional parameters:

Hello {{1}}, your order #{{2}} has been confirmed. 
Expected delivery: {{3}}

2. Media Templates

Templates with images, videos, or documents:

🎉 Welcome to our store!

Check out our latest collection: {{1}}

3. Interactive Templates

Templates with buttons and quick replies:

Your appointment is confirmed for {{1}}

Please reply with:
• 1 - Confirm
• 2 - Reschedule
• 3 - Cancel

4. Location Templates

Templates for sharing location information:

📍 We're located at:

{{1}}

Directions: {{2}}

🎨 Template Editor Features

Rich Text Editor

Bold/Italic: Format text with WhatsApp-compatible formatting
Parameter Insertion: Easy insertion of dynamic parameters
Emoji Support: Full emoji picker and support
Character Count: Real-time character counting
Preview Mode: Live preview of template appearance

Template Validation

Syntax Checking: Validate template syntax before submission
Parameter Validation: Ensure all parameters are properly formatted
Character Limits: Enforce WhatsApp character limits
Content Guidelines: Check against WhatsApp content policies

Advanced Features

Template Cloning: Clone existing templates for quick creation
Template Library: Access to pre-built template examples
Auto-save: Automatic saving of draft templates
Collaboration: Multi-user template editing with conflict resolution

📊 Analytics & Reporting

Template Performance Metrics

Usage Statistics: Track how often templates are used
Delivery Rates: Monitor template delivery success rates
Response Rates: Track user responses to templates
Error Analysis: Identify and analyze template failures

Reporting Dashboard

Usage Trends: Visual charts of template usage over time
Category Analysis: Performance breakdown by template category
Language Analytics: Usage statistics by language
Export Reports: Export analytics data to CSV/PDF

🔄 Workflow Management

Approval Process

Draft Creation: Create template in draft mode
Internal Review: Internal team review and approval
WhatsApp Submission: Submit to WhatsApp for approval
Status Tracking: Track approval status and feedback
Live Deployment: Deploy approved templates

Status Tracking

Draft: Template being created/edited
Under Review: Template submitted for internal review
Pending Approval: Submitted to WhatsApp for approval
Approved: Template approved and ready for use
Rejected: Template rejected with feedback
Archived: Template no longer in use

🚀 Bulk Operations

Bulk Template Creation

CSV Import: Import templates from CSV files
Template Duplication: Duplicate templates with modifications
Batch Processing: Process multiple templates simultaneously

Bulk Template Management

Bulk Edit: Edit multiple templates at once
Bulk Delete: Delete multiple templates
Bulk Status Update: Update status of multiple templates
Bulk Export: Export multiple templates to various formats

🌍 Multi-language Support

Supported Languages

English (en_US, en_GB)
Spanish (es_ES, es_MX)
French (fr_FR)
German (de_DE)
Italian (it_IT)
Portuguese (pt_BR, pt_PT)
Russian (ru_RU)
Arabic (ar_SA)
Chinese (zh_CN, zh_TW)
Japanese (ja_JP)
Korean (ko_KR)

Language Management

Language Detection: Automatic language detection
Translation Tools: Built-in translation assistance
Language-specific Validation: Validation rules per language
Cultural Adaptation: Adapt templates for different cultures

📱 Mobile Support

Responsive Design

Mobile-first: Optimized for mobile devices
Touch-friendly: Touch-optimized interface
Offline Support: Work offline with sync capabilities
Progressive Web App: Install as mobile app

Mobile Features

Quick Actions: Swipe gestures for quick operations
Voice Input: Voice-to-text for template creation
Camera Integration: Capture images for media templates
Push Notifications: Real-time notifications for approvals

🔒 Security & Compliance

Data Protection

Encryption: All data encrypted in transit and at rest
Access Control: Role-based access control
Audit Logs: Comprehensive audit logging
Data Retention: Configurable data retention policies

WhatsApp Compliance

Content Policy: Automatic content policy checking
Template Guidelines: Enforce WhatsApp template guidelines
Rate Limiting: Respect WhatsApp API rate limits
Error Handling: Proper error handling and reporting

🧪 Testing

Template Testing

# Run template validation tests
pnpm test:templates

# Run integration tests
pnpm test:integration

# Run E2E tests
pnpm test:e2e

Test Templates

The system includes test templates for development:

Sample text templates
Media template examples
Interactive template samples
Multi-language test templates

🚀 Deployment

Vercel (Recommended)

# Install Vercel CLI
npm i -g vercel

# Deploy to Vercel
vercel --prod

Docker

# Build Docker image
docker build -t whatsapp-template-management .

# Run with Docker Compose
docker-compose up -d

Self-hosted

# Build for production
pnpm build

# Start production server
pnpm start

📚 API Reference

Template API Endpoints

Endpoint	Method	Description
`/api/templates`	GET	List all templates
`/api/templates`	POST	Create new template
`/api/templates/{id}`	GET	Get specific template
`/api/templates/{id}`	PUT	Update template
`/api/templates/{id}`	DELETE	Delete template
`/api/templates/bulk`	POST	Bulk operations
`/api/templates/export`	GET	Export templates
`/api/templates/import`	POST	Import templates

Webhook Events

Event	Description
`template.created`	Template created
`template.updated`	Template updated
`template.deleted`	Template deleted
`template.approved`	Template approved
`template.rejected`	Template rejected

🤝 Contributing

We welcome contributions! Here's how you can help:

Fork the repository
Create a feature branch: git checkout -b feature/amazing-feature
Make your changes: Add new features or fix bugs
Run tests: pnpm test
Commit changes: git commit -m 'Add amazing feature'
Push to branch: git push origin feature/amazing-feature
Open a Pull Request

Development Guidelines

Follow TypeScript best practices
Use conventional commit messages
Add tests for new features
Update documentation as needed
Ensure all linting passes
Follow WhatsApp template guidelines

🐛 Troubleshooting

Common Issues

Template Approval Failures

Check template content against WhatsApp guidelines
Verify parameter formatting
Ensure proper template category
Review character limits

Bulk Import Issues

Check CSV format and headers
Validate template syntax
Verify language codes
Check file size limits

Performance Issues

Check database connection
Monitor API rate limits
Optimize template queries
Clear cache if needed

Getting Help

Check the Issues page
Review the Discussions section
Join our community Discord server
Read the FAQ

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

Built with Next.js
UI components from shadcn/ui
Rich text editor from Tiptap
Icons from Lucide
Powered by WhatsApp Business API

📞 Support

Documentation: docs.sendzen.io
Community: Discord
Email: support@sendzen.io
Website: sendzen.io

Made with ❤️ by the SendZen team

Name		Name	Last commit message	Last commit date
Latest commit History 105 Commits
apps/template-management		apps/template-management
packages		packages
.eslintrc.js		.eslintrc.js
.gitignore		.gitignore
README.md		README.md
package.json		package.json
pnpm-lock.yaml		pnpm-lock.yaml
pnpm-workspace.yaml		pnpm-workspace.yaml
readme-template-management.md		readme-template-management.md
tsconfig.json		tsconfig.json
turbo.json		turbo.json

Folders and files

Latest commit

History

Repository files navigation

WhatsApp Template Management

🚀 Features

🛠️ Tech Stack

📦 Installation

Prerequisites

Setup

🎯 Usage

Basic Template Creation

Advanced Template Management

🔧 Configuration

Environment Variables

Template Configuration

📝 Template Types

1. Text Templates

2. Media Templates

3. Interactive Templates

4. Location Templates

🎨 Template Editor Features

Rich Text Editor

Template Validation

Advanced Features

📊 Analytics & Reporting

Template Performance Metrics

Reporting Dashboard

🔄 Workflow Management

Approval Process

Status Tracking

🚀 Bulk Operations

Bulk Template Creation

Bulk Template Management

🌍 Multi-language Support

Supported Languages

Language Management

📱 Mobile Support

Responsive Design

Mobile Features

🔒 Security & Compliance

Data Protection

WhatsApp Compliance

🧪 Testing

Template Testing

Test Templates

🚀 Deployment

Vercel (Recommended)

Docker

Self-hosted

📚 API Reference

Template API Endpoints

Webhook Events

🤝 Contributing

Development Guidelines

🐛 Troubleshooting

Common Issues

Getting Help

📄 License

🙏 Acknowledgments

📞 Support

About

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Contributors

Uh oh!

Languages

Packages