# Canlı Sohbet Widget'ı Bu proje, web sitelerine entegre edilebilen, modern ve özelleştirilebilir bir canlı sohbet (livechat) widget'ı sunar. React, TypeScript ve Vite kullanılarak geliştirilmiştir. ## Hızlı Başlangıç Widget'ı sitenize hızlıca eklemek için aşağıdaki kodu kullanabilirsiniz. `` ve `` alanlarını kendi bilgilerinizle güncellemeyi unutmayın. ```html Livechat Widget
``` --- ## Geliştirme ve Güncelleme Süreci 1. **Geliştirme Ortamını Başlatma:** - `npm run dev`: Vite geliştirme sunucusunu başlatır ve `index.html` üzerinden test imkanı sunar. - `npm run dev2`: `vite.config.2.ts` yapılandırması ile `index2.html` dosyasını kullanır. 2. **Kodlama ve Stil:** - Kodlama **TypeScript** ve **React** ile yapılır. - Stil için **Tailwind CSS** kullanılır. - Kod kalitesi için **Biome** ile linting ve formatlama yapılır (`npm run format`). --- ## Sürüm Yükseltme ve NPM Paketi Olarak Yayınlama 1. **Sürüm ve URL'leri Güncelleme:** `version.cjs` script'i, `package.json` dosyasını güncellemek için kullanılır. Bu script, yeni sürüm numarasını, API ve WebSocket URL'lerini parametre olarak alır. ```sh node version.cjs ``` Örnek: `node version.cjs 1.0.1 https://api.example.com wss://ws.example.com` 2. **Projeyi Build Etme:** `npm run build` komutu, projenin üretim versiyonunu `dist` klasörüne oluşturur. 3. **NPM'e Yayınlama:** Build işlemi tamamlandıktan sonra, `npm publish` komutu ile paket npm registry'sine gönderilir. --- ## Widget Kullanımı ve Dokümantasyon ### Entegrasyon Widget'ı bir web sitesine eklemek için CDN üzerinden gelen `main.css` ve `main.js` dosyalarını HTML sayfanıza ekleyin. `` kısmını kullanmak istediğiniz sürümle değiştirin. ### Widget'ı Başlatma İki yöntemle widget'ı başlatabilirsiniz: * **JavaScript ile:** Bir `div` elementi oluşturun ve `window.widget` fonksiyonunu çağırın. ```html
``` * **Custom Element ile (Önerilen):** `a-livechat` custom elementini kullanarak widget'ı daha deklaratif bir şekilde ekleyebilirsiniz. ```html ```