Release v2.0.0

README.md

@@ -4,7 +4,16 @@ Add the Sophia Chat bubble to your website. Sophia provides real-time, accessibl
 
 ## Getting Started
 
-Sophia Chat works out of the box with the default Chatbot ID. Simply install and choose your preferred Sophia icon.
+### Prerequisites: License Key
+
+Before installing Sophia Chat, you need to obtain a license key from SpringACT. The license key ensures that only authorized organizations can deploy the Sophia Chat widget.
+
+**To request a license key:**
+1. Contact [SpringACT](https://springact.org/contact) to request a license
+2. Provide your organization details and website domain(s)
+3. You will receive a license key in the format: `SOPHIA-XXXX-XXXX-XXXX`
+
+Your license key is tied to your domain(s) and is required for the widget to function.
 
 ---
 
@@ -32,14 +41,16 @@ WordPress is commonly used by NGOs, government agencies, and humanitarian organi
 2. In WordPress admin, go to **Plugins > Add New > Upload Plugin**
 3. Upload the `.zip` file and click **Install Now**
 4. Click **Activate**
-5. Go to **Settings > Sophia Chat** and choose your preferred Sophia icon
+5. Go to **Settings > Sophia Chat**
+6. Enter your license key
+7. Choose your preferred Sophia icon
 
 ### Option 2: Manual Installation
 
 1. Download or clone this repository
 2. Upload the `sophia-plugin` folder to `/wp-content/plugins/`
 3. Activate **Sophia Chat** in the Plugins menu
-4. Configure in **Settings > Sophia Chat**
+4. Go to **Settings > Sophia Chat**, enter your license key, and configure
 
 ### WordPress Settings
 
@@ -52,7 +63,9 @@ WordPress is commonly used by NGOs, government agencies, and humanitarian organi
 
 ## Direct HTML/JavaScript
 
-For any website (including UN systems, custom government portals, or static sites), add this code before the closing `</body>` tag:
+For any website (including UN systems, custom government portals, or static sites), use our **[Code Generator](https://springact.github.io/sophia-plugin/generator.html)** to get ready-to-use code with your license key and icon selection.
+
+Alternatively, add this code before the closing `</body>` tag:
 
 ```html
 <!-- Sophia Chat Widget -->
@@ -81,13 +94,16 @@ For any website (including UN systems, custom government portals, or static site
   }
 </style>
 <button id="sophia-chat-bubble"
-        onclick="window.open('https://sophia.chat/secure-chat', 'SophiaChat', 'width=400,height=600,scrollbars=yes,resizable=yes')"
+        data-license="YOUR-LICENSE-KEY"
+        onclick="window.open('https://sophia.chat/secure-chat?license=YOUR-LICENSE-KEY', 'SophiaChat', 'width=400,height=600,scrollbars=yes,resizable=yes')"
         aria-label="Chat with Sophia"
         title="Chat with Sophia">
 </button>
 ```
 
-Replace `ICON_URL_HERE` with your chosen Sophia icon URL from the table below.
+Replace:
+- `ICON_URL_HERE` with your chosen Sophia icon URL from the table below
+- `YOUR-LICENSE-KEY` with your license key (e.g., `SOPHIA-XXXX-XXXX-XXXX`)
 
 ---
 
@@ -208,13 +224,16 @@ Add to your theme's `main_template`:
 
 ## Choosing a Sophia Icon
 
-### Easy Way: Code Generator
+### Recommended: Code Generator
 
-Use our **[Code Generator](https://springact.github.io/sophia-plugin/generator.html)** to select your Sophia icon and get ready-to-use code.
+Use our **[Code Generator](https://springact.github.io/sophia-plugin/generator.html)** to:
+1. Select your Sophia icon
+2. Enter your license key
+3. Get ready-to-use code
 
 ### Manual Way
 
-Pick an icon URL from the table below and use it in the [Direct HTML/JavaScript](#direct-htmljavascript) code above.
+Pick an icon URL from the table below and use it in the [Direct HTML/JavaScript](#direct-htmljavascript) code above. Don't forget to add your license key!
 
 ### Available Sophia Icons
 

assets/js/sophia-chat.js

@@ -19,6 +19,10 @@
     var fallbackUrl = button.getAttribute('data-fallback-url') || chatUrl;
 
     function openChat() {
+        var width = 400;
+        var height = 600;
+        var left = (screen.width - width) / 2;
+        var top = (screen.height - height) / 2;
         var popup = window.open(
             chatUrl,
             'SophiaChat',

generator.html

@@ -163,25 +163,64 @@
       font-size: 12px;
       color: #999;
     }
+    .license-input {
+      width: 100%;
+      padding: 12px 15px;
+      font-size: 18px;
+      font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+      border: 2px solid #ddd;
+      border-radius: 6px;
+      text-transform: uppercase;
+      letter-spacing: 1px;
+    }
+    .license-input:focus {
+      outline: none;
+      border-color: #65758e;
+    }
+    .license-input.valid {
+      border-color: #28a745;
+    }
+    .license-input.invalid {
+      border-color: #dc3545;
+    }
+    .license-info {
+      color: #666;
+      margin-bottom: 10px;
+    }
+    .license-info a {
+      color: #65758e;
+    }
+    .license-format {
+      font-size: 12px;
+      color: #999;
+      margin-top: 8px;
+    }
   </style>
 </head>
 <body>
   <h1>Sophia Chat Code Generator</h1>
-  <p class="subtitle">Select your Sophia icon and copy the code to add to your website</p>
+  <p class="subtitle">Select your Sophia icon, enter your license key, and copy the code to add to your website</p>
 
   <div class="step">
     <h2>Step 1: Choose Your Sophia Icon</h2>
     <div class="icon-grid" id="iconGrid"></div>
   </div>
 
   <div class="step">
-    <h2>Step 2: Copy Your Code</h2>
+    <h2>Step 2: Enter Your License Key</h2>
+    <p class="license-info">Enter the license key you received from SpringACT. <a href="https://springact.org/contact" target="_blank">Contact us</a> to request a license.</p>
+    <input type="text" id="licenseKey" class="license-input" placeholder="SOPHIA-XXXX-XXXX-XXXX" maxlength="22">
+    <p class="license-format">Format: SOPHIA-XXXX-XXXX-XXXX</p>
+  </div>
+
+  <div class="step">
+    <h2>Step 3: Copy Your Code</h2>
     <div class="code-output" id="codeOutput"></div>
-    <button class="copy-btn" id="copyBtn" onclick="copyCode()">Copy Code</button>
+    <button class="copy-btn" id="copyBtn">Copy Code</button>
   </div>
 
   <div class="instructions">
-    <h3>Step 3: Add to Your Website</h3>
+    <h3>Step 4: Add to Your Website</h3>
     <ol>
       <li>Copy the code above</li>
       <li>Paste it just before the <code>&lt;/body&gt;</code> tag in your HTML</li>
@@ -237,8 +276,19 @@ <h3>Step 3: Add to Your Website</h3>
       return `${baseIconUrl}${key}.png`;
     }
 
+    function getLicenseKey() {
+      return document.getElementById('licenseKey').value.trim().toUpperCase();
+    }
+
+    function isValidLicenseFormat(key) {
+      return /^SOPHIA-[A-Z0-9]{4}-[A-Z0-9]{4}-[A-Z0-9]{4}$/.test(key);
+    }
+
     function generateCode(iconKey) {
       const iconUrl = getIconUrl(iconKey);
+      const license = getLicenseKey();
+      const chatUrlWithLicense = license ? `${chatUrl}?license=${encodeURIComponent(license)}` : chatUrl;
+      const dataLicenseAttr = license ? `\n        data-license="${license}"` : '';
       return `<!-- Sophia Chat Widget -->
 <style>
   #sophia-chat-bubble {
@@ -264,21 +314,39 @@ <h3>Step 3: Add to Your Website</h3>
     box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
   }
 </style>
-<button id="sophia-chat-bubble"
-        onclick="window.open('${chatUrl}', 'SophiaChat', 'width=400,height=600,scrollbars=yes,resizable=yes')"
+<button id="sophia-chat-bubble"${dataLicenseAttr}
+        onclick="window.open('${chatUrlWithLicense}', 'SophiaChat', 'width=400,height=600,scrollbars=yes,resizable=yes')"
         aria-label="Chat with Sophia"
         title="Chat with Sophia">
 </button>`;
     }
 
+    function updateCodeOutput() {
+      document.getElementById('codeOutput').textContent = generateCode(selectedIcon);
+      document.getElementById('copyBtn').textContent = 'Copy Code';
+      document.getElementById('copyBtn').classList.remove('copied');
+    }
+
     function selectIcon(key) {
       selectedIcon = key;
       document.querySelectorAll('.icon-option').forEach(el => {
         el.classList.toggle('selected', el.dataset.key === key);
       });
-      document.getElementById('codeOutput').textContent = generateCode(key);
-      document.getElementById('copyBtn').textContent = 'Copy Code';
-      document.getElementById('copyBtn').classList.remove('copied');
+      updateCodeOutput();
+    }
+
+    function updateLicenseValidation() {
+      const input = document.getElementById('licenseKey');
+      const value = input.value.trim().toUpperCase();
+      input.classList.remove('valid', 'invalid');
+      if (value.length > 0) {
+        if (isValidLicenseFormat(value)) {
+          input.classList.add('valid');
+        } else if (value.length === 22) {
+          input.classList.add('invalid');
+        }
+      }
+      updateCodeOutput();
     }
 
     function copyCode() {
@@ -296,7 +364,7 @@ <h3>Step 3: Add to Your Website</h3>
 
     function magnifyIcon(key, event) {
       event.stopPropagation();
-      selectIcon(key); // Also select the icon when magnifying
+      selectIcon(key);
       document.getElementById('modalImg').src = getIconUrl(key);
       document.getElementById('iconModal').classList.add('active');
     }
@@ -327,6 +395,12 @@ <h3>Step 3: Add to Your Website</h3>
       grid.appendChild(div);
     });
 
+    // License key input listener
+    document.getElementById('licenseKey').addEventListener('input', updateLicenseValidation);
+
+    // Copy button listener
+    document.getElementById('copyBtn').addEventListener('click', copyCode);
+
     document.getElementById('codeOutput').textContent = generateCode(selectedIcon);
   </script>
 </body>

sophia-chat.php

@@ -3,7 +3,7 @@
  * Plugin Name: Sophia Chat
  * Plugin URI: https://github.com/SpringACT/sophia-plugin
  * Description: Adds the Sophia Chat bubble to your website - providing real-time, accessible, anonymous support for individuals affected by domestic violence.
- * Version: 1.0.3
+ * Version: 2.0.0
  * Author: SpringACT
  * Author URI: https://springact.org
  * License: GPL v2 or later
@@ -17,7 +17,7 @@
 }
 
 // Define plugin constants
-define('SOPHIA_CHAT_VERSION', '1.0.3');
+define('SOPHIA_CHAT_VERSION', '2.0.0');
 define('SOPHIA_CHAT_PLUGIN_DIR', plugin_dir_path(__FILE__));
 define('SOPHIA_CHAT_PLUGIN_URL', plugin_dir_url(__FILE__));
 define('SOPHIA_CHAT_URL', 'https://sophia.chat/secure-chat');
@@ -29,7 +29,7 @@
  * Allows configuration via SOPHIA_CHAT_CUSTOM_URL constant in wp-config.php
  * for self-hosted deployments. Falls back to default sophia.chat URL.
  *
- * @since 2.3.0
+ * @since 2.0.0
  *
  * @return string The chat service URL.
  */
@@ -615,7 +615,7 @@ function sophia_chat_log_deactivation() {
  * Registers privacy policy text with WordPress's privacy policy tools.
  * Site owners can review and add this to their privacy policy page.
  *
- * @since 2.3.0
+ * @since 2.0.0
  *
  * @return void
  */