{"id":29636496,"url":"https://github.com/codellyson/kk-whatsapp-widget","last_synced_at":"2026-02-07T16:03:21.180Z","repository":{"id":299244936,"uuid":"1002421169","full_name":"codellyson/kk-whatsapp-widget","owner":"codellyson","description":null,"archived":false,"fork":false,"pushed_at":"2025-06-22T13:34:34.000Z","size":242,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-10-04T16:12:25.339Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/codellyson.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-06-15T12:48:42.000Z","updated_at":"2025-07-04T03:05:08.000Z","dependencies_parsed_at":"2025-06-21T20:45:31.590Z","dependency_job_id":null,"html_url":"https://github.com/codellyson/kk-whatsapp-widget","commit_stats":null,"previous_names":["codellyson/kk-whatsapp-chat","codellyson/kk-whatsapp-widget"],"tags_count":7,"template":false,"template_full_name":null,"purl":"pkg:github/codellyson/kk-whatsapp-widget","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codellyson%2Fkk-whatsapp-widget","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codellyson%2Fkk-whatsapp-widget/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codellyson%2Fkk-whatsapp-widget/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codellyson%2Fkk-whatsapp-widget/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/codellyson","download_url":"https://codeload.github.com/codellyson/kk-whatsapp-widget/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codellyson%2Fkk-whatsapp-widget/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29199519,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-07T14:35:27.868Z","status":"ssl_error","status_checked_at":"2026-02-07T14:25:51.081Z","response_time":63,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-07-21T17:04:20.580Z","updated_at":"2026-02-07T16:03:16.172Z","avatar_url":"https://github.com/codellyson.png","language":"HTML","readme":"[![Release](https://github.com/codellyson/kk-whatsapp-widget/actions/workflows/release.yml/badge.svg?event=release)](https://github.com/codellyson/kk-whatsapp-widget/actions/workflows/release.yml)\n\n# KreativeKorna (KK) WhatsApp Widget Pro\n\nA comprehensive, enterprise-ready WhatsApp widget for websites that allows visitors to easily connect with your team members through WhatsApp chat. Built with TypeScript and designed for serious business use.\n\n## ✨ Features\n\n- 🚀 **Easy Integration** - Simple JavaScript API with minimal setup\n- 💼 **Business Ready** - Departments, business hours, lead capture, analytics\n- 💬 **Multi-Member Support** - Display multiple team members with individual WhatsApp contacts\n- 🎨 **Responsive Design** - Works seamlessly on desktop and mobile devices\n- ⚡ **Lightweight** - Built with vanilla TypeScript, no heavy dependencies\n- 🎯 **Fully Customizable** - Style and configure to match your brand\n- 📱 **Direct WhatsApp Integration** - Opens WhatsApp directly with pre-filled messages\n- 🌍 **Multi-language Support** - Built-in localization system\n- 📊 **Analytics Ready** - Track interactions and conversions\n- 🔒 **Enterprise Features** - Lead capture, CRM integration, business hours\n\n## 🚀 Quick Start\n\n### Installation\n\n```bash\n# Clone the repository\ngit clone https://github.com/codellyson/kk-whatsapp-widget.git\ncd kk-whatsapp-widget\n\n# Install dependencies\npnpm install\n\n# Start development server\npnpm dev\n```\n\n### Basic Usage\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n  \u003chead\u003e\n    \u003clink\n      rel=\"stylesheet\"\n      href=\"https://cdn.jsdelivr.net/npm/kk-whatsapp-widget@latest/dist/kk-whatsapp-widget.min.css\"\n    /\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003c!-- Widget container --\u003e\n    \u003cdiv id=\"whatsapp-widget\"\u003e\u003c/div\u003e\n\n    \u003c!-- Include the widget script --\u003e\n    \u003cscript src=\"path/to/widget.js\"\u003e\u003c/script\u003e\n\n    \u003cscript\u003e\n      // Initialize the widget\n      window.whatsappWidget(\"#whatsapp-widget\", {\n        members: [\n          {\n            name: \"John Doe\",\n            phone: \"+1234567890\",\n            avatar: \"https://example.com/avatar1.jpg\",\n            title: \"Customer Support\",\n            isOnline: true,\n          },\n        ],\n      });\n    \u003c/script\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n## 💼 Business Features\n\n### 1. Department Organization\n\nOrganize your team into departments for better customer routing:\n\n```javascript\nwindow.whatsappWidget(\"#widget\", {\n  departments: [\n    {\n      id: \"sales\",\n      name: \"Sales Department\",\n      description: \"Product inquiries and pricing\",\n      icon: \"💰\",\n      members: [\n        {\n          name: \"Alice Johnson\",\n          phone: \"+1234567890\",\n          avatar: \"https://example.com/alice.jpg\",\n          title: \"Sales Manager\",\n          skills: [\"Enterprise Sales\", \"SaaS\"],\n        },\n      ],\n    },\n    {\n      id: \"support\",\n      name: \"Technical Support\",\n      description: \"Technical help and troubleshooting\",\n      icon: \"🛠️\",\n      members: [\n        {\n          name: \"Bob Smith\",\n          phone: \"+1234567891\",\n          avatar: \"https://example.com/bob.jpg\",\n          title: \"Senior Developer\",\n          skills: [\"JavaScript\", \"React\", \"API Integration\"],\n        },\n      ],\n    },\n  ],\n});\n```\n\n### 2. Business Hours \u0026 Availability\n\nSet operating hours and show offline messages:\n\n```javascript\nwindow.whatsappWidget(\"#widget\", {\n  businessHours: {\n    enabled: true,\n    schedule: {\n      mon: { open: \"09:00\", close: \"17:00\" },\n      tue: { open: \"09:00\", close: \"17:00\" },\n      wed: { open: \"09:00\", close: \"17:00\" },\n      thu: { open: \"09:00\", close: \"17:00\" },\n      fri: { open: \"09:00\", close: \"17:00\" },\n    },\n    offlineMessage:\n      \"We're currently offline. Leave a message and we'll respond during business hours!\",\n  },\n  members: [\n    {\n      name: \"Support Team\",\n      phone: \"+1234567890\",\n      avatar: \"https://example.com/support.jpg\",\n      isOnline: true, // Override business hours for specific members\n    },\n  ],\n});\n```\n\n### 3. Lead Capture \u0026 CRM Integration\n\nCapture lead information before starting conversations:\n\n```javascript\nwindow.whatsappWidget(\"#widget\", {\n  leadCapture: {\n    enabled: true,\n    showBefore: \"member-selection\", // or \"message-send\"\n    fields: {\n      name: { required: true, placeholder: \"Your full name\" },\n      email: {\n        required: true,\n        placeholder: \"your.email@company.com\",\n        type: \"email\",\n      },\n      phone: { required: false, placeholder: \"Phone number\", type: \"tel\" },\n      company: { required: false, placeholder: \"Company name\" },\n    },\n    onLeadCapture: (leadData) =\u003e {\n      // Send to your CRM\n      fetch(\"/api/leads\", {\n        method: \"POST\",\n        headers: { \"Content-Type\": \"application/json\" },\n        body: JSON.stringify(leadData),\n      });\n    },\n  },\n});\n```\n\n### 4. Quick Messages \u0026 Templates\n\nProvide predefined message templates:\n\n```javascript\nwindow.whatsappWidget(\"#widget\", {\n  quickMessages: [\n    {\n      category: \"general\",\n      messages: [\n        {\n          label: \"Product Demo\",\n          text: \"I'd like to schedule a product demonstration\",\n        },\n        {\n          label: \"Pricing Info\",\n          text: \"Can you send me detailed pricing information?\",\n        },\n        {\n          label: \"Technical Support\",\n          text: \"I need help with technical issues\",\n        },\n      ],\n    },\n  ],\n});\n```\n\n### 5. Analytics \u0026 Tracking\n\nTrack user interactions and conversions:\n\n```javascript\nwindow.whatsappWidget(\"#widget\", {\n  analytics: {\n    enabled: true,\n    trackingId: \"GA_MEASUREMENT_ID\", // Google Analytics\n    events: {\n      onWidgetOpen: (data) =\u003e {\n        // Track widget opens\n        gtag(\"event\", \"widget_open\", {\n          timestamp: data.timestamp,\n        });\n      },\n      onMemberSelect: (member) =\u003e {\n        // Track member selections\n        gtag(\"event\", \"member_select\", {\n          member_name: member.name,\n          member_department: member.department,\n        });\n      },\n      onMessageSent: (data) =\u003e {\n        // Track message sends\n        gtag(\"event\", \"message_sent\", {\n          member_name: data.member.name,\n          message_length: data.message.length,\n        });\n      },\n      onLeadCapture: (leadData) =\u003e {\n        // Track lead captures\n        gtag(\"event\", \"lead_capture\", {\n          lead_email: leadData.email,\n          lead_company: leadData.company,\n        });\n      },\n    },\n  },\n});\n```\n\n### 6. Multi-language Support\n\nCustomize the widget for different languages:\n\n```javascript\nwindow.whatsappWidget(\"#widget\", {\n  localization: {\n    language: \"es\",\n    translations: {\n      headerTitle: \"WhatsApp\",\n      headerDescription:\n        \"¡Hola! Haz clic en uno de nuestros miembros para chatear por WhatsApp\",\n      messagePlaceholder: \"Escribe tu mensaje aquí...\",\n      sendButton: \"Enviar\",\n      offlineMessage:\n        \"Actualmente estamos fuera de línea. Deja un mensaje y te responderemos.\",\n      backButton: \"Volver\",\n      nameLabel: \"Nombre\",\n      emailLabel: \"Correo electrónico\",\n      phoneLabel: \"Teléfono\",\n      companyLabel: \"Empresa\",\n      submitButton: \"Continuar al Chat\",\n    },\n  },\n});\n```\n\n### 7. Advanced Styling \u0026 Theming\n\nCustomize the appearance to match your brand:\n\n```javascript\nwindow.whatsappWidget(\"#widget\", {\n  position: \"bottom-left\", // bottom-right, top-left, top-right\n  theme: {\n    brandColors: {\n      primary: \"#6C5CE7\",\n      secondary: \"#5A4FCF\",\n      accent: \"#4834D4\",\n    },\n    typography: {\n      fontFamily: \"Inter, system-ui, sans-serif\",\n      fontSize: \"14px\",\n    },\n  },\n  styles: {\n    button: {\n      backgroundColor: \"#6C5CE7\",\n      color: \"#ffffff\",\n    },\n  },\n});\n```\n\n## ⚙️ Complete Configuration Reference\n\n```typescript\ninterface WidgetConfig {\n  // Core configuration\n  members?: Member[];\n  position?: \"bottom-right\" | \"bottom-left\" | \"top-right\" | \"top-left\";\n  autoOpen?: boolean;\n  showBranding?: boolean;\n\n  // Business information\n  businessInfo?: {\n    name: string;\n    tagline?: string;\n    logo?: string;\n    description?: string;\n  };\n\n  // Business hours\n  businessHours?: {\n    enabled: boolean;\n    timezone?: string;\n    schedule: {\n      [day: string]: { open: string; close: string } | null;\n    };\n    offlineMessage?: string;\n  };\n\n  // Departments\n  departments?: {\n    id: string;\n    name: string;\n    description?: string;\n    icon?: string;\n    members: Member[];\n  }[];\n\n  // Lead capture\n  leadCapture?: {\n    enabled: boolean;\n    showBefore?: \"member-selection\" | \"message-send\";\n    fields: {\n      name?: { required: boolean; placeholder: string; type?: string };\n      email?: { required: boolean; placeholder: string; type?: string };\n      phone?: { required: boolean; placeholder: string; type?: string };\n      company?: { required: boolean; placeholder: string; type?: string };\n    };\n    onLeadCapture?: (leadData: any) =\u003e void;\n  };\n\n  // Quick messages\n  quickMessages?: {\n    category: string;\n    messages: { label: string; text: string }[];\n  }[];\n\n  // Analytics\n  analytics?: {\n    enabled: boolean;\n    trackingId?: string;\n    events?: {\n      onWidgetOpen?: (data: any) =\u003e void;\n      onMemberSelect?: (member: Member) =\u003e void;\n      onMessageSent?: (data: any) =\u003e void;\n      onLeadCapture?: (leadData: any) =\u003e void;\n      onWidgetClose?: () =\u003e void;\n    };\n  };\n\n  // Localization\n  localization?: {\n    language: string;\n    translations: { [key: string]: string };\n  };\n\n  // Theming\n  theme?: {\n    brandColors?: {\n      primary: string;\n      secondary: string;\n      accent: string;\n    };\n    typography?: {\n      fontFamily: string;\n      fontSize: string;\n    };\n  };\n}\n\ninterface Member {\n  id?: string;\n  name: string;\n  phone: string;\n  avatar: string;\n  title?: string;\n  department?: string;\n  skills?: string[];\n  isOnline?: boolean;\n}\n```\n\n## 🔗 Integration Examples\n\n### WordPress Integration\n\n```php\n// functions.php\nfunction add_whatsapp_widget() {\n    wp_enqueue_script('whatsapp-widget', 'path/to/widget.js', [], '1.0.0', true);\n    wp_enqueue_style('whatsapp-widget', 'path/to/widget.css', [], '1.0.0');\n}\nadd_action('wp_enqueue_scripts', 'add_whatsapp_widget');\n\n// In your template\necho '\u003cdiv id=\"whatsapp-widget\"\u003e\u003c/div\u003e';\necho '\u003cscript\u003e\nwindow.whatsappWidget(\"#whatsapp-widget\", ' . json_encode($widget_config) . ');\n\u003c/script\u003e';\n```\n\n### React Integration\n\n```jsx\nimport { useEffect } from \"react\";\n\nfunction WhatsAppWidget({ config }) {\n  useEffect(() =\u003e {\n    if (window.whatsappWidget) {\n      window.whatsappWidget(\"#whatsapp-widget\", config);\n    }\n  }, [config]);\n\n  return \u003cdiv id=\"whatsapp-widget\"\u003e\u003c/div\u003e;\n}\n```\n\n### Shopify Integration\n\n```liquid\n\u003c!-- In your theme.liquid --\u003e\n\u003cdiv id=\"whatsapp-widget\"\u003e\u003c/div\u003e\n\u003cscript src=\"{{ 'whatsapp-widget.js' | asset_url }}\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n  window.whatsappWidget(\"#whatsapp-widget\", {\n    businessInfo: {\n      name: \"{{ shop.name }}\",\n      logo: \"{{ shop.logo | img_url: '100x100' }}\"\n    },\n    members: [\n      {\n        name: \"Customer Support\",\n        phone: \"{{ settings.whatsapp_phone }}\",\n        avatar: \"{{ 'support-avatar.jpg' | asset_url }}\"\n      }\n    ]\n  });\n\u003c/script\u003e\n```\n\n## 🎨 CSS Customization\n\n### Available CSS Variables\n\n```css\n:root {\n  --kk_wa-primary-color: #25d366;\n  --kk_wa-secondary-color: #128c7e;\n  --kk_wa-accent-color: #075e54;\n  --kk_wa-font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto,\n    sans-serif;\n  --kk_wa-border-radius-sm: 8px;\n  --kk_wa-border-radius-md: 12px;\n  --kk_wa-container-width: 350px;\n}\n```\n\n### CSS Classes for Styling\n\n- `.kk_wa-button` - Main WhatsApp button\n- `.kk_wa-chat-container` - Chat popup container\n- `.kk_wa-chat-header` - Header section\n- `.kk_wa-department-card` - Department selection cards\n- `.kk_wa-member-card` - Individual member cards\n- `.kk_wa-lead-form` - Lead capture form\n- `.kk_wa-quick-message-btn` - Quick message buttons\n- `.kk_wa-online-indicator` - Online status indicator\n\n## 📊 Analytics Integration\n\n### Google Analytics 4\n\n```javascript\n// Initialize GA4\ngtag(\"config\", \"GA_MEASUREMENT_ID\");\n\n// Configure widget with GA4 tracking\nwindow.whatsappWidget(\"#widget\", {\n  analytics: {\n    enabled: true,\n    trackingId: \"GA_MEASUREMENT_ID\",\n    events: {\n      onWidgetOpen: (data) =\u003e {\n        gtag(\"event\", \"widget_interaction\", {\n          action: \"open\",\n          timestamp: data.timestamp,\n        });\n      },\n      onLeadCapture: (leadData) =\u003e {\n        gtag(\"event\", \"generate_lead\", {\n          currency: \"USD\",\n          value: 100.0, // Estimated lead value\n        });\n      },\n    },\n  },\n});\n```\n\n### Custom Analytics\n\n```javascript\nwindow.whatsappWidget(\"#widget\", {\n  analytics: {\n    enabled: true,\n    events: {\n      onWidgetOpen: (data) =\u003e {\n        // Send to your analytics service\n        fetch(\"/api/analytics/widget-open\", {\n          method: \"POST\",\n          body: JSON.stringify(data),\n        });\n      },\n      onMessageSent: (data) =\u003e {\n        // Track conversions\n        fetch(\"/api/analytics/message-sent\", {\n          method: \"POST\",\n          body: JSON.stringify({\n            member: data.member.name,\n            department: data.member.department,\n            message_length: data.message.length,\n            timestamp: new Date().toISOString(),\n          }),\n        });\n      },\n    },\n  },\n});\n```\n\n## 🔧 API Reference\n\n### `whatsappWidget(selector, config)`\n\nInitializes the WhatsApp widget on the specified element.\n\n**Parameters:**\n\n- `selector` (string): CSS selector for the container element\n- `config` (WidgetConfig): Configuration object\n\n**Returns:** WhatsAppWidget instance\n\n## 🌐 Browser Support\n\n- Chrome (latest)\n- Firefox (latest)\n- Safari (latest)\n- Edge (latest)\n- Mobile browsers (iOS Safari, Chrome Mobile)\n\n## 📋 Requirements\n\n- Font Awesome 6.0+ (for icons)\n- Modern browser with ES2020 support\n\n## 🤝 Contributing\n\n1. Fork the repository\n2. Create a feature branch (`git checkout -b feature/amazing-feature`)\n3. Commit your changes (`git commit -m 'Add amazing feature'`)\n4. Push to the branch (`git push origin feature/amazing-feature`)\n5. Open a Pull Request\n\n## 📝 License\n\nThis project is licensed under the MIT License - see the LICENSE file for details.\n\n## 🆘 Support \u0026 Documentation\n\n- [Live Demo](https://your-demo-site.com)\n- [API Documentation](https://docs.your-site.com)\n- [Integration Examples](https://github.com/your-repo/examples)\n- [Issue Tracker](https://github.com/your-repo/issues)\n\n## 🙏 Acknowledgments\n\n- Font Awesome for the beautiful icons\n- Vite for the excellent build tool\n- TypeScript for type safety\n- The open-source community for inspiration and contributions\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodellyson%2Fkk-whatsapp-widget","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcodellyson%2Fkk-whatsapp-widget","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodellyson%2Fkk-whatsapp-widget/lists"}