@alfatech/livechat

v2025.12.1-7.2

Published

10 days ago

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.

0High
0Medium
0Low

eyormaz

uodev

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. <REPLACE_WITH_VERSION> ve <REPLACE_WITH_LINK_ID> alanlarını kendi bilgilerinizle güncellemeyi unutmayın.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Livechat Widget</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@alfatech/livechat@<REPLACE_WITH_VERSION>/dist/main.css" />
  </head>

  <body>
    <div id="livechat"></div>
    <script src="https://cdn.jsdelivr.net/npm/@alfatech/livechat@<REPLACE_WITH_VERSION>/dist/main.js" type="module"></script>
    <script>
      window.onload = () => {
        window.widget({
          container: document.getElementById("livechat"),
          link_id: "<REPLACE_WITH_LINK_ID>",
        });
      };
    </script>
  </body>
</html>

Geliştirme ve Güncelleme Süreci

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

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.
```
node version.cjs <yeni_sürüm> <api_url> <ws_url>
```
Örnek: node version.cjs 1.0.1 https://api.example.com wss://ws.example.com
Projeyi Build Etme: npm run build komutu, projenin üretim versiyonunu dist klasörüne oluşturur.
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. <REPLACE_WITH_VERSION> 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.

<body>
  <div id="livechat"></div>
  <script>
    window.onload = () => {
      window.widget({
        container: document.getElementById("livechat"),
        link_id: "<REPLACE_WITH_LINK_ID>",
      });
    };
  </script>
</body>

Custom Element ile (Önerilen): a-livechat custom elementini kullanarak widget'ı daha deklaratif bir şekilde ekleyebilirsiniz.
```
<body>
  <a-livechat link-id="<REPLACE_WITH_LINK_ID>"></a-livechat>
</body>
```

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme