Framer Sitenize Chatbot Nasıl Eklenir? 5 Dakikalık Adım Adım Rehber

Framer'a bir şey yapıştırmadan önce üç şeyi hazır bulundurun:

• Yayınlanmış bir Framer sitesi. Taslak bir projeye script gömebilirsiniz ama widget yalnızca canlı (yayınlanmış) URL'de çalışıyor. Henüz Publish'e basmadıysanız önce o.
• Bir Chatloom hesabı. Ücretsiz katman yeterli. chatloom.app adresine kaydolun, e-postanızı doğrulayın, "İlk agent'ınızı oluşturun" istemiyle boş bir panele düşeceksiniz.
• Üzerinde eğitilecek kısa bir metin. Ürününüz hakkında 200 kelime bile ilk test mesajında bot'tan gerçek bir yanıt almak için yeterli. Hero bölümünüzden ve Hakkımızda sayfanızdan çekin.

Ön koşul listesinin tamamı bu. Framer Pro planına, özel domaine, Zapier koltuğuna veya nöbetçi bir geliştiriciye ihtiyacınız yok.

Chatloom panelinde Create new agent butonuna tıklayın. Bir isim verin (şirket adınız yeterli), bir dil seçin (Chatloom onunda doğal olmak üzere 95+ dili destekliyor) ve bir kişilik ön tanımı seçin: Support, Sales veya Custom.

Framer pazarlama sitesi için Sales neredeyse her zaman doğru varsayılan. Lead nitelendirmek, demo rezervasyonlarına yönlendirmek ve fiyatlandırma sorularını iletişim formuna yönlendirmek yerine kendinden emin yanıtlamak için ayarlı.

Agent oluşturulunca builder'a düşüyorsunuz. Başka bir şeye dokunmayın — markayı widget yayına girdikten sonra yapılandıracağız. Şimdilik embed snippet'ini alın: Install → Custom embed. Her iki script etiketini panoya kopyalayın.

Framer'da projenizi açın ve üst çubuktaki dişli simgesine (Site Settings) tıklayın. General → Custom Code bölümüne kaydırın. Üç metin alanı göreceksiniz:

• Start of head — erken çalışması gereken doğrulama etiketleri, preload bağlantıları, analitik snippet'leri için.
• End of body — sayfa render edildikten sonra çalışması gereken script'ler için. Chatloom buraya gidiyor.
• End of head — CSS override'lar ve meta etiketler için.

Adım 1'deki iki script etiketini End of body alanına yapıştırın. Save. Ardından Publish (sağ üst). Widget, yayınlamanın tamamlanmasından sonraki on saniye içinde yayınlanan URL'nizde canlı olacak.

Yayınlanan sitenizi gizli pencerede açın. Sağ alt köşede Chatloom başlatıcısını görmelisiniz. Tıklayın; sohbet paneli açılır. Bir soru yazın. Tebrikler — Framer sitenizde artık bir yapay zeka chatbot'u var.

Widget var ama hâlâ ürününüz hakkında hiçbir şey bilmiyor. Çoğu rehberin atladığı adım bu.

Chatloom'a geri dönün ve Knowledge base → Add source bölümünü açın. Dört seçeneğiniz var:

• Crawl website — Framer domaininizi yapıştırın. Tarayıcı sitemap'ı dolaşır ve her sayfadan render edilmiş metni çeker. Çoğu Framer sitesi için doğru seçim ve iki dakikadan kısa sürer.
• Upload files — pitch deck PDF'inizi, tek sayfanızı veya fiyat listesini bırakın.
• Paste text — henüz sitenizde olmayan hızlı SSS'ler, fiyatlandırma detayları veya "ne olur eğer..." yanıtları için.
• Sitemap URL — Framer siteniz şifre korumalıysa veya bot'un bilmesini istediğiniz indekslenmemiş sayfalarınız varsa bunu kullanın.

Tipik bir Framer pazarlama sitesi için Crawl website + paste text kazanan kombinasyon. Tarama zaten sitede olan her şeyi kapsıyor; yapıştırma alanı kopyaya hiç girmemiş nüanslı yanıtlar için.

Eğitimi tetikleyin. Ücretsiz katmanda bu yaklaşık 60 saniye sürüyor. Bilgi tabanı sorgulanabilir olduğunda panel "Ready" durumu gösteriyor.

Bu, 2019'dan kalma destek balonuna benzeyen bir chatbot'tan Framer tasarımınızın doğal bir parçası gibi hissettiren birini ayıran adım. Builder'da Widget bölümünü açın.

Launcher mode ile başlayın. Buton güvenli varsayılan (sağ altta yüzen daire), ama açılış sayfaları için Fullscreen denemeye değer — tüm viewport kararır ve sohbet merkez sahneyi alır, ki bu kahraman CTA'ları için çok daha güçlü bir dönüşüm deseni.

Ardından Brand colors. Chatloom birincil, vurgu ve yüzey açığa çıkarıyor. Bunları Framer paletinizle eşleştirin. Sağ tarafta anında güncellenen canlı önizleme var.

Tipografi. Kullandığınız Framer yazı tipinin .woff2'sini yükleyin (veya Google Fonts seçiciden alın). Sohbet yüzeyi, öneri çipleri ve başlıklar yeni yazı tipiyle yeniden render oluyor. Retina ekranda widget ile yerel Framer bileşeni arasındaki farkı söyleyemezsiniz.

Köşe yuvarlaklığı. Framer çoğu bileşen için 12px varsayılanı. Bunu eşleştirmek widget'ı tasarımın içinde kayboltuyor.

Logo ve avatar. Transparan PNG yükleyin. Başlatıcı butonu PNG'ye saygı gösteriyor; AI avatarı her bot mesajının yanında görünüyor.

Kaydedin. Framer sitenizi gizli pencerede yeniden açın. Widget artık tasarımın yerel bir parçasından ayırt edilemez.

Bunu bitirmeden önce iki son dokunuş.

Widget'ı sınırlayın. Chatloom varsayılan olarak Framer sitenizin her sayfasında gösteriyor. Fiyatlandırma sayfasından kaldırmak istiyorsanız (kurumsal anlaşmalar için satış ekibini görünür tutmak istediğiniz yaygın bir durum), widget'ın Visibility rules'ını kullanın: /pricing, /contact veya istediğiniz desenle eşleşen URL'leri hariç tutun.

Selamlamaları ayarlayın. Builder'ın Messages bölümünde kısa bir karşılama satırı yazın ("Merhaba — Framer entegrasyonu, fiyatlandırma veya başlangıç hakkında sorularınızı yanıtlayabilirim. Ne üzerinde çalışıyorsunuz?") ve 3-5 önerilen prompt. Önerilen promptlar tüm widget'taki en yüksek kaldıraçlı dönüşüm enstrümanı; insanlar yazmaktan daha sık tıklıyor.

Test. Siteyi gizli pencerede açın, farklı giriş sayfalarından tam bir konuşma yapın ve özellikle dokümanlarınızda henüz olmadığını bildiğiniz soruları sorun. Bot'un "bilmiyorum"u nasıl ele aldığını izleyin — halüsinasyon üretirse eksik yanıtı bilgi tabanına ekleyip tekrar test edin. Önceden bu beş dakika, bir hafta kötü konuşmayı önlüyor.

Tüm akış bu. Çoğu Framer kurucusu bu diziyi 15 dakikadan kısa sürede bitiriyor ve embed script'ine bir daha dokunmuyor.