Web Sitesi Widget'ı, Ajan Bağlantısı ve Telefon Uygulaması
Ajanı web sitesine tek satır kodla nasıl ekleyeceğiniz, sosyal medya ve mesajlaşma uygulamaları için kısa bağlantının nasıl çalıştığı ve müşterilerin ajanınızı telefonlarına uygulama olarak nasıl yükleyeceği.
Agentin iki yüzü var. Web sitesinde, bir düğmeyle açılan köşedeki bir penceredir. Sosyal medyada ve mesajlaşma uygulamalarında ise, küçük bir mağaza gibi çalışan ve telefona uygulama olarak yüklenebilen kısa bir bağlantı sayfasıdır. Ancak katalog, koşullar, diyaloglar ve talepler ortaktır: agent tektir.
Aşağıda açıklanan her şey “Widget ve Bağlantı” bölümünde yer alır.
Agent Bağlantısı#
Şu biçimde kısa bir adres: comag.vibevox.pro/c/your-shop. Instagram, TikTok veya Telegram profil başlığına eklenir, WhatsApp'ta gönderilir, YouTube'daki bir videonun açıklamasına konulur.
Mesajlaşma uygulamasına gönderildiğinde, bağlantı bir karta dönüşür: kapak, mağaza adı ve açıklama. Bu üç alanın tümü özelleştirilebilir:
- Önizleme Başlığı — varsayılan olarak mağaza adıdır.
- Önizleme Açıklaması — ne sorulabileceğine dair kısa bir ifade.
- Kapak — vurgu renginizden, logonuzdan ve ürün fotoğraflarınızdan otomatik olarak oluşturulur. Kendi kapak görselinizi yükleyebilirsiniz, boyutu 1200'e 630 pikseldir.
Önizlemenin nasıl göründüğünü kontrol etmenin en kolay yolu, bağlantıyı kendinize Telegram'dan göndermektir.
Web Sitesi Kodu#
Tüm sayfalarda kapanış </body> etiketinden önce eklenen tek bir satır. Panelde bir düğme ile kopyalanır.
Popüler platformlarda tam olarak nereye ekleneceği:
| Platform | Nereye Eklenecek |
|---|---|
| Tilda | “Site Ayarları” → “Daha Fazla” → “Body için HTML Kodu” |
| Shopify | “Tema” → “Kodu Düzenle” → theme.liquid, </body> öncesine |
| WordPress | “Görünüm” → “Tema Düzenleyici” → footer.php, veya kod ekleme eklentisi |
| Wix | “Ayarlar” → “Özel Kod” → Body sonuna ekle |
| Kendi siteniz | Doğrudan şablona </body> öncesine |
Eklendikten sonra sağ alt köşede bir düğme belirecektir. Konumu ayarlardan sola değiştirilebilir, renk ve tema da aynı yerdedir.
Widget eşzamansız olarak yüklenir ve sayfayı yavaşlatmaz. Eğer katı bir CSP yapılandırmanız varsa, comag.vibevox.pro alan adını script-src ve connect-src içinde izin verilenler listesine ekleyin.
Tasarım#
Müşterinin gördüğü ayarlar:
- Mağaza adı ve asistanın adı. İkincisi, sohbet başlığındaki konuşmacının imzasıdır.
- Karşılama. İlk ifade. İyi bir karşılama, sadece selamlamak yerine fayda vaat eder.
- Diyaloğun başında ipuçları. Dört adede kadar soru düğmesi. Boş bırakılırsa — katalogdan otomatik olarak oluşturulur.
- İletişim tonu. Listeden veya kendi belirlediğiniz: “sıcak ve kısa”, “uzman, resmi”.
- Vurgu rengi. Tek bir renk düğmeyi, bağlantıları ve kartların vurgusunu belirler.
- Logo. Aynı zamanda telefondaki uygulama simgesi olacaktır.
- Mikrofon düğmesi. Tarayıcıda konuşma tanıma. Tarayıcı bunu yapamıyorsa, müşteri bir sesli mesaj kaydeder ve Gemini tarafından deşifre edilir.
Sağda canlı bir önizleme var: siz yazarken değişir. “Kaydet” düğmesi değişiklikleri web sitesine aktarır.
Açık ve Koyu Tema#
Sohbetin iki tasarımı vardır ve bunlar tek bir ayar alanında değiştirilir — “Tema”.
| Değer | Müşteri Ne Görür |
|---|---|
| “Ziyaretçinin Ayarları Gibi” | Tema, telefonunun veya bilgisayarının ayarlarına uyum sağlar: gece koyu, gündüz açık |
| “Açık” | Cihazdan bağımsız olarak her zaman açık pencere |
| “Koyu” | Her zaman koyu pencere |
Varsayılan olarak “Ziyaretçinin Ayarları Gibi” seçeneği belirlidir ve çoğu durumda bu doğru seçimdir: telefonunda koyu tema kullanan bir kişi yüzüne beyaz bir flaş almaz, açık temaya alışkın olan ise tanıdık bir pencere görür.
Sabit bir tema, web sitesinin kendisi tek bir tarzda yapıldığında gereklidir. Köşede açık renkli bir sohbet penceresi olan koyu renkli bir açılış sayfası yama gibi görünür ve bunun tersi de geçerlidir. Bu durumda, web sitesiyle aynı temayı ayarlayın ve widget tasarımla bütünleşecektir.
Vurgu rengi her iki temanın üzerinde de çalışır: düğmeler, bağlantılar ve kart vurguları markanızın rengini alır, arka plan ve metin ise temayla birlikte değişir. Her iki seçeneği de sağdaki önizlemede kontrol etmek en kolay yoldur — değeri değiştirirken anında yeniden çizilir.
Ürün Kartları Web Sitenize Yönlendirir#
Agent, düz metin yerine kartlarla yanıt verir: fotoğraf, ad, fiyat, düğme. Düğmenin arkasında her zaman bir adres bulunur — web sitenizdeki ürün sayfası veya kart oradan toplandıysa sosyal medyadaki orijinal gönderi.
Web sitesindeki widget içinde, yeni sekmeler oluşturmamak için geçiş aynı pencerede gerçekleşir. Bağlantıdaki agent sayfasında ise, diyaloğun kaybolmaması için kart yeni bir sekmede açılır.
Shopify ve WooCommerce üzerindeki mağazalar için hoş bir detay var: düğme sadece ürünü açmakla kalmaz, aynı zamanda platformun standart mekanizmasıyla mağazanın sepetine ekler. Detaylar Shopify ve WordPress hakkındaki makalelerde.
Ve dahası: widget, açıldığı sayfadaki ürün işaretlemesini okur ve agenta iletir. Bu nedenle, bir ürün kartındaki “mavisi var mı?” sorusu, ne hakkında olduğu belirtilmeksizin bağlam içinde anlaşılır.
Müşterinin Telefonundaki Uygulama#
Agent sayfası uygulama olarak yüklenebilir. Müşteri bağlantıyı telefonundan açar, ana ekrana ekleme teklifini görür ve logonuzla birlikte bir simge alır.
- Simge altındaki ad — 12 karaktere kadar tek bir kelime. Boş bırakılırsa — mağaza adının ilk kelimesini kullanırız.
- Simge — yüklenen logo. Logo yoksa, Commerce Agents logosu kullanılır.
- iPhone'da kurulum “Paylaş” → “Ana Ekrana Ekle” üzerinden yapılır, bu Safari'nin bir kısıtlamasıdır ve agent adımları kendisi yönlendirir.
Kurulumdan sonra müşteriye “Diyaloglar” bölümünden push bildirimleri gönderilebilir. Müşteri, sohbet başlığındaki zil simgesine basarak bu bildirimlere kendisi izin verir.
Müşteriden Gelen Ekler#
Sohbette bir ataç simgesi bulunur: 20 megabayta kadar fotoğraf, video veya ses. Tarayıcıda konuşma tanıma yoksa, mikrofonu basılı tutmak sesli mesaj kaydeder.
Dosyayı Gemini analiz eder: ne gösterildiği, görüntüdeki metin, yüksek sesle ne söylendiği. Agent bu analize göre yanıt verir ve siz diyalogda hem dosyanın kendisini hem de kısa bir açıklamasını görürsünüz. Bu, açıklamak yerine göstermenin daha kolay olduğu nişlerde faydalıdır: yedek parçalar, tamir, fotoğrafla seçim.
Sepetli Web Sitesi İçin Satın Alma Pikseli#
Ödeme sohbet içinde değil, web sitenizde gerçekleşiyorsa, “Siparişiniz İçin Teşekkürler” sayfasına panelden kısa bir kod parçası ekleyin, sipariş numarasını ve tutarı girerek. Satın alma işlemi diyaloğa bağlanacak ve istatistiklerde hangi yazışmaların satışla sonuçlandığı görülebilecektir.
Kontrol#
Kurulumdan sonra harcamaya değer üç dakika:
- Siteyi gizli modda açın ve widget düğmesine tıklayın. Ürün hakkında bir soru sorun.
- Telefondan ajanın bağlantısını açın. Kurulumun önerildiğini kontrol edin.
- Bağlantıyı kendinize bir mesajlaşma uygulaması üzerinden gönderin ve önizlemeyi kontrol edin.
- “Diyaloglar” bölümüne bakın: her iki yazışma da orada görünmelidir.
Sıkça Sorulan Sorular#
Web sitesindeki widget ve bağlantı farklı ajanlar mı?#
Aynı ajan. Katalog, koşullar, diyaloglar ve talepler ortaktır. Yalnızca görünüm farklıdır: web sitesinde pencere köşede, bağlantı ise telefona yüklenebilen tam ekran bir sayfadır.
Bağlantı adresi değiştirilebilir mi?#
Adres, vitrin oluşturulurken mağaza adından türetilir. Başka bir adres gerekiyorsa, bize Telegram üzerinden yazın; mevcut bağlantıları bozmamak için manuel olarak değiştirelim.
Widget siteyi yavaşlatır mı?#
Hayır. Komut dosyası hafiftir ve sayfanın ana içeriğinden sonra eşzamansız olarak yüklenir. Sohbet penceresi ise yalnızca müşteri düğmeye tıkladığında yüklenir.
Ajan kapalıysa müşteri ne görür?#
Hiçbir şey: düğme görünmez ve bağlantıdaki sayfa ajanın kullanılamadığını gösterir. Açma/kapama düğmesi “Widget ve Bağlantı” bölümündedir.
“Commerce Agents tarafından desteklenmektedir” yazısı nasıl kaldırılır?#
Şimdilik mümkün değil: imza tüm tarifelerde kalır. Tıklanabilir ve web sitemize yönlendirir; bu, hizmetin belirgin şekilde daha yüksek bir miktar yerine 29 €'ya mal olmasını sağlayan fiyatın bir parçasıdır.