v0.0.7 - configurable app name + README for public sharing

Eran · claude · Eran · commit 4992e80fd283 · 2026-03-16T12:38:42.000+02:00
- Remove all hardcoded "Studio Shimshi" references from HTML/title/placeholders
- Add Business/App Name field to Settings modal (stored in localStorage)
- applyConfig() now updates page title and header from saved app name
- Add README.md with setup instructions and feature overview

Co-Authored-By: Claude Sonnet 4.6 &lt;noreply@anthropic.com&gt;
diff --git a/README.md b/README.md
@@ -0,0 +1,70 @@
+# WhatsApp Manager — Evolution API UI
+
+A browser-based WhatsApp management interface built on top of [Evolution API v2](https://github.com/EvolutionAPI/evolution-api). No installation, no Node.js, no build step — just open `index.html`.
+
+---
+
+## Prerequisites
+
+- A running **Evolution API v2** instance (self-hosted)
+- A connected WhatsApp instance on that server
+- A modern browser (Chrome / Edge / Firefox)
+
+---
+
+## Setup
+
+1. Download or clone this repo
+2. Open `index.html` directly in your browser
+3. Click the **Settings** gear button in the top-right
+4. Fill in:
+   - **Business / App Name** — display name shown in the header (e.g. your company name)
+   - **Server URL** — your Evolution API base URL (e.g. `https://your-server.com`)
+   - **Instance Name** — the WhatsApp instance name configured in your Evolution API
+   - **API Key** — your Evolution API key
+5. Click **Save** — credentials are stored locally in your browser (never sent anywhere else)
+
+---
+
+## Features
+
+### Messaging
+| Type | Description |
+|------|-------------|
+| Text | Send text messages to one or multiple recipients (chip-based input) |
+| Media | Send images, videos, documents with optional caption |
+| Voice Note | Send audio files as voice messages |
+| Location | Send GPS coordinates with place name and address |
+| Contact | Share a contact card (vCard) |
+| Reaction | React to a specific message with an emoji |
+| Poll | Create a poll with up to 12 options |
+| Buttons | Send interactive button messages |
+| List | Send interactive list messages with sections |
+| Status/Story | Post WhatsApp status updates (text, image, video, audio) |
+
+### Groups
+- **Browse & Send** — fetch all groups, select one or more, broadcast a message
+- **Create Group** — create a new group with participants
+- **Manage Group** — update subject, description, picture, participants, settings, invite links, ephemeral timer
+
+### Bulk Sending
+- Send to multiple recipients or groups with a **randomized delay** between messages (configurable min/max seconds) to simulate human sending behavior
+
+### Phone Number Handling
+- Validates phone numbers using [libphonenumber-js](https://github.com/nicolo-ribaudo/libphonenumber-js)
+- Auto-normalizes local numbers to E.164 format (e.g. `0501234567` → `972501234567` for IL)
+- Configure default country in Settings for local number parsing
+
+---
+
+## Security
+
+- All credentials (API key, instance name, server URL) are stored exclusively in your **browser's localStorage**
+- Nothing is hardcoded — the repo contains zero credentials
+- Credentials never leave your browser except in direct API calls to your own Evolution API server
+
+---
+
+## License
+
+MIT — free to use and modify.
diff --git a/index.html b/index.html
@@ -3,7 +3,7 @@
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
-  <title>Organization Title — WhatsApp Manager</title>
+  <title>WhatsApp Manager</title>
   <script src="https://unpkg.com/libphonenumber-js@1.11.4/bundle/libphonenumber-max.js"></script>
   <script src="https://cdn.tailwindcss.com"></script>
   <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet"/>
@@ -47,7 +47,7 @@
       <svg class="w-5 h-5 text-white" fill="currentColor" viewBox="0 0 24 24"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/></svg>
     </div>
     <div>
-      <h1 class="text-base font-bold text-gray-900">Organization Title</h1>
+      <h1 id="header-title" class="text-base font-bold text-gray-900">WhatsApp Manager</h1>
       <p class="text-xs text-gray-500">WhatsApp Manager</p>
     </div>
   </div>
@@ -57,7 +57,7 @@ <h1 class="text-base font-bold text-gray-900">Organization Title</h1>
       Connected
     </div>
     <div class="text-xs text-gray-400">
-      Instance: <span id="header-instance" class="font-semibold text-gray-600">MyInstance</span>
+      Instance: <span id="header-instance" class="font-semibold text-gray-600"></span>
     </div>
     <button onclick="openConfig()" class="flex items-center gap-1.5 text-sm text-gray-500 hover:text-gray-800 border border-gray-200 hover:border-gray-300 px-3 py-1.5 rounded-lg transition-colors" title="Connection Settings">
       <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><circle cx="12" cy="12" r="3" stroke-width="2"/></svg>
@@ -79,6 +79,11 @@ <h2 class="text-base font-bold text-gray-900">Connection Settings</h2>
       </button>
     </div>
     <div class="px-6 py-5 space-y-4">
+      <div>
+        <label class="block text-sm font-medium text-gray-700 mb-1.5">Business / App Name</label>
+        <input id="cfg-app-name" type="text" placeholder="WhatsApp Manager" class="w-full border border-gray-300 rounded-lg px-3.5 py-2.5 text-sm"/>
+        <p class="text-xs text-gray-400 mt-1">Shown in the header. Leave blank to use the default.</p>
+      </div>
       <div>
         <label class="block text-sm font-medium text-gray-700 mb-1.5">Server URL <span class="text-red-400">*</span></label>
         <input id="cfg-base" type="text" placeholder="https://your-server.example.com" class="w-full border border-gray-300 rounded-lg px-3.5 py-2.5 text-sm"/>
@@ -337,7 +342,7 @@ <h2 class="text-lg font-semibold text-gray-800 mb-1">Send Location</h2>
           </div>
           <div>
             <label class="block text-sm font-medium text-gray-700 mb-1.5">Place Name</label>
-            <input id="loc-name" type="text" placeholder="Organization Title" class="w-full border border-gray-300 rounded-lg px-3.5 py-2.5 text-sm"/>
+            <input id="loc-name" type="text" placeholder="Our Office" class="w-full border border-gray-300 rounded-lg px-3.5 py-2.5 text-sm"/>
           </div>
           <div>
             <label class="block text-sm font-medium text-gray-700 mb-1.5">Address</label>
@@ -954,7 +959,7 @@ <h3 class="text-sm font-semibold text-gray-800">My Profile Info</h3>
           <h3 class="text-sm font-semibold text-gray-800">Update Display Name</h3>
           <div>
             <label class="block text-sm font-medium text-gray-700 mb-1.5">New Name <span class="text-red-400">*</span></label>
-            <input id="profile-new-name" type="text" placeholder="Organization Title" class="w-full border border-gray-300 rounded-lg px-3.5 py-2.5 text-sm"/>
+            <input id="profile-new-name" type="text" placeholder="My Business" class="w-full border border-gray-300 rounded-lg px-3.5 py-2.5 text-sm"/>
           </div>
           <button onclick="updateProfileName()" class="btn-send w-full text-white font-semibold py-2.5 rounded-lg text-sm flex items-center justify-center gap-2">
             <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/></svg>
@@ -1093,7 +1098,8 @@ <h3 class="text-sm font-semibold text-gray-800">Privacy Settings</h3>
     apikey: '',
     country: 'IL',
     delayMin: 1,
-    delayMax: 3
+    delayMax: 3,
+    appName: 'WhatsApp Manager'
   };
 
   function getCfg() {
@@ -1104,6 +1110,7 @@ <h3 class="text-sm font-semibold text-gray-800">Privacy Settings</h3>
       country:  localStorage.getItem('wa_country')   || 'IL',
       delayMin: parseFloat(localStorage.getItem('wa_delay_min')) || 1,
       delayMax: parseFloat(localStorage.getItem('wa_delay_max')) || 3,
+      appName:  localStorage.getItem('wa_app_name')  || 'WhatsApp Manager',
     };
   }
 
@@ -1116,11 +1123,15 @@ <h3 class="text-sm font-semibold text-gray-800">Privacy Settings</h3>
 
   function applyConfig() {
     const cfg = getCfg();
+    const name = cfg.appName || 'WhatsApp Manager';
+    document.getElementById('header-title').textContent = name;
+    document.title = name;
     document.getElementById('header-instance').textContent = cfg.instance;
   }
 
   function openConfig() {
     const cfg = getCfg();
+    document.getElementById('cfg-app-name').value  = cfg.appName !== 'WhatsApp Manager' ? cfg.appName : '';
     document.getElementById('cfg-base').value      = cfg.base;
     document.getElementById('cfg-instance').value  = cfg.instance;
     document.getElementById('cfg-apikey').value    = cfg.apikey;
@@ -1148,6 +1159,7 @@ <h3 class="text-sm font-semibold text-gray-800">Privacy Settings</h3>
   }
 
   function saveConfig() {
+    const appName  = document.getElementById('cfg-app-name').value.trim() || DEFAULTS.appName;
     const base     = document.getElementById('cfg-base').value.trim().replace(/\/$/, '');
     const instance = document.getElementById('cfg-instance').value.trim();
     const apikey   = document.getElementById('cfg-apikey').value.trim();
@@ -1165,6 +1177,7 @@ <h3 class="text-sm font-semibold text-gray-800">Privacy Settings</h3>
       status.textContent = '⚠ Min delay must be less than or equal to Max delay.';
       return;
     }
+    localStorage.setItem('wa_app_name',  appName);
     localStorage.setItem('wa_base',      base);
     localStorage.setItem('wa_instance',  instance);
     localStorage.setItem('wa_apikey',    apikey);
