Top

Wapi documentation

## Admin Settings

#### Welcome to WAPI!

Get an AI summary of this page
ChatGPT Gemini Grok Perplexity

#### Overview

The **Admin Settings** module is the centralized command center for your WAPI platform. It provides administrators with absolute control over global application behavior, ranging from front-end branding and identity to deep technical integrations like WhatsApp API credentials and SMTP mail servers.

By leveraging this module, you can fine-tune the platform's persona, enforce usage limits, manage system availability through maintenance modes, and ensure that every automated communication remains on-brand and deliverable.

#### Settings Navigation

The Settings interface is organized into eight functional zones:

App info & preferences
Logos & icons
API credentials
SMTP configuration
Google API credentials
AWS S3 configuration
File & group limits
Maintenance & error pages

#### General Settings

Manage core application identity and global functional behaviors.

##### Application Info

Setting Field | Functional Description
--- | ---
App Name | The primary display name of the platform (e.g., "Wapi"). Appears in titles and emails.
App Email | The primary system email used for administrative notifications and status updates.
App Description | A concise summary of the platform's purpose (e.g., "WhatsApp Marketing Platform").
Support Email | The customer-facing email address where users can report issues or request help.
Default Theme Mode | Sets the global visual preference (Light or Dark) for new users.
Session Expiration | Defines the duration (in days) that a user session remains active before requiring re-login.

##### Global Preferences

Allow User Signup

When enabled, new users can register for accounts directly from the landing page.

Demo Mode

Protects sensitive data by masking credentials and preventing critical system changes.

#### Logos & Icons

Set URLs or upload images for your application logos and icons.

Favicon

The small icon appearing in browser tabs. Recommended size: 32x32px or 64x64px.

Logo (Light Mode)

The primary logo displayed on light backgrounds (e.g., standard layout).

Logo (Dark Mode)

High-contrast logo for dark theme modes or dark navigation bars.

Sidebar Favicon (Light)

Specialized icon used when the sidebar is collapsed in light mode.

Sidebar Favicon (Dark)

Specialized icon used when the sidebar is collapsed in dark mode.

#### WhatsApp API Credentials

Configure your Meta WhatsApp Business API credentials to enable messaging.

Credential Field | Functional Description
--- | ---
App ID | The unique identifier for your Meta Application (found in Meta App Dashboard).
App Secret | The secret authentication key used to verify your app's identity with Meta.
Configuration ID | The specific WhatsApp Configuration ID assigned to your business account.
Webhook Verification Token | A custom secret string (e.g., `v3r1fY_T0k3n_9x8z7`) used by Meta to verify your webhook's authenticity.
WhatsApp Webhook URL | The server endpoint (e.g., `http://localhost:5000/whatsapp/webhook`) where Meta sends message updates.

#### SMTP Configuration

Configure outgoing email via SMTP to enable system alerts and user notifications.

##### Server Settings

SMTP Field | Functional Description
--- | ---
SMTP Host | The address of your mail server (e.g., `smtp.gmail.com` or `smtp.sendgrid.net`).
SMTP Port | The protocol port (usually `587` for TLS or `465` for SSL encryption).
SMTP Username | The account email or username used to authenticate with the mail server.
SMTP Password | The secret password or app-specific token for mail server authentication.

##### Sender Details

From Name

The name recipients will see in their 'From' field (e.g., "My Application").

From Email

The email address used as the sender (e.g., "noreply@yourdomain.com").

#### Google Cloud Integration

Configure Google OAuth2 credentials to enable features like Google Calendar integration and Login with Google.

Credential Field | Functional Description
--- | ---
Google Client ID | The unique public identifier for your Google Cloud project application.
Google Client Secret | The private secret key used to authenticate your application with Google services.
Google Redirect URI | The authorized callback URL (e.g., `https://yourdomain.com/api/auth/google/callback`).

##### Setup Instructions

Step 1: Go to Google Cloud Console

Open https://console.cloud.google.com/ and sign in.

Step 2: Create a New Project

Click the project dropdown (top left) → New Project. Enter a name and click Create.

Step 3: Enable Required API

Go to APIs & Services → Credentials. Search for and enable Google OAuth API or Google People API.

Step 4: Create OAuth Credentials

Go to APIs & Services → Credentials. Click + Create Credentials → OAuth client ID. Choose Web Application.

Step 5: Add Redirect URI

Under Authorized Redirect URIs, add your callback URL (e.g., `http://localhost:3000/auth/google/callback` or your production domain).

Step 6: Copy Credentials

After creating, copy the Client ID and Client Secret into your admin settings.

Step 7: Configure OAuth Consent Screen

Go to APIs & Services → OAuth consent screen. Choose "External" and fill in the required app details.

Test Email (Testing Mode)

Go to “Audience” or “Test Users”

While your app is in "Testing" status, only users added to the Test users list can log in. Click + Add users and enter the Gmail addresses you'll use for testing.

#### AWS Configuration

Configure your AWS S3 credentials for scalable media storage.

Purpose: After enable AWS, your data will be stored in AWS S3 bucket.

Credential Field | Functional Description
--- | ---
AWS Access Key ID | Your unique identification key for AWS S3 access. Found in IAM Security Credentials.
AWS Secret Access Key | The primary authentication key. (Visible only once during creation).
AWS Region | The physical location of your bucket server (e.g., `us-east-1` or `ap-south-1`).
AWS S3 Bucket | The unique name of the bucket you created for storing application files.

##### AWS S3 Setup Guide

1. Create an S3 Bucket

Go to AWS Dashboard → Search Amazon S3 → Create bucket.

- Bucket Type: Select General purpose.
- Bucket name: Enter a unique name (e.g., `wapi-storage-bucket`).
- AWS Region: Select your preferred server location (e.g., `ap-south-1`).
- Object Ownership: Select ACLs enabled and Bucket owner preferred.
- Block Public Access: Uncheck Block all public access to allow external file retrieval.
- Encryption: Keep default SSE-S3 and Enable Bucket Key for optimized cost.

As per the given image, fill the details and click on Create bucket.

You will get the bucket name and bucket region. Copy them and save them somewhere safe.

2. Create IAM User & Access Keys

Search IAM in the AWS Management Console search bar and navigate to Users → Create user.

Step A: Specify User Details

- Enter a descriptive name (e.g., `wapi-s3-user`).

Step B: Set Permissions

- Select Attach policies directly.
- Search for AmazonS3FullAccess and ensure it is checked.

Step C: Review & Create

- Verify the details and click Create user.

Step D: Generate Access Keys

- Navigate to the newly created user and click on the Security credentials tab.
- Scroll down to the Access keys section and click Create access key.

- Select Application running outside AWS from the best practices list and click Next.

- (Optional) Set a description tag and click Create access key.

- Critical: Copy your Access Key ID and Secret Access Key immediately and save them securely.

5. Storage Monitoring

You can track your storage usage and manage your uploaded files by navigating to the Buckets section in the Amazon S3 console.

click on bucket name to monitor your storage

Note:after collecting all the details, go to the Admin Settings page and click on the AWS tab and enter the details in the respective fields.

#### Infrastructure & Governance (Limits)

##### Communication Features

Feature | Description | Default State
--- | --- | ---
Media Sharing | Enable or disable the capability for users to send media files across the platform. | Enabled

##### File Upload & Storage Limits

Category | Field Name | Value (MB / Count) | Description
--- | --- | --- | ---
Documents | Document Limit | `15 MB` | Maximum size for PDF, DOC, etc.
Audio | Audio Limit | `15 MB` | Maximum size for MP3, WAV, etc.
Video | Video Limit | `20 MB` | Maximum size for MP4, MOV, etc.
Images | Image Limit | `10 MB` | Maximum size for JPG, PNG, etc.
Batching | Multi-file Share Limit | `10` | Max number of files per single share operation.
Quota | Total Storage Limit | `100 MB` | Global storage cap per user/group.

Allowed File Upload Types:

jpg, jpeg, png, gif, webp, svg, mp4, mpeg, mov, webm, mp3, wav, ogg, pdf, doc, docx, xls, xlsx, ppt, pptx, txt, json, csv

##### Storage Management

- Restore Storage on Delete: If enabled, deleted files will be subtracted from the user's total storage usage, freeing up quota.

#### Maintenance Protocols

##### Maintenance Mode

Setting | Field Name | Example / Default | Description
--- | --- | --- | ---
Status | Enable Maintenance Mode | Disabled | When enabled, users will see the maintenance page instead of the app.
Title | Maintenance Title | `Under Maintenance` | Main heading displayed on the maintenance screen.
Message | Maintenance Message | `We are performing some maintenance...` | Detailed information explaining the reason for downtime.
Whitelisting | Allowed IPs | `eg. 192.168.1.1` | IP addresses that can bypass maintenance mode to access the app.

##### Maintenance Page Visuals

- Maintenance Page Image: Upload a custom graphic or provide a URL to style the maintenance experience.

##### Operational Best Practices

- Incremental Saves: Each section (General, Branding, etc.) requires a separate Save Changes click.
- SMTP Verification: Always use the Test Configuration button after updating mail server details.
- Google Synchronization: Ensure your Google Cloud Project remains active and the Redirect URIs match your current environment.
- Meta Synchronization: Regularly review WhatsApp API credentials to ensure tokens haven't expired.
- Live Verification: After enabling Maintenance Mode, verify the appearance of your custom 503 error page.