diff --git a/README.md b/README.md index 15eae4c..55d48e3 100644 --- a/README.md +++ b/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 `` 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 `` tag: ```html @@ -81,13 +94,16 @@ For any website (including UN systems, custom government portals, or static site } ``` -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 diff --git a/assets/js/sophia-chat.js b/assets/js/sophia-chat.js index a4689c3..59c702e 100644 --- a/assets/js/sophia-chat.js +++ b/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', diff --git a/generator.html b/generator.html index 74b8a2d..c211968 100644 --- a/generator.html +++ b/generator.html @@ -163,11 +163,43 @@ 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; + }

Sophia Chat Code Generator

-

Select your Sophia icon and copy the code to add to your website

+

Select your Sophia icon, enter your license key, and copy the code to add to your website

Step 1: Choose Your Sophia Icon

@@ -175,13 +207,20 @@

Step 1: Choose Your Sophia Icon

-

Step 2: Copy Your Code

+

Step 2: Enter Your License Key

+

Enter the license key you received from SpringACT. Contact us to request a license.

+ +

Format: SOPHIA-XXXX-XXXX-XXXX

+
+ +
+

Step 3: Copy Your Code

- +
-

Step 3: Add to Your Website

+

Step 4: Add to Your Website

  1. Copy the code above
  2. Paste it just before the </body> tag in your HTML
    3. @@ -237,8 +276,19 @@

    Step 3: Add to Your Website

    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 ` -`; } + 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 @@

    Step 3: Add to Your Website

    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 @@

    Step 3: Add to Your Website

    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); diff --git a/sophia-chat.php b/sophia-chat.php index e2c1e0c..3f14644 100644 --- a/sophia-chat.php +++ b/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 */