Polaris Akıllı Asistan Widget

Modern web siteleri için akıllı asistan widget'ı.

Özellikler

• 💬 Metin tabanlı sohbet arayüzü
• 🔊 Ses tanıma ve sesli yanıt
• 🌙 Koyu/Açık tema desteği
• 💡 Akıllı öneri sistemi
• 📱 Tamamen responsive tasarım
• 🛍️ Ürün önerileri gösterimi

Kurulum

CDN ile Kurulum

Widget'ı doğrudan CDN üzerinden kullanmak için HTML dosyanıza aşağıdaki kodu ekleyin:

<!-- Widget'ın CSS dosyasını ekleyin -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/polaris.css">

<!-- Sayfa sonunda, body tag'inden önce script'i ekleyin -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/polaris.min.js" 
  data-auto-init="true" 
  data-org-id="your-org-id" 
  data-position="bottom-right">
</script>

NPM ile Kurulum

NPM kullanarak projenize eklemek için:

npm install polaris-assistant-widget

React projenizde import edin ve kullanın:

import { initPolaris } from 'polaris-assistant-widget';
import 'polaris-assistant-widget/dist/polaris.css';

// Komponentinizde
useEffect(() => {
  initPolaris({
    organizationId: 'your-org-id',
    position: 'bottom-right',
    theme: {
      primaryColor: '#4285F4',
    }
  });
}, []);

Konfigürasyon Seçenekleri

Widget'ı kişiselleştirmek için aşağıdaki seçenekleri kullanabilirsiniz:

| Seçenek | Tür | Varsayılan | Açıklama | |---------|-----|------------|----------| | organizationId | string | 'default' | Organizasyon ID'niz | | containerId | string | 'polaris-widget-container' | Widget'ın yerleşeceği HTML container ID'si | | position | string | 'bottom-right' | Widget'ın konumu ('bottom-right', 'bottom-left', 'top-right', 'top-left') | | autoOpen | boolean | false | Widget sayfa yüklendiğinde otomatik olarak açılsın mı? | | theme | object | {...} | Tema ayarları (renkler, fontlar vb.) | | features | object | {...} | Özellik bayrakları (ses tanıma, ürün önerileri vb.) |

HTML Öznitelikleri

Script tag'i üzerinde konfigürasyon için şu öznitelikleri kullanabilirsiniz:

• data-auto-init: Widget'ın otomatik başlatılması (true/false)
• data-org-id: Organizasyon ID'niz
• data-position: Widget pozisyonu
• data-auto-open: Sayfa yüklendiğinde otomatik açılma (true/false)

JavaScript API

// Widget'ı başlatma
window.Polaris.init({
  organizationId: 'your-org-id',
  position: 'bottom-right',
  theme: {
    primaryColor: '#FF5722',
    backgroundColor: '#FFFFFF',
    textColor: '#333333',
  },
  features: {
    voiceEnabled: true,
    productRecommendations: true,
  }
});

Örnekler

Özel Renklerle Kullanım

<script>
  document.addEventListener('DOMContentLoaded', function() {
    window.Polaris.init({
      organizationId: 'your-org-id',
      theme: {
        primaryColor: '#9C27B0',
        secondaryColor: '#2196F3',
        backgroundColor: '#F5F5F5',
      }
    });
  });
</script>

Ses Özelliği Olmadan Kullanım

<script>
  document.addEventListener('DOMContentLoaded', function() {
    window.Polaris.init({
      organizationId: 'your-org-id',
      features: {
        voiceEnabled: false,
      }
    });
  });
</script>

Lisans

MIT