@alfatech/livechat 2025.8.0-4.1 → 2025.10.1-6.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +75 -2
- package/dist/main.js +29 -29
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,4 +1,10 @@
|
|
|
1
|
-
#
|
|
1
|
+
# Canlı Sohbet Widget'ı
|
|
2
|
+
|
|
3
|
+
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.
|
|
4
|
+
|
|
5
|
+
## Hızlı Başlangıç
|
|
6
|
+
|
|
7
|
+
Widget'ı sitenize hızlıca eklemek için aşağıdaki kodu kullanabilirsiniz. `<REPLACE_WITH_VERSION>` ve `<REPLACE_WITH_LINK_ID>` alanlarını kendi bilgilerinizle güncellemeyi unutmayın.
|
|
2
8
|
|
|
3
9
|
```html
|
|
4
10
|
<!DOCTYPE html>
|
|
@@ -6,7 +12,7 @@
|
|
|
6
12
|
<head>
|
|
7
13
|
<meta charset="UTF-8" />
|
|
8
14
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
9
|
-
<title>
|
|
15
|
+
<title>Livechat Widget</title>
|
|
10
16
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@alfatech/livechat@<REPLACE_WITH_VERSION>/dist/main.css" />
|
|
11
17
|
</head>
|
|
12
18
|
|
|
@@ -25,3 +31,70 @@
|
|
|
25
31
|
</html>
|
|
26
32
|
```
|
|
27
33
|
|
|
34
|
+
---
|
|
35
|
+
|
|
36
|
+
## Geliştirme ve Güncelleme Süreci
|
|
37
|
+
|
|
38
|
+
1. **Geliştirme Ortamını Başlatma:**
|
|
39
|
+
- `npm run dev`: Vite geliştirme sunucusunu başlatır ve `index.html` üzerinden test imkanı sunar.
|
|
40
|
+
- `npm run dev2`: `vite.config.2.ts` yapılandırması ile `index2.html` dosyasını kullanır.
|
|
41
|
+
|
|
42
|
+
2. **Kodlama ve Stil:**
|
|
43
|
+
- Kodlama **TypeScript** ve **React** ile yapılır.
|
|
44
|
+
- Stil için **Tailwind CSS** kullanılır.
|
|
45
|
+
- Kod kalitesi için **Biome** ile linting ve formatlama yapılır (`npm run format`).
|
|
46
|
+
|
|
47
|
+
---
|
|
48
|
+
|
|
49
|
+
## Sürüm Yükseltme ve NPM Paketi Olarak Yayınlama
|
|
50
|
+
|
|
51
|
+
1. **Sürüm ve URL'leri Güncelleme:**
|
|
52
|
+
`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.
|
|
53
|
+
```sh
|
|
54
|
+
node version.cjs <yeni_sürüm> <api_url> <ws_url>
|
|
55
|
+
```
|
|
56
|
+
Örnek: `node version.cjs 1.0.1 https://api.example.com wss://ws.example.com`
|
|
57
|
+
|
|
58
|
+
2. **Projeyi Build Etme:**
|
|
59
|
+
`npm run build` komutu, projenin üretim versiyonunu `dist` klasörüne oluşturur.
|
|
60
|
+
|
|
61
|
+
3. **NPM'e Yayınlama:**
|
|
62
|
+
Build işlemi tamamlandıktan sonra, `npm publish` komutu ile paket npm registry'sine gönderilir.
|
|
63
|
+
|
|
64
|
+
---
|
|
65
|
+
|
|
66
|
+
## Widget Kullanımı ve Dokümantasyon
|
|
67
|
+
|
|
68
|
+
### Entegrasyon
|
|
69
|
+
|
|
70
|
+
Widget'ı bir web sitesine eklemek için CDN üzerinden gelen `main.css` ve `main.js` dosyalarını HTML sayfanıza ekleyin. `<REPLACE_WITH_VERSION>` kısmını kullanmak istediğiniz sürümle değiştirin.
|
|
71
|
+
|
|
72
|
+
### Widget'ı Başlatma
|
|
73
|
+
|
|
74
|
+
İki yöntemle widget'ı başlatabilirsiniz:
|
|
75
|
+
|
|
76
|
+
* **JavaScript ile:**
|
|
77
|
+
Bir `div` elementi oluşturun ve `window.widget` fonksiyonunu çağırın.
|
|
78
|
+
|
|
79
|
+
```html
|
|
80
|
+
<body>
|
|
81
|
+
<div id="livechat"></div>
|
|
82
|
+
<script>
|
|
83
|
+
window.onload = () => {
|
|
84
|
+
window.widget({
|
|
85
|
+
container: document.getElementById("livechat"),
|
|
86
|
+
link_id: "<REPLACE_WITH_LINK_ID>",
|
|
87
|
+
});
|
|
88
|
+
};
|
|
89
|
+
</script>
|
|
90
|
+
</body>
|
|
91
|
+
```
|
|
92
|
+
|
|
93
|
+
* **Custom Element ile (Önerilen):**
|
|
94
|
+
`a-livechat` custom elementini kullanarak widget'ı daha deklaratif bir şekilde ekleyebilirsiniz.
|
|
95
|
+
|
|
96
|
+
```html
|
|
97
|
+
<body>
|
|
98
|
+
<a-livechat link-id="<REPLACE_WITH_LINK_ID>"></a-livechat>
|
|
99
|
+
</body>
|
|
100
|
+
```
|