@pocketping/widget 2.0.0 → 2.1.0

package/README.md

@@ -423,3 +423,4 @@ For advanced customization, you can target these CSS classes:
 
 MIT
 
+

package/dist/index.cjs

@@ -47,23 +47,59 @@ var import_preact = require("preact");
 var import_hooks2 = require("preact/hooks");
 
 // src/components/styles.ts
+var DEFAULT_GRADIENT = { from: "#36e3ff", to: "#7c5cff", direction: "to right" };
+function isGradient(value) {
+  return typeof value === "object" && value !== null && "from" in value && "to" in value;
+}
+function toCssColor(value) {
+  if (isGradient(value)) {
+    const direction = value.direction || "to right";
+    return `linear-gradient(${direction}, ${value.from}, ${value.to})`;
+  }
+  return value;
+}
+function getBaseColor(value) {
+  if (isGradient(value)) {
+    return value.to;
+  }
+  return value;
+}
 function resolveThemeColor(color, isDark, defaultLight, defaultDark) {
   if (!color) {
-    return isDark ? defaultDark : defaultLight;
+    return toCssColor(isDark ? defaultDark : defaultLight);
   }
   if (typeof color === "string") {
     return color;
   }
-  return isDark ? color.dark : color.light;
+  if (isGradient(color)) {
+    return toCssColor(color);
+  }
+  const resolved = isDark ? color.dark : color.light;
+  return toCssColor(resolved);
+}
+function resolveBaseColor(color, isDark, defaultLight, defaultDark) {
+  if (!color) {
+    return getBaseColor(isDark ? defaultDark : defaultLight);
+  }
+  if (typeof color === "string") {
+    return color;
+  }
+  if (isGradient(color)) {
+    return getBaseColor(color);
+  }
+  const resolved = isDark ? color.dark : color.light;
+  return getBaseColor(resolved);
 }
 function styles(options) {
   const { primaryColor, theme, headerColor, footerColor, chatBackground, toggleColor } = options;
   const isDark = theme === "dark";
-  const resolvedHeaderColor = resolveThemeColor(headerColor, isDark, "#008069", "#202c33");
+  const resolvedHeaderColor = resolveThemeColor(headerColor, isDark, DEFAULT_GRADIENT, "#202c33");
   const resolvedFooterColor = resolveThemeColor(footerColor, isDark, "#f0f2f5", "#202c33");
-  const resolvedToggleColor = resolveThemeColor(toggleColor, isDark, "#25d366", "#25d366");
-  const resolvedToggleHoverColor = resolvedToggleColor !== "#25d366" ? adjustBrightness(resolvedToggleColor, -10) : "#22c55e";
-  const resolvedSendButtonHoverColor = adjustBrightness(resolvedHeaderColor, -15);
+  const resolvedToggleColor = resolveThemeColor(toggleColor, isDark, DEFAULT_GRADIENT, DEFAULT_GRADIENT);
+  const headerBaseColor = resolveBaseColor(headerColor, isDark, DEFAULT_GRADIENT, "#202c33");
+  const toggleBaseColor = resolveBaseColor(toggleColor, isDark, DEFAULT_GRADIENT, DEFAULT_GRADIENT);
+  const resolvedToggleHoverColor = adjustBrightness(toggleBaseColor, -15);
+  const resolvedSendButtonHoverColor = adjustBrightness(headerBaseColor, -15);
   const whatsappPattern = isDark ? `url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")` : `url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23000000' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")`;
   const dotsPattern = isDark ? `url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='10' cy='10' r='1' fill='%23ffffff' fill-opacity='0.05'/%3E%3C/svg%3E")` : `url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='10' cy='10' r='1' fill='%23000000' fill-opacity='0.05'/%3E%3C/svg%3E")`;
   const resolvedChatBg = resolveThemeColor(chatBackground, isDark, "whatsapp", "whatsapp");
@@ -162,7 +198,7 @@ function styles(options) {
       right: 4px;
       width: 12px;
       height: 12px;
-      background: #22c55e;
+      background: #ff5fd4;
       border-radius: 50%;
       border: 2px solid white;
     }
@@ -318,8 +354,8 @@ function styles(options) {
     }
 
     .pp-status-dot.pp-online {
-      background: #25d366;
-      box-shadow: 0 0 0 2px rgba(37, 211, 102, 0.3);
+      background: #ff5fd4;
+      box-shadow: 0 0 0 2px rgba(255, 95, 212, 0.3);
     }
 
     .pp-close-btn {
@@ -1023,7 +1059,7 @@ function styles(options) {
       justify-content: center;
       gap: 16px;
       z-index: 100;
-      border: 3px dashed #00a884;
+      border: 3px dashed #7c5cff;
       border-radius: 12px;
       margin: 4px;
       pointer-events: none;
@@ -1032,7 +1068,7 @@ function styles(options) {
     .pp-drop-icon svg {
       width: 56px;
       height: 56px;
-      color: #00a884;
+      color: #7c5cff;
     }
 
     .pp-drop-text {
@@ -1173,7 +1209,7 @@ function styles(options) {
       padding: 10px 20px;
       border: none;
       border-radius: 8px;
-      background: #00a884;
+      background: #7c5cff;
       color: white;
       font-size: 14px;
       font-weight: 500;
@@ -1182,7 +1218,7 @@ function styles(options) {
     }
 
     .pp-edit-save:hover:not(:disabled) {
-      background: #008f72;
+      background: #6a4ee6;
     }
 
     .pp-edit-save:disabled {
@@ -1197,7 +1233,7 @@ function styles(options) {
       gap: 10px;
       padding: 8px 12px;
       background: ${resolvedFooterColor};
-      border-left: 4px solid #00a884;
+      border-left: 4px solid #7c5cff;
     }
 
     .pp-reply-preview-content {
@@ -1208,7 +1244,7 @@ function styles(options) {
     .pp-reply-label {
       display: block;
       font-size: 12px;
-      color: #00a884;
+      color: #7c5cff;
       font-weight: 500;
       margin-bottom: 2px;
     }
@@ -1252,7 +1288,7 @@ function styles(options) {
     /* Reply Quote in Message */
     .pp-reply-quote {
       background: ${isDark ? "rgba(0,0,0,0.2)" : "rgba(0,0,0,0.05)"};
-      border-left: 3px solid #00a884;
+      border-left: 3px solid #7c5cff;
       padding: 6px 10px;
       margin-bottom: 4px;
       border-radius: 0 6px 6px 0;
@@ -1264,7 +1300,7 @@ function styles(options) {
     .pp-reply-sender {
       display: block;
       font-weight: 500;
-      color: #00a884;
+      color: #7c5cff;
       margin-bottom: 2px;
       font-size: 12px;
     }
@@ -1294,7 +1330,7 @@ function styles(options) {
     /* Reply quote in visitor message bubble needs higher contrast */
     .pp-message-visitor .pp-reply-quote {
       background: ${isDark ? "rgba(0,0,0,0.2)" : "rgba(0,0,0,0.08)"};
-      border-left-color: ${isDark ? "rgba(255,255,255,0.5)" : "#00a884"};
+      border-left-color: ${isDark ? "rgba(255,255,255,0.5)" : "#7c5cff"};
     }
 
     .pp-message-visitor .pp-reply-quote-clickable:hover {
@@ -1302,7 +1338,7 @@ function styles(options) {
     }
 
     .pp-message-visitor .pp-reply-sender {
-      color: ${isDark ? "rgba(255,255,255,0.9)" : "#00a884"};
+      color: ${isDark ? "rgba(255,255,255,0.9)" : "#7c5cff"};
     }
 
     .pp-message-visitor .pp-reply-content {
@@ -1316,13 +1352,13 @@ function styles(options) {
 
     @keyframes pp-highlight-pulse {
       0% {
-        box-shadow: 0 0 0 0 rgba(0, 168, 132, 0.5);
+        box-shadow: 0 0 0 0 rgba(124, 92, 255, 0.5);
       }
       30% {
-        box-shadow: 0 0 0 6px rgba(0, 168, 132, 0.25);
+        box-shadow: 0 0 0 6px rgba(124, 92, 255, 0.25);
       }
       100% {
-        box-shadow: 0 0 0 0 rgba(0, 168, 132, 0);
+        box-shadow: 0 0 0 0 rgba(124, 92, 255, 0);
       }
     }
 
@@ -1583,7 +1619,7 @@ function styles(options) {
       margin-top: 12px;
       border: none;
       border-radius: 8px;
-      background: #00a884;
+      background: #7c5cff;
       color: white;
       font-size: 15px;
       font-weight: 500;
@@ -1592,7 +1628,7 @@ function styles(options) {
     }
 
     .pp-prechat-submit:hover:not(:disabled) {
-      background: #008f72;
+      background: #6a4ee6;
     }
 
     .pp-prechat-submit:active:not(:disabled) {

package/dist/index.d.cts

@@ -6,6 +6,28 @@ interface ThemeColor {
     light: string;
     dark: string;
 }
+/**
+ * Gradient color value
+ * Creates a linear gradient between two colors
+ * @example { from: '#36e3ff', to: '#7c5cff', direction: 'to right' }
+ */
+interface GradientColor {
+    from: string;
+    to: string;
+    /** CSS gradient direction (default: 'to right') */
+    direction?: 'to right' | 'to left' | 'to bottom' | 'to top' | string;
+}
+/**
+ * Color value that can be a solid color, gradient, or theme-aware
+ */
+type ColorValue = string | GradientColor | ThemeColor | ThemeGradientColor;
+/**
+ * Theme-aware gradient - different gradients for light/dark themes
+ */
+interface ThemeGradientColor {
+    light: string | GradientColor;
+    dark: string | GradientColor;
+}
 interface PocketPingConfig {
     /** Your backend endpoint for self-hosted (e.g., "https://yoursite.com/pocketping") */
     endpoint?: string;
@@ -32,11 +54,14 @@ interface PocketPingConfig {
     /** Text color on primary background (defaults to white) */
     primaryTextColor?: string;
     /**
-     * Header background color
-     * Can be a string (same for both themes) or object with light/dark values
-     * @example "#008069" or { light: "#008069", dark: "#202c33" }
+     * Header background color or gradient
+     * Can be a solid color, gradient, or theme-aware
+     * @example "#7c5cff"
+     * @example { from: '#36e3ff', to: '#7c5cff' }
+     * @example { light: "#7c5cff", dark: "#202c33" }
+     * @example { light: { from: '#36e3ff', to: '#7c5cff' }, dark: "#202c33" }
      */
-    headerColor?: string | ThemeColor;
+    headerColor?: ColorValue;
     /**
      * Footer/input area background color
      * Can be a string (same for both themes) or object with light/dark values
@@ -53,11 +78,13 @@ interface PocketPingConfig {
      */
     chatBackground?: 'whatsapp' | 'dots' | 'plain' | string | ThemeColor;
     /**
-     * Toggle button background color
-     * Can be a string (same for both themes) or object with light/dark values
-     * @example "#25d366" or { light: "#25d366", dark: "#00a884" }
+     * Toggle button background color or gradient
+     * Can be a solid color, gradient, or theme-aware
+     * @example "#7c5cff"
+     * @example { from: '#36e3ff', to: '#7c5cff' }
+     * @example { light: "#7c5cff", dark: "#7c5cff" }
      */
-    toggleColor?: string | ThemeColor;
+    toggleColor?: ColorValue;
     /** Widget position */
     position?: 'bottom-right' | 'bottom-left';
     /** Distance from edge in pixels (default: 20) */

package/dist/index.d.ts

@@ -6,6 +6,28 @@ interface ThemeColor {
     light: string;
     dark: string;
 }
+/**
+ * Gradient color value
+ * Creates a linear gradient between two colors
+ * @example { from: '#36e3ff', to: '#7c5cff', direction: 'to right' }
+ */
+interface GradientColor {
+    from: string;
+    to: string;
+    /** CSS gradient direction (default: 'to right') */
+    direction?: 'to right' | 'to left' | 'to bottom' | 'to top' | string;
+}
+/**
+ * Color value that can be a solid color, gradient, or theme-aware
+ */
+type ColorValue = string | GradientColor | ThemeColor | ThemeGradientColor;
+/**
+ * Theme-aware gradient - different gradients for light/dark themes
+ */
+interface ThemeGradientColor {
+    light: string | GradientColor;
+    dark: string | GradientColor;
+}
 interface PocketPingConfig {
     /** Your backend endpoint for self-hosted (e.g., "https://yoursite.com/pocketping") */
     endpoint?: string;
@@ -32,11 +54,14 @@ interface PocketPingConfig {
     /** Text color on primary background (defaults to white) */
     primaryTextColor?: string;
     /**
-     * Header background color
-     * Can be a string (same for both themes) or object with light/dark values
-     * @example "#008069" or { light: "#008069", dark: "#202c33" }
+     * Header background color or gradient
+     * Can be a solid color, gradient, or theme-aware
+     * @example "#7c5cff"
+     * @example { from: '#36e3ff', to: '#7c5cff' }
+     * @example { light: "#7c5cff", dark: "#202c33" }
+     * @example { light: { from: '#36e3ff', to: '#7c5cff' }, dark: "#202c33" }
      */
-    headerColor?: string | ThemeColor;
+    headerColor?: ColorValue;
     /**
      * Footer/input area background color
      * Can be a string (same for both themes) or object with light/dark values
@@ -53,11 +78,13 @@ interface PocketPingConfig {
      */
     chatBackground?: 'whatsapp' | 'dots' | 'plain' | string | ThemeColor;
     /**
-     * Toggle button background color
-     * Can be a string (same for both themes) or object with light/dark values
-     * @example "#25d366" or { light: "#25d366", dark: "#00a884" }
+     * Toggle button background color or gradient
+     * Can be a solid color, gradient, or theme-aware
+     * @example "#7c5cff"
+     * @example { from: '#36e3ff', to: '#7c5cff' }
+     * @example { light: "#7c5cff", dark: "#7c5cff" }
      */
-    toggleColor?: string | ThemeColor;
+    toggleColor?: ColorValue;
     /** Widget position */
     position?: 'bottom-right' | 'bottom-left';
     /** Distance from edge in pixels (default: 20) */

package/dist/index.js

@@ -6,23 +6,59 @@ import { Fragment as Fragment2 } from "preact";
 import { useState as useState2, useEffect as useEffect2, useRef as useRef2, useCallback } from "preact/hooks";
 
 // src/components/styles.ts
+var DEFAULT_GRADIENT = { from: "#36e3ff", to: "#7c5cff", direction: "to right" };
+function isGradient(value) {
+  return typeof value === "object" && value !== null && "from" in value && "to" in value;
+}
+function toCssColor(value) {
+  if (isGradient(value)) {
+    const direction = value.direction || "to right";
+    return `linear-gradient(${direction}, ${value.from}, ${value.to})`;
+  }
+  return value;
+}
+function getBaseColor(value) {
+  if (isGradient(value)) {
+    return value.to;
+  }
+  return value;
+}
 function resolveThemeColor(color, isDark, defaultLight, defaultDark) {
   if (!color) {
-    return isDark ? defaultDark : defaultLight;
+    return toCssColor(isDark ? defaultDark : defaultLight);
   }
   if (typeof color === "string") {
     return color;
   }
-  return isDark ? color.dark : color.light;
+  if (isGradient(color)) {
+    return toCssColor(color);
+  }
+  const resolved = isDark ? color.dark : color.light;
+  return toCssColor(resolved);
+}
+function resolveBaseColor(color, isDark, defaultLight, defaultDark) {
+  if (!color) {
+    return getBaseColor(isDark ? defaultDark : defaultLight);
+  }
+  if (typeof color === "string") {
+    return color;
+  }
+  if (isGradient(color)) {
+    return getBaseColor(color);
+  }
+  const resolved = isDark ? color.dark : color.light;
+  return getBaseColor(resolved);
 }
 function styles(options) {
   const { primaryColor, theme, headerColor, footerColor, chatBackground, toggleColor } = options;
   const isDark = theme === "dark";
-  const resolvedHeaderColor = resolveThemeColor(headerColor, isDark, "#008069", "#202c33");
+  const resolvedHeaderColor = resolveThemeColor(headerColor, isDark, DEFAULT_GRADIENT, "#202c33");
   const resolvedFooterColor = resolveThemeColor(footerColor, isDark, "#f0f2f5", "#202c33");
-  const resolvedToggleColor = resolveThemeColor(toggleColor, isDark, "#25d366", "#25d366");
-  const resolvedToggleHoverColor = resolvedToggleColor !== "#25d366" ? adjustBrightness(resolvedToggleColor, -10) : "#22c55e";
-  const resolvedSendButtonHoverColor = adjustBrightness(resolvedHeaderColor, -15);
+  const resolvedToggleColor = resolveThemeColor(toggleColor, isDark, DEFAULT_GRADIENT, DEFAULT_GRADIENT);
+  const headerBaseColor = resolveBaseColor(headerColor, isDark, DEFAULT_GRADIENT, "#202c33");
+  const toggleBaseColor = resolveBaseColor(toggleColor, isDark, DEFAULT_GRADIENT, DEFAULT_GRADIENT);
+  const resolvedToggleHoverColor = adjustBrightness(toggleBaseColor, -15);
+  const resolvedSendButtonHoverColor = adjustBrightness(headerBaseColor, -15);
   const whatsappPattern = isDark ? `url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")` : `url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23000000' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")`;
   const dotsPattern = isDark ? `url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='10' cy='10' r='1' fill='%23ffffff' fill-opacity='0.05'/%3E%3C/svg%3E")` : `url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='10' cy='10' r='1' fill='%23000000' fill-opacity='0.05'/%3E%3C/svg%3E")`;
   const resolvedChatBg = resolveThemeColor(chatBackground, isDark, "whatsapp", "whatsapp");
@@ -121,7 +157,7 @@ function styles(options) {
       right: 4px;
       width: 12px;
       height: 12px;
-      background: #22c55e;
+      background: #ff5fd4;
       border-radius: 50%;
       border: 2px solid white;
     }
@@ -277,8 +313,8 @@ function styles(options) {
     }
 
     .pp-status-dot.pp-online {
-      background: #25d366;
-      box-shadow: 0 0 0 2px rgba(37, 211, 102, 0.3);
+      background: #ff5fd4;
+      box-shadow: 0 0 0 2px rgba(255, 95, 212, 0.3);
     }
 
     .pp-close-btn {
@@ -982,7 +1018,7 @@ function styles(options) {
       justify-content: center;
       gap: 16px;
       z-index: 100;
-      border: 3px dashed #00a884;
+      border: 3px dashed #7c5cff;
       border-radius: 12px;
       margin: 4px;
       pointer-events: none;
@@ -991,7 +1027,7 @@ function styles(options) {
     .pp-drop-icon svg {
       width: 56px;
       height: 56px;
-      color: #00a884;
+      color: #7c5cff;
     }
 
     .pp-drop-text {
@@ -1132,7 +1168,7 @@ function styles(options) {
       padding: 10px 20px;
       border: none;
       border-radius: 8px;
-      background: #00a884;
+      background: #7c5cff;
       color: white;
       font-size: 14px;
       font-weight: 500;
@@ -1141,7 +1177,7 @@ function styles(options) {
     }
 
     .pp-edit-save:hover:not(:disabled) {
-      background: #008f72;
+      background: #6a4ee6;
     }
 
     .pp-edit-save:disabled {
@@ -1156,7 +1192,7 @@ function styles(options) {
       gap: 10px;
       padding: 8px 12px;
       background: ${resolvedFooterColor};
-      border-left: 4px solid #00a884;
+      border-left: 4px solid #7c5cff;
     }
 
     .pp-reply-preview-content {
@@ -1167,7 +1203,7 @@ function styles(options) {
     .pp-reply-label {
       display: block;
       font-size: 12px;
-      color: #00a884;
+      color: #7c5cff;
       font-weight: 500;
       margin-bottom: 2px;
     }
@@ -1211,7 +1247,7 @@ function styles(options) {
     /* Reply Quote in Message */
     .pp-reply-quote {
       background: ${isDark ? "rgba(0,0,0,0.2)" : "rgba(0,0,0,0.05)"};
-      border-left: 3px solid #00a884;
+      border-left: 3px solid #7c5cff;
       padding: 6px 10px;
       margin-bottom: 4px;
       border-radius: 0 6px 6px 0;
@@ -1223,7 +1259,7 @@ function styles(options) {
     .pp-reply-sender {
       display: block;
       font-weight: 500;
-      color: #00a884;
+      color: #7c5cff;
       margin-bottom: 2px;
       font-size: 12px;
     }
@@ -1253,7 +1289,7 @@ function styles(options) {
     /* Reply quote in visitor message bubble needs higher contrast */
     .pp-message-visitor .pp-reply-quote {
       background: ${isDark ? "rgba(0,0,0,0.2)" : "rgba(0,0,0,0.08)"};
-      border-left-color: ${isDark ? "rgba(255,255,255,0.5)" : "#00a884"};
+      border-left-color: ${isDark ? "rgba(255,255,255,0.5)" : "#7c5cff"};
     }
 
     .pp-message-visitor .pp-reply-quote-clickable:hover {
@@ -1261,7 +1297,7 @@ function styles(options) {
     }
 
     .pp-message-visitor .pp-reply-sender {
-      color: ${isDark ? "rgba(255,255,255,0.9)" : "#00a884"};
+      color: ${isDark ? "rgba(255,255,255,0.9)" : "#7c5cff"};
     }
 
     .pp-message-visitor .pp-reply-content {
@@ -1275,13 +1311,13 @@ function styles(options) {
 
     @keyframes pp-highlight-pulse {
       0% {
-        box-shadow: 0 0 0 0 rgba(0, 168, 132, 0.5);
+        box-shadow: 0 0 0 0 rgba(124, 92, 255, 0.5);
       }
       30% {
-        box-shadow: 0 0 0 6px rgba(0, 168, 132, 0.25);
+        box-shadow: 0 0 0 6px rgba(124, 92, 255, 0.25);
       }
       100% {
-        box-shadow: 0 0 0 0 rgba(0, 168, 132, 0);
+        box-shadow: 0 0 0 0 rgba(124, 92, 255, 0);
       }
     }
 
@@ -1542,7 +1578,7 @@ function styles(options) {
       margin-top: 12px;
       border: none;
       border-radius: 8px;
-      background: #00a884;
+      background: #7c5cff;
       color: white;
       font-size: 15px;
       font-weight: 500;
@@ -1551,7 +1587,7 @@ function styles(options) {
     }
 
     .pp-prechat-submit:hover:not(:disabled) {
-      background: #008f72;
+      background: #6a4ee6;
     }
 
     .pp-prechat-submit:active:not(:disabled) {