Web sitesi

Quickchat AI Agent’ınızı web üzerinde sunmanın üç yolu vardır. Göstermek istediğiniz alana uygun olanı seçin:

• Widget: Sitenizin köşesindeki yüzen sohbet balonu. Genel amaçlı destek için uygundur.
• Embed: Sayfada tam istediğiniz yerde duran satır içi sohbet penceresi. AI’ı belirli bir uygulama ekranına, yardım merkezi sayfasına veya ürün ayrıntı sayfasına yerleştirmek için uygundur.
• Chat Page: Quickchat tarafından barındırılan tam ekran sohbet deneyimi. Kurulum ve kod gerektirmez. Destek e-postası, şirket içi Slack veya beta test kullanıcıları gibi kişilere, tarayıcılarında bir değişiklik yapmadan bağlantı paylaşmak istediğinizde uygundur.

Seçtiğiniz görünümü Channels → Your Website → Install üzerinden kurun. Sayfada üç alt sekme vardır: Agent’ı nasıl ekleyeceğinizi seçtiğiniz Install, görsel stil için Appearance ve ziyaretçilerin gördüğü metinler için Text Content. Install sekmesi yöntem seçimiyle başlar, kullanılabilirlik ve erişim kontrollerini ayrı bir bölümde tutar ve eklentilerle API’nin ihtiyaç duyduğu kopyalanabilir Scenario ID değerini gösterir.

İsteğe bağlı kurulum araçları

• Yayınlama yöntemlerini karşılaştırın. Belirttiğiniz kanalları, web sitesi erişiminizi ve gereken özellikleri Quickchat AI kurulum seçenekleriyle karşılaştırın. Bu araç sitenizi veya hesabınızı incelemez.

• Örnek sayfanın HTML ve Markdown içeriğini karşılaştırın. Sabit bir Quickchat AI örneğinden başlangıç HTML’ini, Markdown içeriğini ve araç bağlantılarını getirin. Bu araç JavaScript çalıştırmaz veya rastgele siteleri incelemez.

Widget

Widget, Quickchat AI Agent’ınızı doğrudan sitenize ekleyerek kullanıcıların AI ile kolayca etkileşim kurmasını sağlar. Genellikle sayfanın sağ alt köşesinde bir sohbet balonu olarak görünür. Tıklandığında açılan sohbet penceresinde kullanıcılar soru sorabilir, yardım alabilir veya bilgiye ulaşabilir.

Widget’ı web sitenize ekleme

Channels → Your Website → Install bölümünü açın. Sekme, “How do you want to add your AI Agent?” sorusuyla başlar ve kurulum yöntemlerini en kolaydan itibaren listeler. Sitenize uygun olanı seçin:

• WordPress: Ücretsiz Quickchat AI Agent eklentimizi kurun ve Scenario ID’nizi yapıştırın. Tema kodunu düzenlemeden Widget otomatik görünür.
• Shopify: Widget’ı mağazanızın Theme Editor aracıyla ekleyin. Shopify kılavuzuna bakın.
• Webflow, Wix & others: Tek bir kod parçasını kopyalayıp site oluşturucunuzun tüm sayfalara uygulanan özel kod ayarına yapıştırın. Sayfa üzerinde bir Embed veya HTML öğesi kullanmayın. Site oluşturucular bölümüne bakın.
• Share a link instead: Hiçbir şey kurmayın; barındırılan Chat Page bağlantınızı paylaşın.
• Install manually with code: Ham Widget veya Embed kodunu kopyalayıp HTML’inize kendiniz yapıştırın.

Her yöntem, yalnızca gereken kodu veya kimliği içeren odaklı, adım adım bir panel açar.

Scenario ID, Install sekmesinin üstünde kopyalanabilir alan olarak yer alır. Eklentilerin ve API’nin ihtiyaç duyduğu tanımlayıcıdır; bir kurulum adımında istendiğinde buradan kopyalayın.

Kodla manuel kurulum

HTML’inizi kendiniz yönetiyorsanız Install sekmesinde Install manually with code bölümünü genişletin ve:

1. Widget kodunu kopyalayın.
2. Sayfanızın HTML dosyasını açın. Site oluşturucuda bunun yerine site genelindeki kod ayarını kullanın; Site oluşturucular bölümüne bakın.
3. Kodu, Widget’ın görünmesini istediğiniz her sayfada kapanış </body> etiketinden hemen önce yapıştırın.

Widget kodunu verdiğiniz Scenario ID ile karşılaştırarak kontrol edin. Kontrol yapıştırılan kodu okur; web sitenizi getirmez.

Site oluşturucular

Webflow, Wix, Squarespace, Hostinger ve benzerlerinde Widget’ı site genelindeki kod ayarıyla bir kez ekleyin:

1. Her sayfaya kod ekleyen ayarı açın. Oluşturucular bunu Custom code, Code injection, Footer code veya Body end olarak adlandırabilir.
2. Widget kodunu buraya yapıştırıp tüm sayfalara uygulayın. Konum seçilebiliyorsa alt bilgiyi veya body sonunu seçin. Kod head içinde çalışmaz.
3. Sitenizi yayınlayın. Sohbet balonu her sayfada görünür.

Dikkat

Widget’ı bir sayfaya yerleştirilmiş Embed veya HTML öğesiyle eklemeyin. Birçok oluşturucu bu öğeleri küçük, ayrı bir çerçevede gösterir ve Widget orada açılamaz. Yüklense bile yalnızca o sayfada görünür.

Site genelindeki ayarın konumu:

Oluşturucu	Site genelindeki kod ayarı
Webflow	Site settings → Custom code → Footer code
Wix	Settings → Custom Code, ardından All pages ve Body - end. Bağlı bir alan adı gerekir.
Squarespace	Custom Code → Code Injection → Footer. Core, Plus, Advanced ve bazı eski planlarda kullanılabilir.
Hostinger Website Builder	More (⋯) → Integrations → Custom code. Betikler otomatik olarak sayfanın sonunda yüklenir.

Menüler değişebilir ve oluşturucunuzun diline çevrilmiş olabilir. Oluşturucu veya planınızda site genelinde kod ekleme ayarı yoksa Chat Page bağlantınızı paylaşın.

Yardım mı gerekiyor?

Geliştirici değil misiniz? Install sekmesinde Need a hand? altında iki kısayol bulunur:

• Ask AI for help: Agent’ı sitenize eklemeyle ilgili önceden doldurulmuş soruyla uygulama içi asistanı açar.
• Email instructions to a developer: Bir ekip arkadaşınıza gerekli her şeyi, Widget kodunu, Scenario ID’nizi ve bu kılavuzun bağlantısını gönderir; böylece kurulumu sizin için yapabilir.

Daha fazla yardım için contact@quickchat.ai adresine yazın.

Chat Page

Chat Page, AI Agent’ınızın bir Quickchat URL’sinde barındırılan tam ekran sürümüdür. Kurulum gerekmez. Bağlantıyı paylaşın; ziyaretçiler tarayıcılarında doğrudan Agent’ınızla konuşabilir. Şu durumlarda kullanın:

• Sohbet deneyimi istiyorsunuz ancak siteniz yok veya koduna dokunmak istemiyorsunuz.
• AI’ı beta test kullanıcıları, destek ekibi veya satış adayları gibi küçük bir grupla paylaşıyorsunuz ve herkese açık Widget yerine erişim kontrollü bağlantı gerekiyor.
• AI’ı e-posta, Slack veya CRM üzerinden takip iletişimi kanalı olarak göndermek istiyorsunuz.

Chat Page’i kimlerin açabileceğini Install → Chat Page Access altında ayarlayın. Aşağıdaki Erişim kontrolü bölümüne bakın.

Yeni konuşma başlatma

Sohbeti sıfırlayıp yeniden başlamak için:

• Widget veya Embed: Sohbeti açın ve pencerenin sağ üstündeki kare içindeki kalem düğmesine tıklayın.
• Chat Page: Kenar çubuğunda New chat seçin veya başlıktaki kare içindeki kalem düğmesini kullanın.

Bu işlem AI Agent’ınızla yeni bir konuşma başlatır. Önceki konuşma Inbox içinde kalır. Widget’ı kapatıp açmak veya sayfayı yenilemek mevcut konuşmayı sürdürebilir. AI’dan ‘sıfırla’ veya ‘sohbeti temizle’ istemek yeni konuşma başlatmaz. Tarayıcı çerezlerini temizlemeniz gerekmez.

Erişim kontrolü

Install sekmesi, erişim kontrollerini açılır Availability and access bölümünde tutar. Yayınınıza uygulanan iki kontrolü görmek için genişletin:

Widget & Embed access

Availability and access bölümünün üstündeki anahtardır. Açıkken Widget ve Embed betikleri ziyaretçilerin tarayıcılarında normal çalışır. Kapalıyken kod hâlâ sitede olsa bile Widget ve Embed kullanılamaz. Kodu kaldırmadan AI’ı geçici olarak çevrim dışı bırakmak veya Chat Page’i davet edilen kullanıcılara açık tutarken genel erişimi sınırlamak için yararlıdır.

Chat Page Access

Widget ve Embed anahtarından bağımsız olarak Chat Page erişimini sınırlayabilirsiniz:

• Anyone: Chat Page URL’si herkese açıktır. Bağlantıyı bilen herkes kullanabilir.
• Invited users only: Yalnızca e-postayla davet ettiğiniz Chat Users kullanabilir. Kimlik doğrulamaları gerekir.
• Nobody: Chat Page tamamen kapalıdır.

Invite Chat Users bağlantısı Settings → Organization → Team Members bölümünü açar. Mevcut davet formu panel izinleri olan ekip rolleri sunar; ayrı bir yalnızca sohbet rolü veya Chat Users bölümü sağlamaz. Birini davet etmeden önce Ekip üyeleri ve roller sayfasını inceleyin.

Özelleştirme

Appearance ve Text Content alt sekmeleri Widget, Embed ve Chat Page’in görünümünü ve ziyaretçilerin gördüğü metinleri değiştirmenizi sağlar. Üç görünüm de bu ayarları paylaşır. Bir kez değiştirin; Agent’ın yayınlandığı her yerde uygulanır.

Install, Appearance ve Text Content sekmelerinin sağ panelinde ayrı önizleme kontrolleri vardır. Yayınlamadan önce değişiklikleri görmek için Widget, Embed, Chat Page ve Desktop, Mobile görünümleri arasında geçiş yapın.

Appearance

Sohbet görünümlerinin görsel ayarları Branding, Size & Position, Theme ve Other Settings altında gruplandırılır.

Branding

• AI Agent Avatar: Agent’ın profil resmi veya logosudur. En fazla 5 MB olan tek görüntü hem sohbet başlığında hem başlatıcı düğmesinde kullanılır. Bu iki değil, tek ayardır: bir görüntü yüklenir ve iki yerde görünür; eski ayrı başlık logosu ve başlatıcı simgesinin yerini alır. Her Agent yerleşik varsayılan avatarla başlar. Reset to default bunu geri yükler; silmek ise avatarı tamamen kaldırır. Free dahil tüm planlarda kullanılabilir.

AI Agent Avatar, Widget, Embed ve Chat Page’e uygulanır; Discord’a uygulanmaz. Discord botunun avatarı kendi Discord uygulamasından gelir. Discord sayfasına bakın.

Size & Position

• Launcher size: Classic, Input Only veya Small. Sohbet açılmadan önce başlatıcının görünümünü kontrol eder.
• Başlatıcıyı kapatma: Classic başlatıcının sağ üstünde küçük bir kapatma düğmesi vardır. Masaüstünde üzerine gelince, dokunmatik cihazlarda her zaman görünür. Widget’ı yalnızca mevcut sayfa görüntülemesi için gizler; sonraki yüklemede geri gelir. Diğer başlatıcı boyutlarında kapatma düğmesi yoktur.
• Launcher label: Yalnızca Small seçiliyken görünür. Küçük başlatıcıdaki en fazla 25 karakterlik özel metindir; örneğin ‘AI’a sor’ veya ‘Sohbet’. Yalnızca simge göstermek için boş bırakın.
• Widget position: Sol alt, alt orta veya sağ alt.
• Chat window dimensions: Sohbet penceresinin genişliği 300–700px, yüksekliği 400–1200px.
• Draggable launcher: Ziyaretçilerin başlatıcıyı sayfada başka bir yere sürüklemesine izin verir. Önemli içeriği kapatıyorsa yararlıdır.

Theme

Sohbet görünümlerinin renklerini seçin:

• Light ve Dark, her hesapta aynı görünen sabit temalardır.
• Custom, kendi renk paletinizi kullanmanızı sağlar. Arka plan, başlık ve başlık metni, sohbet öncesi başlatma düğmesi, öneri etiketleri ve değerlendirme işlemleri gibi öğelerde kullanılan vurgu rengi, mesaj balonu ve metni, AI mesaj metni, link color, giriş alanı, kenarlıklar ve diğer öğeler için kontroller görünür. Her renk, arka planına karşı WCAG AA kontrastı açısından kontrol edilir; zor okunan eşleşmelerde uyarı verilir.

Markalı başlık ve vurgu renkleri Custom temasındadır. Light ve Dark nötr kalır; aralarında geçiş yapmak özel bir rengi taşımaz.

Transparency altındaki Background, sohbet penceresinin ne kadar saydam olacağını belirler. Tüm temalarda çalışır; renk tonunu tema sağlar:

• Solid: Sohbet penceresi opak arka plana sahiptir. Varsayılan budur.
• Glass: Pencere saydamlaşır ve arkasındaki site buzlu cam gibi bulanıklaşır. Light beyaz, Dark koyu, Custom ise seçtiğiniz arka plan rengini kullanır. Custom’da başlık rengi arka plandan farklıysa bu renk korunur ve markanız görünür kalır. Glass opacity, rengin sayfayı ne ölçüde örteceğini belirler: metni her sitede okunur tutan en düşük seviyeden, Light için %50, Dark için %65, Custom için renklerinize bağlı bir değerden %95’e kadar. Custom renklerinizle hiçbir opaklık değeri okunabilirlik sağlamıyorsa Widget opak arka plan kullanır ve ayarlar nedenini açıklar. Glass seçili kalır; metin veya arka plan renklerini yeterli kontrast için değiştirdiğinizde yeniden uygulanır.

Saydamlık telefonlar dahil Widget’a ve Embed’e uygulanır. Tam sayfa Chat Page her zaman opak arka plana sahiptir. Cihazında saydamlığı azaltma ayarını açan ziyaretçiler, bu ayarı sitelere ileten Chrome ve Edge’de Solid görünümünü görür. Sayfayı bulanıklaştıramayan tarayıcılarda Glass, metnin okunabilmesi için neredeyse opak kalır.

Custom seçildiğinde Chat Page için ayrı kenar çubuğu renkleri de açılır: Sidebar background, Sidebar text, Sidebar hover ve Sidebar hover text. Bunlar yalnızca tam sayfa Chat Page’e uygulanır, Widget balonuna veya Embed’e değil. Metin renklerini boş bırakın; Chat Page seçtiğiniz arka plana uygun okunabilir rengi otomatik seçer.

Corner radius, yani balon, giriş ve düğmelerin köşe yuvarlaklığı ile text size da ayarlanabilir. İkisi tüm temalarda çalışır.

Other Settings

• Voice Input: Ziyaretçiler sohbet kutusundaki mikrofonla sesli mesaj kaydedebilir. Kayıt giriş alanında metne dönüştürülür ve göndermeden önce düzenlenebilir. Kayıt iki dakika sonra otomatik durur. Ücretli planlarda kullanılabilir.
• File Attachments: Ziyaretçilerin mesaja resim veya belge eklemesine izin verir. Varsayılan olarak açıktır; kapatmak ek düğmesini kaldırır.
• Auto-open Widget: Sayfa yüklendiğinde Widget’ı otomatik açar.
• Hide Quickchat AI Branding: Tamamen kendi markanızı kullanmak için ‘Powered by Quickchat AI’ alt bilgisini gizler. White-labeling içeren planlarda kullanılabilir.

Ziyaretçilerin konuşmaları değerlendirmesi için Conversations → Insights → Conversation Rating bölümünü açın. Ayarlar ve sonuçlar aynı sekmededir. Conversation Rating sayfasına bakın.

Text Content

Selamlamayı ve ziyaretçiye gösterilen diğer metinleri düzenlemek için Channels → Your Website → Text Content bölümünü açın:

• Header text: Sohbet penceresinin üstündeki metin.
• Welcome message: Her konuşmanın başında AI Agent’ın gönderdiği ilk mesaj; örneğin ‘Merhaba, yardıma ihtiyacınız var mı?’.
• Show as a pop-up: Ziyaretçi tıklamadan dikkat çekmek için karşılama mesajını başlatıcının yanında yüzen konuşma balonu olarak gösterir. Bazen teaser veya başlatıcı mesajı denir. Balon Welcome message metnini gösterir; içeriği değiştirmek için o alanı düzenleyin.
• Conversation starters: Ziyaretçi yazmaya başlamadan önce gösterilen en fazla 3 örnek mesaj. Birine tıklamak onu ilk mesaj olarak gönderir. ‘Widget’ı nasıl kurarım?’ veya ‘Hangi entegrasyonları destekliyorsunuz?’ gibi örneklerle ziyaretçiyi AI’ın güçlü olduğu konulara yönlendirebilirsiniz.
• Input placeholder: Boş mesaj girişindeki ipucu metni.
• Disclaimer text: Konuşmanın arkasında görünen, genellikle kullanıcının AI ile konuştuğunu belirten metin. Açık ve görünür tutulmasını öneririz.

Pre-chat Screen, aynı Text Content sekmesinde bu alanların altındadır. Buradan açıp başlık, düğme ve mesaj metnini düzenleyin.

Diller ve çeviriler

Varsayılan olarak Text Content her ziyaretçiye yazdığınız şekliyle gösterilir. Ücretli planlarda dil bazında çeviriler ekleyerek ziyaretçinin Widget’ı kendi dilinde görmesini sağlayabilirsiniz.

1. Text Content alt sekmesinde Other languages bölümündeki Translate düğmesine tıklayın. Translate widget text paneli açılır; ana metin her çevirinin yanında Default (source) olarak görünür.
2. Add language düğmesine tıklayıp dil seçin. Quickchat AI mevcut metnin çevirisini oluşturur. O dil için başlık, karşılama, konuşma başlatıcıları, giriş ipucu, sohbet öncesi ekran ve açıklama metinlerini inceleyip düzenleyin. Değişiklikler otomatik kaydedilir.
3. Boş bıraktığınız alanlar varsayılan metne döner; yalnızca değiştirmek istediklerinizi çevirirsiniz. Otomatik çeviri başarısız olursa metni kendiniz girebilirsiniz.

Ekleyebileceğiniz dil sayısı planınıza bağlıdır.

Ziyaretçinin dili nasıl seçilir?

Widget ve Embed için Quickchat dili şu sırayla belirler:

1. Yükleyicide belirlediğiniz açık dil seçimi: _quickchat("language", "de"). Bunu _quickchat("init", ...) çağrısından önce çalıştırın.
2. Sayfanın <html lang> niteliği: Örneğin <html lang="de"> Almanca çeviriyi gösterir. Önerilen yaklaşım budur: her yerelleştirilmiş sayfada lang değerini doğru ayarlayın; Widget otomatik izler.
3. Ziyaretçinin tarayıcı dili, eşleşme yoksa Default metni.

Not

Ziyaretçinin dili için çeviri yoksa her zaman Default metni gösterilir. Hiçbir alan boş kalmaz.

Gelişmiş özellikler: özel parametreler

Quickchat AI Widget ve Embed, başlatılırken özel parametreler göndermenize izin verir. Bunları şu amaçlarla kullanabilirsiniz:

• Analitiği geliştirmek; Quickchat platformunun CSV dışa aktarımında bulunurlar.
• API Actions için değer sağlamak ve izin verilen durumlarda yanıtları kişiselleştirmek. AI tüm parametreleri değil, filtrelenmiş bir alt kümeyi alır. Model bağlamı ve yetkilendirme bölümüne bakın.

Yararlı özel parametre örnekleri:

• visitor_name: Mike
• customer_tier: VIP
• order_id: ord_123

visitor_name, tanınan bir kişi anahtarıdır. customer_tier gibi özel anahtarlar saklanıp Actions içinde kullanılabilir; ancak yalnızca göndermek AI’ın yanıtında kullanacağını garanti etmez. Tarayıcıdan gelen değerleri müşteri hesabına erişim yetkisi olarak değil, doğrulanmamış girdi olarak değerlendirin.

Bu parametreleri eklemek için Your Website > Install altında bulduğunuz betiğe aşağıdaki çağrıyı ekleyin.

Widget ve Embed aynı çağrı biçimini kullanır:

_quickchat("custom_params", {
  "visitor_name": "Mike",
  "customer_tier": "VIP",
  "order_id": "ord_123",
});

Bu nitelikler her yeni konuşmaya atanır. Anahtar sayısını az tutmanızı öneririz.

İpucu

order_id veya customer_tier gibi snake_case adlı özel parametreler API Actions içine doğrudan {{metadata_order_id}}, {{metadata_customer_tier}} olarak eklenebilir. Ayrıntılar için AI Action Variables sayfasına bakın.

Örnek betik:

widget

<script>
  (function(e,a,d,i,c,t=a.createElement(d)){e[c]=e[c]||function(){(e[c].q=e[c].q||[]).push(arguments)},t.src=i,t.async=1,a.body.insertAdjacentElement("beforeend",t)})(window,document,"script","https://bubble.quickchat.ai/chat.js","_quickchat");
  _quickchat("custom_params", {"visitor_name": "Mike", "customer_tier": "VIP", "order_id": "ord_123"});
  _quickchat("init", "abcdefghij");
</script>

Embed

<div id="quickchat-embedded" style="height:600px;overflow:hidden;"></div>
<script>
  (function(e,a,d,i,c,t=a.createElement(d)){e[c]=e[c]||function(){(e[c].q=e[c].q||[]).push(arguments)},t.src=i,t.async=1,a.body.insertAdjacentElement("beforeend",t)})(window,document,"script","https://bubble.quickchat.ai/chat.js","_quickchat");
  _quickchat("containerId", "quickchat-embedded");
  _quickchat("custom_params", {"visitor_name": "Mike", "customer_tier": "VIP", "order_id": "ord_123"});
  _quickchat("init", "abcdefghij");
</script>

Embed

Embed, Quickchat AI Agent’ı yüzen balon yerine sayfanın içine bir sohbet penceresi olarak yerleştirir. Sohbetin yardım merkezi sütunu, iletişim sayfası veya uygulama içi kenar çubuğu gibi belirli bir yerde olmasını istediğinizde kullanın.

Embed ekleme

1. Embed kodunu alın

   • Quickchat AI App uygulamasına giriş yapın.
   • Sol kenar çubuğunda Channels → Your Website bölümüne gidin.
   • Install sekmesini açıp Install manually with code bölümünü genişletin.
   • Embed snippet kodunu kopyalayın. Hem <div id="quickchat-embedded"> kapsayıcısını hem yükleyici betiğini içerir.

2. Sitenizin HTML dosyasını veya site oluşturucudaki sayfayı açın.

3. Kodu yapıştırın

   • Embed kodunu sayfanın <body> bölümüne ekleyin.
   • Sohbet penceresinin görünmesini istediğiniz tam konuma yerleştirin. Boyutu <div> kontrol eder; style="height:600px" değerini düzeninizdeki alana göre değiştirin.
   • Site oluşturucuda istenen noktaya kod veya HTML öğesi ekleyip kodu içine yapıştırın.

Not

Embed, yalnızca oluşturucu kodu doğrudan sayfaya yerleştiriyorsa çalışır. Wix gibi bazı oluşturucular HTML öğelerini ayrı çerçevede gösterir; Embed çerçeve içinde yüklenemez. Yayınlanan sayfada sohbet görünmüyorsa Widget’ı site genelindeki kod ayarıyla ekleyin veya Chat Page bağlantınızı paylaşın.