Chatbot Stüdyo: Siteye Embed Kurulum

YSN Chatbot Stüdyosu, kendi sitenize yerleştirebileceğiniz akıllı bir diyalog widget'ı üretir. Ziyaretçi sitenize girdiğinde sağ alt köşede balon görür, tıkladığında bot ile konuşur. Arka planda prompt + kurumsal hafıza + oturum geçmişi bir araya gelir ve Claude ile streaming cevap döner. Bu dokümanda yeni bir bot oluşturmayı, özelleştirmeyi, embed kodunu almayı ve yaygın senaryoları anlatıyoruz.

1. Yeni Bot Oluşturma

Panelde "Chatbot Stüdyosu" > "Yeni Bot" tıklayın. Aşağıdaki alanları doldurun:

• **Bot adı** — iç kullanım için; kullanıcıya görünmez.
• **Görünen isim** — widget başlığı (ör. "Mecy Asistan").
• **Sistem promptu** — botun karakteri, sınırları, görevi. 300-1500 kelime ideali.
• **Başlangıç mesajı** — bot ilk açıldığında otomatik yazar.
• **Ajanlaştırma** — `danisman | satis | destek | genel` şablonlarından biri.
• **Kurumsal hafıza bağla** — mevcut profilinizi seçin.
• **Bilgi bankası** — opsiyonel. PDF, site haritası veya markdown yükleyin (RAG'e girer).

Kaydettiğinizde platform otomatik olarak bir embed_key üretir. Bu 32 haneli alfanümerik bir kimliktir; sitenizdeki scriptle botu eşler.

2. Görsel Özelleştirme

"Görünüm" sekmesinde:

• Ana renk (hex veya renk paletinden)
• İkincil renk
• Balon konumu (`bottom-right | bottom-left | inline`)
• Balon ikonu (svg yükleyin veya preset seçin)
• Font (Inter, Poppins, Roboto, Sans)
• Koyu/açık mod davranışı (`auto | force-light | force-dark`)

Önizleme sağ tarafta canlı güncellenir. Mobil önizleme ayrı sekmededir.

3. Embed Kodu

"Yayınla" tıkladığınızda size iki format verilir:

Script tag (en kolay)

<script
  src="https://atlas.yasinburak.com/widget/atlas-widget.js"
  data-key="atx_live_7h3Kp9..."
  data-position="bottom-right"
  defer
></script>

Bu kodu sitenizin </body> etiketinden hemen önce yapıştırın. Script asenkron yüklenir, sayfa performansını etkilemez (~38 KB gzip).

iframe (daha izole)

<iframe
  src="https://atlas.yasinburak.com/embed/atx_live_7h3Kp9..."
  style="position:fixed;bottom:20px;right:20px;width:380px;height:560px;border:0;border-radius:16px;box-shadow:0 20px 50px rgba(0,0,0,.2);z-index:9999"
  allow="clipboard-write"
  title="Mecy Asistan"
></iframe>

iframe'i kendi div'ine yerleştirirseniz widget orada inline açılır (balon olmaz).

4. Alan Adı Kısıtlama

Güvenlik için "İzinli domainler" alanına sitenizi ekleyin: mecyclinic.com, *.mecyclinic.com. Widget bu domain'ler dışında başlatılmaya çalışıldığında 403 döner. Geliştirme için localhost:* de ekleyin.

5. Etkinlikler (Analytics Hook)

Widget, window üzerinde olaylar fırlatır:

window.addEventListener("atlas:open",    e => console.log("widget opened"));
window.addEventListener("atlas:message", e => console.log(e.detail));
window.addEventListener("atlas:lead",    e => {
  // e.detail.email, e.detail.phone
  gtag("event", "lead", { source: "atlas-chatbot" });
});

6. Lead Yakalama

Sistem promptunda "3 turdan sonra telefon iste" gibi kural yazarsanız bot otomatik lead toplar. Yakalanan veri POST /api/v1/chatbot/leads endpoint'ine yazılır, "Leadler" sekmesinde listelenir ve CSV/Excel indirilebilir.

7. Çoklu Dil

Widget data-lang="auto" ise tarayıcı diline göre TR/EN açılır. Kullanıcı widget içinden de manuel seçebilir. Bot sistem promptunda iki dil bilmelidir; şablonumuzdaki "respond in user's language" satırı yeterlidir.

8. Kontör

Her konuşma turu ortalama 1 kontör (model + prompt uzunluğuna göre 1-3). Site trafiğiniz yüksekse Aylık kontör limitinin %80'ine ulaşıldığında e-posta uyarısı gelir. "Rate limit" sekmesinden IP başına dakikada max mesaj sınırı koyabilirsiniz (spam koruma).

9. Yaygın Sorunlar

• **"Widget görünmüyor"** → Console'da CORS veya 403 hatası var mı? İzinli domain doğru mu?
• **"Yanıtlar çok uzun"** → Sistem promptuna "max 3 cümle yanıt ver" kuralı ekleyin.
• **"Bot marka sesi değil"** → Kurumsal Hafıza > voice > tone alanını netleştirin.