Gengage React Native Widget SDK

📖 Giriş

Bu depo, React Native projeleri için kolayca entegre edilebilen bir sohbet/ürün öneri widget’ı sunar. ChatbotWidget bileşeni, gömülü bir WebView kullanarak dış kaynaklı (iframe) içerikleri uygulamanızda yüzen bir buton aracılığıyla görüntüler. Ayrıca push bildirim izinleri ve token yönetimi için yardımcı fonksiyonlar sağlar.

SDK; TypeScript ile yazılır, dist/ klasöründe tamamen derlenmiş CommonJS çıktıları barındırır. Yayınlanan NPM paketi doğrudan üretime hazırdır.

⚡️ Hızlı Başlangıç

# Hazırlık
npm install react-native-svg
npm install react-native-webview
# Kurulum
npm install gengage-widget
# veya
yarn add gengage-widget

Bazı senaryolarda

--legacy-peer-deps

kullanılması gerekebilir.

Temel Kullanım

import React from 'react';
import { ChatbotWidget } from 'gengage-widget';

export default function App() {
  return (
    <ChatbotWidget
      accountId="YOUR_ACCOUNT_ID"
      productId="PRODUCT_ID"
      // İsteğe bağlı prop’lar
      iconSize={32}
      enableAnimations={true}
    />
  );
}

Bu kadar! Uygulamayı başlattığınızda sağ-alt köşede bir sohbet butonu görünür.

🛠️ Kurulum & Derleme Komutları

| Komut | Açıklama | |-------|----------| | npm run build | TypeScript dosyalarını dist/ klasörüne derler | | npm run dev | Dosya değişikliklerini izleyerek anlık derleme yapar | | npm run clean | dist/ klasörünü temizler |

Not: Paketi yerel olarak test etmek için npm run build komutundan sonra, proje kökünde npm pack çalıştırarak .tgz arşivi oluşturabilirsiniz.

🎛️ API Referansı

<ChatbotWidget /> Prop’ları

| Prop | Tip | Varsayılan | Açıklama | |------|-----|-----------|----------| | accountId | string | – | Gengage panelinden alınan hesap kimliği | | productId | string | – | (Opsiyonel) Ürün detay sayfasından gönderilecek SKU/ID | | style | ViewStyle | – | Dış kapsayıcının stil objesi | | webViewStyle | ViewStyle | – | İç WebView bileşeninin stili | | iconSize | number | 28 | Başlatıcı ikonun (SVG) boyutu | | buttonStyle | ViewStyle | – | Yüzen butonun stili | | iconTextStyle | TextStyle | – | İkon üzerindeki metin stili | | enableAnimations | boolean | true | Açılış/kapanış animasyonlarını kontrol eder | | onLoad | () => void | – | İframe başarıyla yüklendiğinde tetiklenir | | onError | () => void | – | Yükleme hatası oluştuğunda tetiklenir |

<WebViewWidget /> Prop’ları

Daha düşük seviyeli bileşen olup doğrudan URL alan versiyondur. ChatbotWidget bunun özel bir sarmalayıcısıdır. Ayrıntılı tip bilgisi src/types/types.ts dosyasında bulunabilir.

🔔 Bildirim Yardımcıları

utils/Notification.tsx dosyası Expo, React-Native Firebase veya react-native-push-notification kütüphanelerinden hangisinin mevcut olduğuna runtime’da karar vererek şu işlevleri sağlar:

• requestNotificationPermission() – İzin ister, boolean döner.
• getDevicePushToken() – Cihaz FCM/Expo push token’ını döner.
• sendLocalNotification(payload) – Platform-bağımsız lokal bildirim gönderir.
• triggerRemotePush(apiUrl, token, payload) – Basit HTTP POST ile backend’e push tetikleme örneği.
• ensureDevicePushToken() – Tek satırda izin + token akışı.

📝 Lisans

ISC