Fiyatlandırma sayfada yoksa ziyaretçiler sormazlar—hemen yüksek bir tahmin yapıp çıkabilirler. Bir sayıya ne kadar hızlı ulaşırlar ise, rakiplerinin iletişim formuna yönelme olasılığı o kadar düşer.
Fiyatlandırmanız değişkenlere bağlı olduğunda — metrekare, saatler, ekler, miktar — statik bir tablo bunu gösteremez ve bir “fiyat teklifi iste” formu çok yavaş olur. Web sitenizde bir fiyat hesaplayıcı için en güvenilir çözüm, gömülebilir bir widget’tır: görsel bir editörde alanlarınızı ve formülünüzü ayarlayın, ardından sayfaya tek bir kod parçacığı yapıştırın. Geliştiriciye gerek yok, elektronik tablo hilelerine gerek yok.
The Elfsight Calculator does exactly that: it’s a drag-and-drop website calculator builder with a real formula engine, an optional lead-capture form, and embed code that works on any website. This guide covers how to build a quick quote calculator, configure it to capture leads, and embed it — plus the alternatives, so you can pick the right fit for your use case.
- Bir fiyat hesaplayıcı kurmanın ve sitenize eklemenin en hızlı yolu.
- Bir tahmini, yakalanan lead’e nasıl dönüştürürsünüz
- Anlık fiyatlandırma mı yoksa teklif talepleri için hangi işlem türü uygun?
- Formül ve alan ayarları, adım adım
- Alternatifler ve her birinin nerede ayrıştığı
Hızlı Başlangıç: Web Siteniz İçin Fiyat Hesaplayıcı Oluşturun
Her birinin ayrıntılarına girmeden önce tüm süreç dört adımda şu şekildedir:
- Hesaplayıcı Düzenleyicisini açın ve bir şablon seçin.
- Girdi alanlarınızı ve formülü kurun.
- Tıkla “Web sitene ücretsiz ekle” ile gömme kodunu üret.
- Kodu sitenizin arka ucuna yapıştırıp yayımlayın.
Aşağıdaki etkileşimli düzenleyicide fiyat hesaplayıcınızı oluşturun ↓
Bir Web Sitesine Teklif Hesaplayıcı Eklemenin Popüler Yolları
Küçük işletmeler için çalışan bir fiyat hesaplayıcısını sayfaya eklemenin birden çok yolu vardır; bu seçenekler çaba, esneklik ve ziyaretçi sayı gördükten sonra ne olacağı konusunda farklı tavizler sunar.
| Yöntem | Gerekli Beceri | Özelleştirme | Potansiyel müşteri yakalama | Maliyet |
|---|---|---|---|---|
| Hesaplama Widget’ı (Elfsight) | Kod yok | Yüksek | Yerleşik form | Ücretsiz plan / Ücretli |
| El ile kodlanmış JavaScript | Geliştirici | Sınırsız | Bunu siz kurarsınız | Geliştirme Süresi |
| Google Sheets Tablo Gömme | Temel | Düşük | Yok | Ücretsiz |
| Genel form eklentisi ve matematik desteği | Temel–Orta | Orta | Yalnızca form | Ücretsiz / Ücretli |
Buradaki denge kontrol ile çaba arasındadır. El ile kodlanmış JavaScript tam esneklik sunar, ancak sürekli geliştirme ve bakım gerekir; oysa Google Sheets gömme hızlı ve ücretsizdir, fakat sınırlı ve cilasızdır. Widget’lar ve form eklentileri ortada durur — özel koda göre daha az esnek, ancak yönetimi çok daha kolay.
Hesaplayıcınızı kurun: Tahmin yapın ve Potansiyel Müşterileri Yakalayın
Yapmaya başlamadan önce, bir ziyaretçi fiyatını gördüğünde ne olması gerektiğine karar verin. Bir web sitesi hesaplayıcısı üç iş ayrı ayrı yapabilir: bir fiyatlandırma sorusuna yanıt vermek, takip için lead bilgilerini yakalamak ve ödeme sayfasına ya da rezervasyon sayfasına yönlendirmek. Hiçbiri daha iyi değildir – amacınız şeffaflık, lead yakalama veya dönüşümse hangi hedefe odaklandığınız önemlidir.
Hiçbir İşlem, Lead Formu veya Yönlendirme: Hedefinize Hangi Yol Uygun?
Her eylem türü ziyaretçinin yolculuğunu farklı biçimde sonlandırır, bu yüzden onları gerçekten bir sonraki adımda ne yapmalarını istediğinize göre eşleyin. Üç türün karşılaştırması aşağıda ve her biriyle gelen önemli notlar da burada:
| İşlem Türü | Sonuçtan sonra ne olur | Kullanım Zamanı | Bedel Dengesi |
|---|---|---|---|
| Hiçbir İşlem | Ziyaretçi sadece fiyatı görür ve başka hiçbir şey görmez | Şeffaf kendi kendine hizmet fiyatlandırması ve daha az “ne kadar?” e-postası mı istiyorsunuz? | İletişim bilgileri hiç yok — size ulaşmamış olanları takip etmenin yolu yok. |
| Potansiyel Müşteri Formu | Kullanıcı bilgilerini toplamak için bir açılır form görünür | Lead elde etmek istiyorsunuz ve sadece bir sayı yeterli değil — kapatma için takip edersiniz | Sürtünme yaratır; yalnızca kaba bir rakam isteyen bazı ziyaretçiler doldurmazlar |
| Yönlendirme | CTA düğmesi onları başka bir sayfaya yönlendirir | Bir sonraki adım sabit — Ödeme, Çevrimiçi Randevu, Ürün Sayfası | Ziyaretçileri başka bir sayfaya yönlendirir; onları bir sonraki adıma teslim edersiniz, önce yakalamak yok |
Özellikle bir teklif hesaplayıcısı için genelde istediğiniz Potansiyel Müşteri Formudur. Ziyaretçi tahminini alır; ardından açılır bir katmanda bir form görünür ve iletişim bilgilerini toplar, böylece ziyaretçi en çok ilgilendiği anda lead’i yakalarsınız ve tahmini sayısı elinde olur.
chatbot for lead generation: meet the visitor where their intent peaks.”>Lead generation için bir chatbot kullanmanın aynısı burada da geçerli: Ziyaretçinin niyetinin zirveye ulaştığı noktada onları karşılayın.
300’den Fazla Hesaplama Şablonunu Keşfedin
Adım Adım: Fiyat Hesaplayıcınızı Oluşturun ve Gömün
İşlem türü belirlendiğinde geri kalan adımlar, düzenleyicinin dört sekmesi — Oluştur, Eylem, Stil, Ayarlar — üzerinden hesaplayıcıyı bir araya getirip ardından gömmektir. Hadi başlayalım.
Adım 1: Bir şablon seçin veya Yapay Zeka ile bir tane oluşturun
Yeni bir Hesaplayıcı widget’ı oluşturduğunuzda önce bir şablon ekranı açılır. 100’den fazla şablon kullanıma göre gruplanmıştır. Fiyatlandırma yapısı için, Cost Calculators kategorisinde hazır başlangıç noktaları bulacaksınız. Kullanım durumunuza en yakın olanını seçin — daha sonra özelleştirebileceksiniz.
Hiçbir şey tam olarak uymazsa, AI Calculator Generator daha hızlı bir yol sunar. Fiyatlandırmanızı sade bir dille tarif edin; alanları, etiketleri ve formülleri sizin için otomatik olarak oluşturacaktır. Çıktıyı doğrulamak için bir taslak olarak kullanın; ama her şeyi elle kurmaktan sizi kurtarır.
Özel bir hesaplayıcı için örnek talep:
Bir web tasarım ajansı için etkileşimli bir web sitesi fiyat teklifi hesaplayıcısı oluşturun. Hesaplayıcı, kullanıcı seçimlerine dayanarak proje fiyatını tahmin etmeli ve toplam fiyatı gerçek zamanlı olarak güncellemeli. İş dünyası web sitesi için gömülebilir temiz, modern bir tasarım kullanın.
Bu alanları ve fiyatlandırma kurallarını ekleyin:
1. ...
2. ...
3. ...Adım 2: Girdi alanlarınızı ekleyin
Yapılandırmaya Alanlar ile başlayın — bunlar ziyaretçinin etkileşime geçtiği ve fiyatınızın bağlı olduğu değişkenlerdir. Oluştur sekmesinde, +Alan Ekle üzerine tıklayın ve bir tür seçin. Fiyatlandırma çalışması için çoğunlukla şunlara başvurursunuz:
- Adet (veya saatler)
- Kaydırıcı (bir aralık, örneğin metrekare gibi)
- Açılır menü (kademeler veya hizmet seviyeleri),
- Seçenek (eklentiler radyo düğmeleri veya onay kutuları olarak)
Fiyatlandırma modelinizi eklemeden önce alanlara eşleyin: nihai fiyatı değiştiren her sayı için kendi alanı gerekir. Sık yapılan erken bir hata, birkaç değişkeni tek bir açılır menüye sıkıştırmaktır — formülün her birine net atıfta bulunabilmesi için onları ayrı tutun.
Her alan (Başlık hariç) ayrıca koşullu mantık desteğine sahiptir. Uzun bir hesaplayıcıyı etiketli bölümlere bölmek için Başlık alanını kullanın — dekoratif olup değeri yoktur, bu nedenle matematiği etkilemez.
Adım 3: Fiyat üreten formülü oluşturun
Bu, web siteniz için etkileşimli hesaplayıcının özüdür ve en uzun süren adımdır — burada zaman bütçenizi iyi ayarlayın.
Tıklayın +Hesaplama Ekle ve editörde alanları, operatörleri, fonksiyonları ve girilen sayıları bir araya getirerek formülü oluşturun. Widget, SUM, ROUND, MAX, MIN, IF/THEN koşulları ve mantıksal operatörleri destekler.
Formülün altında, sonucun nasıl davranacağını belirleyen birkaç kontrol bulunur. Bu hesaplamayı göstermek veya gizlemek için Sonuçlarda Göster öğesini açıp kapatın; bunu Ana veya İkincil Sonuç olarak işaretleyin (birincil, başlık sayısıdır; ikincil ise destekleyici detayıdır). Alanlar gibi, her hesaplamanın kendi koşullu mantığı vardır; belirli girdiler karşılandığında sonucu gösterebilirsiniz.
Ayrıca formül düzenleyicisinde, sade dildeki açıklamadan formül üreten bir Yapay Zeka ile Oluştur düğmesi de vardır; ancak önce tüm alanlarınızın mevcut olması gerekir.
Adım 4: Başlığı ve sonuçlar bölümünü biçimlendirin
Hesaplamalar altında, hesaplayıcının başlığını ve nihai tahmininizi yapılandırabilirsiniz. Önce Başlık — bu, hesaplayıcının Başlığı (ör. “Get Your Cleaning Estimate”) ve tek satırda beklentileri ayarlamak için isteğe bağlı bir Açıklama içerir.line.
Bu, teklifle ilgili belge özelliklerinin bulunduğu yerdir. Yazdır Düğmesini Göster ve İndir Düğmesini Göster — Yazdır, tarayıcının yazdırma iletişim kutusunu açar, ve İndir ise ziyaretçinin girdilerini ve sonuçlarını içeren bir PDF oluşturur.
Üstbilgi bölümüne logonuzu ve şirket bilgilerinizi ekleyin; çıktı, gerçek bir markalı teklif gibi görünür, yalnızca basit bir çıktı gibi değil:
Bu olduğundan çok daha önemli: indirilebilir bir tahmin, ziyaretçinin bunu karar vericiye iletmesini sağlar ve erişiminiz sessizce genişler.
Adım 5: Eylemi Yapılandırın — potansiyel müşteriyi yakalayın
İşte önceki kararın, ayar haline dönüştüğü nokta. İşlem Sekmesi üç yönlü bir geçişle açılır — Yönlendirme, Potansiyel Müşteri Formu ve Hiçbir Eylem — ve bir teklif hesaplayıcı için çoğu durumda Potansiyel Müşteri Formu en doğru seçimdir.
With Lead Form seçili olduğunda, Açık Form Düğmesi Metnini ve form alanlarını belirlersiniz. Varsayılanlar tamamen düzenlenebilir: ekleyin, kaldırın veya yeniden sıralayın; kısa tutun ki her ek zorunlu alan tamamlamayı etkiler. On üç alan türü mevcut; Tarih, Dosya Yükleme ve Gizli (izleme için kullanışlı) dahil.
Alanların altında, potansiyel müşteri akışının gerçek işini yapan beş yapılandırma bölümü bulunur:
- Gönder Butonu — Gönderim Sonrası İşlem: bir başarı mesajı göster (özel başlık, metin, isteğe bağlı buton), bir URL’ye yönlendir veya hiçbir işlem yapma.
- E-posta Bildirimleri — Beni Bildir size her gönderimde uyarır; Yanıtlayanları Bildir ziyaretçiye otomatik yanıt gönderir, logo ve imza desteğiyle.
- Entegrasyonlar — gönderimleri Google Sheets, Zapier, Make.com, Mailchimp veya Webhook’lara iletin.
- Ödeme — Gönderimde ödeme yapılmasını zorunlu kılacak şekilde Stripe’i bağlayın; bu yalnızca Potansiyel Müşteri Formu akışı içinde çalışır ve bağlı bir hesap gerekir, bu nedenle bu adım gönderimde ödeme yapar, bağımsız bir ödeme sayfası değildir.
- Spam Koruması — görünmez bir reCAPTCHA geçişi; etkinleştirmek widget altbilgesine Google’ın gerekli yasal metnini ekler (çevirilebilir, ancak kaldırılamaz).
Adım 6: Hesaplayıcınızı stilize edin
Stil sekmesinde, yukarıdaki karuseldeki görsel önayarlardan birinden başlayın — ince ayarlamadan önce uyumlu bir görünüm elde etmenin hızlı yolu. Altı kontrol gerisini yönetir – bunları markanıza uyarlayın; hesaplayıcı, sitenizin bir parçası olarak görünmeli, bağımsız bir ek olarak değil.
- Yazı Tipi — açılır menüden seçin veya Varsayılan’da kalın. Web sitenizin ana metin ailesiyle aynı yazı tipini kullanın ki hesaplayıcı gömülü bir iframe gibi hissettirmesin.
- Arka Plan — Tüm hesaplayıcı paneli için bir renk ya da arka plan resmi belirleyin. Bölümünüzün arka planıyla uyumlu sade bir renk, yoğun bir görselin dikkat çekmesini engeller; giriş alanlarıyla rekabet edebilir.
- Metin Rengi — etiketler ve alan metni için küresel metin rengi. Kontrast için arka planınızla karşılaştırın, özellikle koyu bir panel kullandıysanız.
- Ara Alan Vurgu Rengi — kaydırıcı izleri ve odak durumları gibi etkileşimli öğelerin rengi. Bu renk, “bu tıklanabilir” sinyalini verir; markanızın aksiyon rengi olarak belirleyin, donuk tonlar yerine.
- Sonuç Arka Plan Rengi — hesaplanan fiyatın arkasındaki panel. Sonuç, girişlerden görsel olarak ayrışması için ana arka plandan hafif kontrast verin; insanların fark etmesini istediğiniz sayı budur.
- İşlem Düğmesi Rengi — CTA, Gönder ve Yönlendirme düğmesi rengi. Hesaplayıcının çağrısının tanıdık gelmesi için sitenizdeki ana düğmelerle uyumlu tutun ki hesaplayıcının çağrısı tanıdık gelsin.
Adım 7: Hesaplayıcı ayarlarını yapılandırın
Ayarlar altında, binlik ve ondalık ayırıcılarınızı (ABD dışı fiyatlandırma formatları için önemli), hesaplayıcının genişliğini ve görüntüleme dilini ayarlayın. Kontrollerin kapsamadığı durumlar için Özelleştirilmiş CSS ve JS alanları bulunuyor — ancak Özelleştirilmiş JS yalnızca canlı sitenizde çalışır, düzenleyicide değil.
Daha gelişmiş entegrasyonlar için API üzerinden Hesaplayıcı ile çalışmanın da bir yolu vardır.
Adım 8: Hesaplayıcıyı web sitenize gömün
Tıkla siteye ücretsiz ekle, oluşturulan gömme kodunu kopyala ve sayfanızdaki Özel HTML bloğuna yapıştır.
Özelleştirilmiş HTML kabul eden herhangi bir platformda çalışır; WordPress, Shopify, Wix, Squarespace ve Webflow dahil. Platforma bağlı olarak kurulum biraz değişir, bu yüzden CMS’e özgü adımları takip edin. Editörden sonraki değişiklikler otomatik olarak yayına alınır — kodu tekrar yapıştırmanıza gerek yok.
Sorun Giderme: Hızlı Kontrol
- Formül doğrulanmıyor: Açılır listeden bir alan adını seçmek yerine yazdınız. Alanı alanlar listesinden yeniden ekleyin.
- Özel JS hiçbir şey yapmaz:
- Yazdırma çıktısı bozuk görünüyor: Sonuçlar Bölümü ve Belge Başlığı ayarlarını kontrol edin – baskı davranışı orada yapılandırılır.
- Widget boyutları hatalı görünüyor: Ayarlar’daki Hesaplayıcı Genişliği ile platformunuzdaki konteyner genişliğini ayarlayın.
Web Sitenize Hesap Makinesini Gömmenin Diğer Yöntemleri
Bir widget uygun değilse, insanların çoğunlukla hangi yollara yöneldiğini ve her birinin açıkça belirttiği tavizleri aşağıda bulabilirsiniz.
Hand-coded JavaScript calculator
Bu yaklaşım, widget’in sağlayabileceğinden daha fazlasına ihtiyaç duyduğunuz durumlarda anlamlıdır; API entegrasyonları, özel mantık veya tamamen özel bir arayüz gibi. Sıfırdan inşa etmek size tam esneklik ve sürekli ücretler olmaması avantajı sunar, ancak tüm geliştirme, bakım ve güncellemelerle kendiniz ilgilenmeniz gerekir.
- Giriş alanlarınız için HTML formunu yazın.
- Bir JavaScript fonksiyonu yazın, girdileri okuyup sonucu hesaplasın.
- Web sitenize uyumlu CSS ile stil verin.
- Sayfanıza ekleyin ve doğrulama ile uç durumları kendiniz yönetin.
Gömülü Google Sheets Hesaplayıcı
Fiyatlandırma mantığınız hâlâ bir hesap tablosunda yer alıyorsa, bunu web’de yayımlamak çevrimiçi olarak erişilebilir kılmanın hızlı ve ücretsiz bir yoludur. Geçici bir çözüm olarak iyi çalışır; ziyaretçiler ham hesap tablosu hücreleriyle etkileşir ve lead yakalamak için yerleşik bir yol yoktur.
- Formül Mantığını Google Sheets’te oluşturun.
- Çalışma sayfasını veya ilgili aralığı web’e yayınlayın.
- Oluşturulan iframe ile sayfanıza gömün.
Hesaplama Eklentili Form
Zaten Gravity Forms veya WPForms gibi bir form eklentisi kullanıyorsanız, hesaplama özellikleri basit fiyat hesaplayıcılarını yönetebilir ve her şeyi tek bir araçta tutabilir. Ancak bu platformlar öncelikle formlar için tasarlanmış olduğundan, daha gelişmiş hesaplama mantığı hızla kullanışsız hale gelebilir.
- Aritmetik alanları destekleyen bir form eklentisi yükleyin.
- Sayı alanları ve bir hesaplama alanı ekleyin.
- Eklentinin arayüzü üzerinden formülü yapılandırın.
Teklif Hesaplayıcınız İçin Optimizasyon İpuçları
Kurulum tamamlandı. Buradan nasıl daha fazlasını elde edeceğinizi gösteriyoruz — kullanıcılar tarafından terk edilen hesaplayıcılardan dönüşüm sağlayanlara ayıran ipuçları burada.
- Kolay Cevap Alanlarını Öne Alın. En kolay girdileri önce koyun (adet, bir açılır menü) ki ziyaretçiler düşünmesi gereken bir şeye geçmeden önce ivme kazansın. İlk zorlu alanda terk edilme oranı en yüksek olur.
- İletişim bilgilerini sormadan önce bir sonuç gösterin. Potansiyel Müşteri Formu ile tahmin önce, ardından açılır pencere. Bu sıralamayı koruyun — sayıyı formun arkasına koymak tamamlanmaları engeller.
- Sadece dahili hesaplamaları gizle. Sonuçlarda Göster anahtarını kullanarak marjin veya maliyet tabanlı hesaplamaları ziyaretçinin görüşünden saklarken, bunları nihai formülde kullanmaya devam edin.
- Koşullu mantıkla kısa tutun. İlgili olduğunda gelişmiş alanları yalnızca gösterin (ör. “oda sayısı”nı yalnızca “hizmet türü = temizleme” olduğunda gösterin), böylece hesaplayıcı baştan göz korkutucu görünmez.
- Pazaryeriniz için ayırıcıları ayarlayın. Ayarlarda binlik ve ondalık ayırıcılarını hedef kitlenize göre eşleşin — Avrupa ziyaretçisi “1.000” olarak beklediği formatla ABD’li biri farklı biçim bekler.
- Tahminle otomatik yanıt ver. Yanıtlayanları Bildir özelliğini açın ki göndericiler numaralarını markanızla birlikte hemen e-posta olarak alır; gerçek bir takip için aklınızda kalmanıza yardımcı olur.
SSS (Sık Sorulan Sorular)
Kod yazmadan web siteme bir fiyat hesaplayıcı nasıl eklerim?
Bir teklif hesaplayıcısı sonuçları göstermeden önce potansiyel müşterileri toplayabilir mi?
Hesaplayıcı widget’ı mobilde çalışır mı?
Hesaplayıcıyla ödeme alabilir miyim?
Formül neden doğru hesaplanmıyor?
Sonuç
Bir fiyat hesaplayıcısı, belirsiz “Bu ne kadar tutar?” sorusunu ziyaretçinin kendisinin ulaştığı bir sayıya çevirir — ve böyle kurarsanız, tahminleriyle birlikte bir lead elde edersiniz. Önceden seçtiğiniz eylem türü (anında sonuç, Potansiyel Müşteri Formu veya yönlendirme) çoğu işi, hesaplayıcının ziyaretçilere bilgi verip dönüştürüp dönüştürmeye karar vermesine olanak tanır.
Calculator widget and start with a template that matches your pricing model. Set the action to Lead Form, get one formula working end-to-end, and embed it on a single page first — you can refine the rest once you see real submissions coming in.”>İnşa etmek için hazırsanız, Calculator widgetı açın ve fiyatlandırma modelinizle eşleşen bir şablonla başlayın. Eylemi Lead Form olarak ayarlayın, uçtan uca çalışan bir formülü elde edin ve önce tek bir sayfaya gömün — gerçek başvuruları gördükçe geri kalanını özelleştirebilirsiniz.
