- Gömme kodu seçtiğin hesaplama aracını kendi sayfanın içinde çalıştırır; ziyaretçi sonucu sayfandan ayrılmadan görür.
- Kod bir div ve embed.js betiğinden oluşur; betik aracı çerçeveye yerleştirir ve çerçeve yüksekliğini içeriğe göre kendisi ayarlar.
- Betiğin çalışmadığı ya da silindiği ortamlarda (Wix, bazı WordPress eklentileri) "Yalnız iframe" kodunu kullan.
- Araçlar ücretsizdir; altındaki "hesapo.com" atıf satırını kaldırmaman gerekir, oranlar değişince araç senin sayfanda da güncellenir.
Sitene hesaplama aracı eklemek ne işe yarar?
Bir emlak blogunda konut kredisi anlatılıyorsa okurun aklına gelen ilk soru "Bu tutarı çeksem aylık ne öderim?" olur. Bir muhasebe bürosunun sayfasında KDV oranları yazıyorsa ziyaretçi elindeki faturanın KDV'sini hemen bulmak ister. Bu soruların cevabını okuru başka bir siteye göndermeden, yazının hemen altında verebilirsen okur sayfanda kalır. İçeriğin de okunup geçilen bir yazı olmaktan çıkar, kullanılan bir sayfaya dönüşür.
Bu sayfadaki gömme kodu tam olarak bunu yapar. Seçtiğin hesaplama aracı senin sayfanın içinde çalışır. Ziyaretçi değerleri yazar, sonucu anında görür; ödeme planı, vergi dökümü veya adım adım hesap gibi ayrıntılar da aracın kendisinde yer alır. Formülü yazmak, oranları her yıl güncellemek ya da mobilde düzgün görünmesi için uğraşmak sana düşmez.
Nasıl çalışır?
Kod iki parçadan oluşur. İlki, aracın görüneceği yeri işaretleyen küçük bir div etiketi ve onun içindeki "hesapo.com tarafından sağlanmıştır" satırı. İkincisi embed.js adlı küçük bir betik. Betik sayfandaki işaretli alanları bulur, her birine aracın gömme sürümünü bir çerçeve (iframe) olarak yerleştirir ve çerçevenin yüksekliğini aracın içeriğine göre ayarlar. Ziyaretçi bir seçenek açtığında ya da ödeme planı uzadığında çerçeve de büyür, sayfanda iç içe kaydırma çubuğu oluşmaz.
Araç, sayfanın görünen alanına yaklaşmadan yüklenmez. Yazının en altına koyduğun bir araç, okur oraya inene kadar hiçbir şey indirmez; sayfanın açılış hızı etkilenmez. Betik başka bir kütüphaneye ihtiyaç duymaz ve birkaç kilobayttır. Aynı sayfaya birden çok araç koyabilirsin, betik satırını bir kez eklemen yeter.
Çerçeve içindeki sayfa senin sitenden tamamen ayrıdır. Sitenin stilleri aracı bozmaz, aracın kodu da sitenin hiçbir öğesine dokunamaz. Kodda kullanılan güvenlik ayarları (sandbox), gömülen aracın sayfanı başka bir adrese yönlendirmesini de engeller.
Adım adım kullanım
- Yukarıdaki listeden aracı seç. Kategori düğmeleriyle listeyi daraltabilir ya da arama kutusuna "kredi", "KDV", "yaş" gibi bir kelime yazabilirsin.
- Görünümü ayarla: tema, vurgu rengi, köşe yuvarlaklığı, başlığın görünüp görünmeyeceği ve kompakt görünüm. Canlı önizleme her değişikliği hemen gösterir.
- İstersen başlangıç değerlerini gir. Örneğin bir oto galeri sitesi taşıt kredisi aracını sık satılan bir araç fiyatıyla açabilir.
- "Kodu kopyala" düğmesine bas ve kodu sayfanda aracın görünmesini istediğin yere yapıştır.
Görünüm seçenekleri
Tema ayarında "Otomatik" seçildiğinde araç, ziyaretçinin cihazındaki açık veya koyu tema tercihini izler. Siten yalnız açık ya da yalnız koyu renkteyse sabit temayı seçmek daha tutarlı bir görüntü verir.
Vurgu rengi düğmeleri, seçili sekmeleri ve bağlantıları boyar. Hazır renklerden birini seçebilir ya da kendi marka renginin HEX kodunu yazabilirsin. Seçtiğin renk açık veya koyu zeminde zor okunacaksa oluşturucu seni uyarır. Düğme üzerindeki yazının rengi, vurgu renginin açıklığına göre beyaz ya da koyu olarak kendiliğinden seçilir.
Köşeler için keskin, normal ve yuvarlak seçenekleri var; bunlar aracı sitenin kart ve düğme diline yaklaştırır.
Başlık: araç adını kendi yazında zaten bir başlıkla verdiysen aracın kendi başlığını gizleyebilirsin.
Kompakt görünüm yan sütun, dar içerik alanı veya mobil ağırlıklı sayfalar için boşlukları ve yazı boyutunu küçültür.
Şeffaf zemin aracın arka planını kaldırır, sayfanın zemini görünür. En iyi sonuç için temayı sitenin rengine göre sabitle: koyu bir sayfada "Koyu", açık bir sayfada "Açık".
Genişlik: varsayılan olarak araç bulunduğu alanın tamamını kaplar. Geniş bir sayfada daha toplu dursun istersen en fazla genişliği 480, 640 veya 800 piksel ile sınırlayabilirsin.
WordPress'e ekleme
Blok düzenleyicide (Gutenberg) aracın görünmesini istediğin yere bir Özel HTML bloğu ekle ve kodu bu bloğa yapıştır. Önizleme sekmesinde aracı görebilirsin. Klasik düzenleyici kullanıyorsan "Metin" sekmesine geçip kodu yapıştır. Yan sütuna koymak için Görünüm > Bileşenler menüsünden bir "Özel HTML" bileşeni ekle.
Bazı güvenlik eklentileri ve yönetici olmayan kullanıcı rolleri, yazı içindeki betik etiketlerini kaydederken siler. Kod kaydedildikten sonra kaybolduysa iki yol var: yazıyı yönetici hesabıyla düzenlemek ya da betik gerektirmeyen "Yalnız iframe" kodunu kullanmak.
Blogger'a ekleme
Yazı düzenleyicide sol üstteki kalem simgesinden HTML görünümüne geç, kodu istediğin paragrafın arasına yapıştır ve yazıyı kaydet. Kenar çubuğuna eklemek için Düzen bölümünde "Gadget ekle" > HTML/JavaScript seçeneğini kullan. Blogger betiği olduğu gibi çalıştırır, yükseklik otomatik ayarlanır.
Wix, Google Sites ve diğer site kurucular
Wix'te Ekle > Gömme Kodu > HTML Gömme öğesini sayfaya bırak ve "Kod" seçeneğine kodu yapıştır. Wix bu kodu kendi çerçevesinin içinde çalıştırdığı için o çerçevenin yüksekliğini elle ayarlaman gerekir; burada "Yalnız iframe" kodu daha öngörülebilir sonuç verir. Yükseklik alanına aracın uzunluğuna uygun bir değer gir.
Google Sites'ta Ekle > Yerleştir > "Kodu yerleştir" sekmesini kullan. Squarespace, Webflow, Ticimax, IdeaSoft gibi platformlarda "HTML", "Kod" veya "Özel kod" adlı bir blok ya da bileşen bulunur. Betik çalıştırılmasına izin veren her yerde önerilen kodu, izin vermeyen yerlerde iframe kodunu kullanabilirsin.
Elle yazılan HTML sayfaları
Kendi HTML dosyanı düzenliyorsan div satırını aracın görünmesini istediğin yere, script satırını ise aynı sayfada herhangi bir yere koy. Betik async olarak yüklendiği için sayfanın geri kalanını bekletmez. Sayfan sonradan içerik yükleyen tek sayfalı bir uygulamaysa, yeni bir araç alanı ekledikten sonra window.hesapoEmbed.yukle() çağrısıyla betiğe yeni alanları taratabilirsin.
Başlangıç değerleri ne zaman işe yarar?
Ziyaretçi aracı boş ya da genel bir örnekle açmak yerine senin içeriğinle uyumlu değerlerle açarsa dönüşüm artar. 2+1 daire ilanlarının ortalama fiyatını anlatan bir yazı, konut kredisi aracını o fiyatın yüzde 80'iyle açabilir. Seçtiğin değerler aracın kendi kurallarıyla denetlenir. Geçersiz bir değer girersen oluşturucu alanı kırmızıyla işaretler ve hata düzelene kadar kodu aracın kendi değerleriyle oluşturur. Ziyaretçi açılan değerleri dilediği gibi değiştirebilir. Kişisel bilgi içeren alanlar ve tarih alanları başlangıç değeri olarak sunulmaz; tarihler her zaman ziyaretçinin bulunduğu günle başlar.
Gizlilik ve çerezler
Gömülen araç reklam göstermez. Aracın hangi bilgileri işlediği Gizlilik Politikası'nda, kullandığı çerez ve kayıtlar Çerez Politikası'nda ayrıntılı olarak anlatılır. Kendi sitenin gizlilik ve çerez metinlerini hazırlarken bu iki sayfaya bağlantı verebilirsin.
Güncellik ve bakım
Gömülen araç, hesapo.com'daki aracın kendisidir. Gelir vergisi dilimleri, asgari ücret, SGK tavanı, kredi vergileri veya sınav katsayıları değiştiğinde araç burada güncellendiği an senin sayfanda da güncellenir. Kodu yeniden kopyalaman gerekmez. Bir aracın adı veya adresi değişirse eski kodların çalışmaya devam etmesi sağlanır.
Hangi araçlar eklenebilir?
Kredi, finans, vergi, maaş, sağlık, sınav, matematik, zaman ve günlük hayat kategorilerindeki genel hesaplama araçlarının tamamı eklenebilir. Öğretmen belgeleri (tutanaklar, planlar, BEP ve rehberlik formları) ile öğrenci adı gibi kişisel bilgi girilen çalışma kağıtları listede yer almaz. Bu araçlara girilen bilgiler hassastır; ziyaretçinin formu kimin işlettiğini açıkça görebildiği hesapo.com'da kullanılmaları daha doğrudur. Tam ekran çalışan zikirmatik ve tesbihat da kendi sayfalarında kullanılmak üzere tasarlandığı için listede yok.
Kullanım kuralları
Araçları kişisel bloglarda, kurum sayfalarında ve ticari sitelerde ücretsiz kullanabilirsin. Karşılığında iki koşul var: aracın altındaki "hesapo.com" atıf satırını kaldırma veya gizleme, aracı da değiştirmeden kullan. Ayrıntılar kullanım şartlarının "Araçları sitenize eklemek" bölümünde. Sonuçlar bilgilendirme amaçlıdır; resmî hesap veya danışmanlık yerine geçmez. Bu not gömülen araç için de geçerlidir.
Sıkça sorulan sorular
Araç gerçekten ücretsiz mi, bir sınırı var mı?
Evet, ücretsizdir. Üyelik, API anahtarı veya ödeme gerekmez; günlük görüntülenme sınırı da yoktur. Tek koşul, aracın altındaki hesapo.com atıf satırının görünür kalmasıdır.
Gömülen araçta reklam çıkar mı?
Hayır. Gömme sürümünde reklam, açılır pencere veya tanıtım bulunmaz. Aracın altında yalnız küçük bir "hesapo.com ile hesaplandı" satırı yer alır.
Araç sitemi yavaşlatır mı?
Betik birkaç kilobayttır ve başka bir kütüphane yüklemez. Araç, ziyaretçi sayfada ona yaklaşana kadar yüklenmez. Bu sayede ilk açılış süresi ve Core Web Vitals değerlerin etkilenmez.
Aracın yüksekliği neden kendiliğinden değişiyor?
Önerilen kodda araç kendi içerik yüksekliğini sayfana bildirir, betik de çerçeveyi bu yüksekliğe getirir. Ödeme planı açıldığında veya sonuç uzadığında çerçeve büyür, böylece iç içe kaydırma çubuğu oluşmaz. "Yalnız iframe" kodunda yükseklik sabittir.
Kodu yapıştırdım ama araç görünmüyor, ne yapmalıyım?
Önce sayfayı yayın hâlinde, düzenleyici dışında aç; bazı düzenleyiciler betikleri önizlemede çalıştırmaz. Kod kaydedilirken silindiyse kullandığın platform betik etiketlerine izin vermiyor demektir; bu durumda "Yalnız iframe" kodunu kullan. Sitende içerik güvenlik politikası (CSP) varsa hesapo.com adresine script-src ve frame-src izni vermen gerekir.
Aynı sayfaya birden çok araç ekleyebilir miyim?
Evet. Her araç için ayrı bir div satırı ekle; betik satırını sayfaya bir kez koyman yeterli. Her araç kendi yüksekliğini bağımsız olarak ayarlar.
Atıf bağlantısını kaldırabilir miyim?
Hayır. Aracın ücretsiz sunulmasının karşılığı bu satırdır. Kaldırılması veya gizlenmesi kullanım şartlarına aykırıdır. Aracın kendi içindeki atıf ise hesapo.com sayfasının parçasıdır ve senin sitenden değiştirilemez.
Gömülen araç sitemin SEO'suna zarar verir mi?
Hayır. Araç bir çerçeve içinde yüklendiği için arama motorları onu senin sayfanın kopya içeriği saymaz; gömme sayfaları ayrıca arama sonuçlarına kapalıdır. Atıf bağlantısı "nofollow" olarak işaretlidir, bu da Google'ın bileşen bağlantıları için önerdiği kullanımdır.
Gömülen aracın gizlilik ve çerez durumu nerede anlatılıyor?
Aracın hangi bilgileri işlediği Gizlilik Politikası'nda, kullandığı çerez ve kayıtlar Çerez Politikası'nda yer alır. Kendi sitenin metinlerinde bu sayfalara bağlantı verebilirsin.