Web sitesi için WhatsApp butonu: kod, eklenti veya widget

SendSeven Team, Editorial Team

Web sitesine WhatsApp butonu ekleme: kopyalanabilir HTML kodu, Türkçe karakterlerle doğru wa.me bağlantısı, WordPress, Shopify ve Wix için yollar, bilgisayardaki davranış, KVKK ve GDPR, ölçüm ve tıklamadan sonra olanlar. Canlı demoyla.

Birçok müşteri aramak yerine yazmayı tercih ediyor ve WhatsApp zaten akıllı telefonunda. Web sitesindeki bir WhatsApp butonu bu alışkanlığı bir iletişim kanalına dönüştürür: bir tıklama ve işletmenizle sohbet açılır. Butonu eklemek birkaç dakika sürer. Bu yazı kopyalanabilir kodu, WordPress, Shopify ve Wix'teki yolu ve bir butonun pratikte takıldığı noktaları gösteriyor: bilgisayarda, veri korumada, ölçümde ve gelen kutusunda.

Web sitesi için WhatsApp butonu nedir?

WhatsApp butonu, web sitenizdeki, doğrudan işletme numaranızla bir WhatsApp sohbeti açan bir buton veya bağlantıdır. Teknik olarak arkasında WhatsApp'ın Click-to-Chat özelliği vardır: numaranızı ve isterseniz giriş alanında hazır duran bir metni içeren bir wa.me bağlantısı. Akıllı telefonda bağlantı WhatsApp uygulamasını, bilgisayarda WhatsApp Web'i veya masaüstü uygulamasını açar.

Ziyaretçinin numaranızı ne yazması ne de kaydetmesi gerekir. Önceden doldurulmuş metni görür, ekler veya olduğu gibi gönderir ve gelen kutunuza telefon numarasıyla birlikte bir talep düşer. Butonun yeşil, marka renginizde ya da ekran kenarında yuvarlak bir düğme olarak görünmesi tamamen tasarım meselesidir. Alttaki bağlantı her zaman aynıdır.

Canlı demo

Deneyin: Bu butonlar gerçek bir sohbet açar

Buradaki her buton, destek ekibimize giden sıradan bir wa.me bağlantısıdır. Akıllı telefonda WhatsApp uygulaması, bilgisayarda WhatsApp Web veya masaüstü uygulaması açılır.

1. Klasik WhatsApp yeşili

WhatsApp'tan sorun

Hemen dikkat çeker, rengi herkes tanır.

2. Marka renginizde

WhatsApp'ta sohbet başlat

Buton sizin renginizi taşır, WhatsApp logosu değişmeden kalır.

3. Sağ altta yüzen

www.siteniz.com

Sorunuz mu var? Bize yazın

Kaydırırken her sayfada görünür kalır.

4. Bilgisayar için QR kod

Bilgisayar başında mısınız? Kodu akıllı telefonunuzun kamerasıyla okutun, sohbet doğrudan WhatsApp uygulamanızda açılır.

Tüm varyantlar aynı mesajı önceden doldurur: Merhaba SendSeven, web sitem için WhatsApp butonları hakkında birkaç sorum daha var. Mesaj, siz Gönder'e dokunana kadar gönderilmez. Numaranızı ancak o zaman görürüz ve destek ekibimiz size sohbette yanıt verir.

wa.me bağlantısını doğru nasıl oluştururum?

Bağlantı; https://wa.me/, artı işareti, baştaki sıfır, boşluk ve özel karakter içermeyen tam uluslararası numaranız ve isteğe bağlı olarak URL kodlamalı mesajla ?text= kısmından oluşur. WhatsApp bunu Click-to-Chat resmi yardım sayfasında böyle anlatıyor.

+49 (0) 821 7898-8853 numarası böylece 4982178988853 olur: ülke kodu 49, alan kodundaki sıfır düşer, parantez, tire ve boşluklar da. Hazır bağlantı https://wa.me/4982178988853 olur.

Önceden doldurulan mesaj URL kodlamalı olmalıdır. Harfler, rakamlar, tire, nokta, alt çizgi ve tilde kalır, geri kalan her şey yüzde koduna dönüşür. Özellikle Türkçe karakterler kolayca hatalı çıkar, çünkü UTF-8'de iki bayttan oluşurlar:

Canlı demomuzdan bir örnek: "için" kelimesi i%C3%A7in olur. Destek ekibimize giden tam bağlantı şöyle görünür:

https://wa.me/4982178988853?text=Merhaba%20SendSeven%2C%20web%20sitem%20i%C3%A7in%20WhatsApp%20butonlar%C4%B1%20hakk%C4%B1nda%20birka%C3%A7%20sorum%20daha%20var.

En sık yapılan hatalar, numaranın başında artı işareti veya ülke kodundan sonra sıfır kullanmak (wa.me/+49… veya wa.me/490170…), kodlanmamış boşluklar ve metindeki, mesajın geri kalanını kesen bir & işareti veya diyezdir. Numara hiç yoksa WhatsApp yalnızca kişi seçimini açar. Hiçbir şeyi elle kodlamak istemezseniz ücretsiz WhatsApp bağlantı oluşturucumuz bağlantıyı QR koduyla birlikte oluşturur.

WhatsApp butonunu eklemenin hangi yolları var?

Üç yol var: wa.me bağlantısını kendi HTML kodunuz olarak eklemek, web sitesi sisteminiz için hazır bir eklenti kullanmak veya WhatsApp'ı diğer kanallar ve bir gelen kutusuyla birleştiren bir sohbet widget'ı. Kod en yalın, eklenti kod bilgisi gerektirmez, widget ise birden fazla kişi yanıt verdiğinde değerini gösterir.

İletişim sayfasındaki tek bir buton için HTML kodu yeterlidir. Butonu kod bilgisi olmadan tüm sayfalarda göstermek istiyorsanız eklenti işe yarar. Talepler birden fazla kanaldan tek bir ekibe düşecekse widget doğru yoldur.

Bir WhatsApp butonunun HTML kodu nasıl görünür?

En basit WhatsApp butonu, wa.me adresine giden ve sayfanızın tarayıcıda açık kalması için target="_blank" içeren sıradan bir HTML bağlantısıdır. Örnekte destek numaramız yer alır. Onu kendi numaranızla değiştirin ve metni uyarlayın:

<a href="https://wa.me/4982178988853?text=Merhaba%2C%20teklifiniz%20hakk%C4%B1nda%20bir%20sorum%20var."
   target="_blank" rel="noopener">
  WhatsApp'tan sorun
</a>

Her sayfada sağ altta duran yüzen bir buton için biraz CSS gerekir. Kod, şablonunuzun kapanış </body> etiketinden önce bir kez yer almalıdır:

<a href="https://wa.me/4982178988853?text=Merhaba%2C%20bir%20sorum%20var."
   class="wa-float" target="_blank" rel="noopener"
   aria-label="WhatsApp'ta sohbet başlat">
  <img src="/images/whatsapp-icon.svg" alt="" width="28" height="28">
</a>

<style>
  .wa-float {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #25D366;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .2);
  }
</style>

Üç ayrıntı önemlidir. aria-label: Yalnızca logo gösteren bir butonun ekran okuyucular için bir adı olmalıdır. Boyut: 56 piksel akıllı telefonda rahat isabet ettirilir, 44 pikselin altı zorlaşır. Bu, Apple'ın ve WCAG'ın dokunma alanları için önerdiği asgari boyuttur. Simge: WhatsApp logosunu WhatsApp'ın resmi marka kaynaklarından indirin, değiştirmeyin, rengini de değiştirmeyin ve kendi sunucunuza koyun. Harici bir sunucudaki simge, her sayfa görüntülemesinde ziyaretçilerinizin IP adresini iletir.

WhatsApp butonunu WordPress, Shopify veya Wix'e nasıl eklerim?

Yaygın tüm sistemlerde aynı ilke geçerlidir: Tek bir buton sayfaya HTML bloğu olarak, yüzen bir buton ise bir kez footer'a, </body> etiketinden önceye eklenir. Yalnızca menülerin adı farklıdır.

WordPress

• Sayfadaki buton: Blok düzenleyicide "Özel HTML" bloğunu ekleyin ve bağlantı kodunu içine kopyalayın.
• Tüm sayfalarda yüzen buton: En güvenlisi, WPCode gibi header ve footer kodu için bir eklentiyle yapmaktır. Kodu orada footer alanına eklersiniz. Klasik bir temada footer.php dosyasını doğrudan düzenleyen biri alt tema (child theme) kullanmalıdır, aksi halde kod bir sonraki tema güncellemesinde silinir. Blok temalarında footer.php yoktur, orada WPCode daha kolay yoldur.
• Hazır WhatsApp eklentileri: Eklenti dizininde çok sayıda var. Yüklemeden önce eklentinin harici sunuculardan dosya yükleyip yüklemediğini, en son ne zaman güncellendiğini ve çerez bannerınızla uyumlu çalışıp çalışmadığını kontrol edin.

Shopify

• Tüm mağazada yüzen buton: Online Mağaza > Temalar altında geçerli temada üç nokta menüsüne, ardından "Kodu düzenle"ye tıklayın. layout/theme.liquid dosyasını açın ve kodu doğrudan </body> etiketinden önce ekleyin. Öncesinde temayı aynı menüden çoğaltın.
• Bir sayfada veya ürün sayfasında buton: Dawn gibi Online Store 2.0 temalarında tema düzenleyicide "Özel Liquid" bölümü ekleyin ve bağlantı kodunu içine koyun.

Wix ve Webflow

• Wix: Bir sayfadaki buton için düzenleyicide HTML kodu gömme öğesini kullanın. Wix, gömülü kodu ayrı bir çerçevede gösterir. Tüm web sitesi üzerinde yüzen bir buton bu nedenle "Settings > Development & integrations > Custom code" altına aittir. Bu alanı yalnızca yayınlanmış bir web sitesi, bağlı bir alan adı ve dolayısıyla bir Premium paketle kullanabilirsiniz.
• Webflow: Site genelinde kodu site ayarlarında ("Site settings") "Custom code" altındaki "Footer code" alanına girersiniz, bunun için ücretli bir site planı gerekir. Tek bir buton için "Code Embed" öğesini kullanırsınız.

WhatsApp ile bir sohbet widget'ı eklemek

SendSeven'inki gibi bir widget de aynı şekilde eklenir: Bir betik parçasını </body> etiketinden önce bir kez eklersiniz. WordPress'te bu, footer veya WPCode üzerinden, Shopify'da theme.liquid üzerinden, Wix ve Webflow'da ise yukarıda anlatıldığı gibi özel kod alanı üzerinden yapılır. Tüm ayarları ayrıntılı olarak web sitesi widget'ı kılavuzumuz anlatıyor.

Biri bilgisayarda butona tıklarsa ne olur?

Bilgisayarda bir wa.me bağlantısı önce WhatsApp'ın bir sayfasını açar, buradan masaüstü uygulamasına veya WhatsApp Web'e geçilir. Ziyaretçi orada oturum açmamışsa önce akıllı telefonunu eşleştirmelidir ve birçok kişi tam bu noktada vazgeçer.

Akıllı telefonda yol kısadır: Tıklama, uygulama açılır, mesaj hazırdır. Bilgisayarda her şey, WhatsApp'ın orada zaten kurulu olup olmadığına bağlıdır. Özellikle B2B'de, birçok ziyaretçi iş yerinde araştırma yaptığı için bu çoğu zaman böyle değildir.

Çözüm bir QR koddur: Ziyaretçi onu akıllı telefonuyla okutur ve doğrudan uygulamasındaki sohbete ulaşır. Yukarıdaki canlı demoda bunu bilgisayarda dördüncü varyant olarak görürsünüz. Salt HTML ile bunu, QR kodu yalnızca geniş ekranlarda gösteren bir CSS kuralıyla kurarsınız. SendSeven widget'ı geçişi kendisi üstlenir: Biri bilgisayarda WhatsApp'a tıkladığında widget bir QR kod gösterir ve ikinci yol olarak WhatsApp Web'i sunar. Akıllı telefonda uygulama doğrudan açılır. Bu özellik yeni widget'larda açıktır, mevcut widget'lar önceki davranışını korur. Telegram, Messenger, Instagram ve SMS için de geçerlidir. QR kodları web sitesi dışında nerelerde kullanacağınızı WhatsApp QR kodu için altı yer yazımız gösteriyor.

Web sitesindeki WhatsApp butonu KVKK ve GDPR uyumlu mu?

Evet, kendi sunucunuzda barındırılan bir wa.me bağlantısı KVKK ve GDPR uyumlu biçimde eklenebilir: Sayfanız yüklenirken WhatsApp'a veri aktarmaz, ziyaretçiyi oraya ancak tıklama götürür. Harici sunuculardan betik, yazı tipi veya simge yükleyen eklentilere ve widget'lara ve sohbetin sonrasında nerede işlendiği sorusuna daha dikkatli bakmalısınız.

• Tıklamadan önce: Kendi sunucunuzda barındırılan ve kendi simgesini kullanan bir buton üçüncü taraflardan hiçbir şey yüklemez. Harici sunuculardan dosya çeken eklentiler bu sırada IP adresini iletir; bu yüzden denetiminize ve gerekirse çerez bannerına dahil edilmelidir.
• Gizlilik politikası: Bu politika genellikle WhatsApp'ın bir iletişim yolu olduğuna ve sohbette aldığınız verilere değinir. Kesin ifadeyi en iyisi veri koruma görevlinizle netleştirin.
• Tıklamadan sonra: Sohbet bir hizmet telefonundaki WhatsApp Business uygulaması üzerinden yürüyorsa uygulama, izin verirseniz rehbere erişebilir ve dolayısıyla hiç onay vermemiş kişilerin numaralarına da. WhatsApp Business Platform ve bir veri işleme sözleşmesi (DPA) sunan bir sağlayıcı üzerinden rehber dışarıda kalır ve ekibiniz roller ve yetkilerle tek bir arayüzde çalışır.

Bu bölüm hukuki danışmanlığın yerini tutmaz. Açık rıza, saklama süreleri ve sağlayıcı seçimi hakkında ayrıntıları WhatsApp Business ve veri koruma rehberinde bulabilirsiniz.

WhatsApp butonundaki tıklamaları nasıl ölçerim?

Butondaki tıklamaları Google Analytics 4'te en kolay Google Tag Manager üzerinden ölçersiniz: Bir tetikleyici, adresi wa.me içeren bağlantılara tepki verir ve özel bir olay gönderir. AB'de bu ölçüm genellikle çerez bannerında verilen onayı gerektirir, bu nedenle etiket ancak onaydan sonra tetiklenir.

1. Tag Manager'da yerleşik tıklama değişkenlerini, aralarında Click URL olmak üzere etkinleştirin.
2. Click URL, wa.me içerdiğinde tetiklenen "Tıklama - Yalnızca Bağlantılar" türünde bir tetikleyici oluşturun.
3. Bunu, örneğin whatsapp_click adında bir GA4 olay etiketine bağlayın ve sayfayı parametre olarak iletin.
4. Etiketi çerez bannerınızdaki onaya bağlayın; böylece onay olmadan tetiklenmez.

Wix'te Tag Manager'ı özel kod ile değil, pazarlama entegrasyonları üzerinden eklersiniz. Sohbette sonrasında olanları Google Analytics görmez. WhatsApp ne UTM parametrelerini ne de kaynak sayfayı iletir. Basit bir hile netlik sağlar: Her butona kendi önceden doldurulmuş mesajını verin, örneğin fiyatlar sayfasında "Fiyatlar hakkında bir sorum var". Böylece talebin nereden geldiğini sohbette görürsünüz. SendSeven widget'ında widget istatistiği ayrıca kanal başına tıklamaları, örneğin ziyaretçilerin WhatsApp'ı kaç kez seçtiğini, bunun yanında görüntülemeleri ve etkileşimleri gösterir. Reklamlar devreye girdiğinde WhatsApp görüşmelerini ciroya kadar nasıl takip edeceğinizi Click-to-WhatsApp reklamları ve wa.me rehberi gösteriyor.

Tıklamadan sonra işletmenizde ne olur?

Tıklamadan sonra mesaj, butonun arkasındaki numaraya düşer. WhatsApp Business uygulamasıyla bu bir akıllı telefondur. Birden fazla çalışan yanıt verdiğinde veya çok sayıda sohbet geldiğinde, ekibinizin birlikte çalıştığı bir ekip gelen kutusu işe yarar. Butonun müşteri mi yoksa yalnızca kimsenin zamanında okumadığı mesajlar mı getirdiği burada belli olur.

Ekibiniz için tek bir gelen kutusu

SendSeven'in ekip gelen kutusunda WhatsApp sohbetleri e-posta, SMS, Instagram, Messenger, canlı sohbet ve Telegram ile yan yana düşer. Ekibiniz sohbetleri atar, şu anda kimin yanıt verdiğini görür ve müşterinin görmediği dahili notlar yazar. Bunun günlük işte nasıl göründüğünü birden fazla kullanıcıyla WhatsApp Business yazımız anlatıyor.

Akşamları ve hafta sonları yanıt

Butondan gelen taleplerin bir kısmı mesai bittikten sonra gelir. Bir yapay zeka ajanı, çalışma saatleri, teslimat veya fiyatlar gibi sık tekrarlanan soruları bilgi tabanınızdan anında yanıtlar ve geri kalan her şeyi ekibinize devreder. Ertesi sabah devir, tüm geçmişiyle gelen kutusunda sizi bekler.

WhatsApp ve diğer kanallar için tek widget

Her ziyaretçi WhatsApp kullanmak istemez. SendSeven widget'ında hangi kanalların görüneceğini belirlersiniz: yalnızca WhatsApp veya WhatsApp'ın yanında canlı sohbet, e-posta, Telegram ve diğer kanallar. Canlı sohbeti kapatırsanız yeni bir widget kanalları logolu bir liste olarak gösterir. Bubble widget'ları için sunulan hızlı erişimle yuvarlak bubble, tıklandığında kanalları yelpaze gibi açar. WhatsApp bu durumda iki tıklama uzaktadır. Bubble için aralarında WhatsApp logosunun da bulunduğu 15 simge arasından seçim yapabilirsiniz.

Yalnızca tek tek butonlara ihtiyacınız varsa, örneğin bir blog yazısı, bir açılış sayfası veya e-posta imzası için, Widget'lar bölümünde "Promosyon" altında hazır bağlantıları ve PNG veya SVG olarak QR kodlarını, ayrıca kanal butonları, rozetler ve e-posta imzaları için HTML parçacıklarını bulursunuz. Önceden doldurulmuş mesajı orada kendiniz belirlersiniz. Böylece bağlantıyı kendiniz kodlamadan bir parçacıkla WhatsApp butonu oluşturursunuz. Kanal hakkında daha fazlasını işletmeler için WhatsApp sayfamızda bulabilirsiniz.

WhatsApp butonu ne kadara mal olur?

Butonun kendisi ücretsizdir: wa.me bağlantısı, WhatsApp Business uygulamasını da API'yi de kullansanız ücretsizdir. Maliyet ancak WhatsApp Business Platform üzerinden verilen yanıtlardan ve ekibinizin çalıştığı yazılımdan doğar.

• Gelen mesajlar her zaman ücretsizdir.
• Müşteri önce yazarsa yanıtlarınız için bir 24 saatlik pencere açılır.
• 1 Ekim 2026'dan beri Meta hizmet mesajları için de ücret alır, yani 24 saatlik penceredeki yanıtlarınız için. Telefon numarası ve ay başına ilk 1.000 mesaj ücretsiz kalır, 1.001. mesajdan itibaren utility tarifesi geçerlidir, Almanya'da iletilen mesaj başına 0,0456 €. Ayrıntılar 2026 WhatsApp fiyatları özetimizde ve Meta'nın fiyat sayfasında yer alıyor.
• WhatsApp Business uygulamasıyla mesaj maliyeti oluşmaz. Karşılığında yalnızca telefonu ve ona bağlı cihazları kullanan kişi yanıt verebilir.

SendSeven'de web sitesi widget'ları ayda 49 € olan Basic paketinden itibaren, yapay zeka ajanları ve Flow Builder ayda 79 € olan Professional paketinden itibaren dahildir. Yapay zeka kullanımı AI kredileri üzerinden faturalandırılır. Tüm fiyatlar net olup KDV hariçtir, özet fiyatlar sayfasında yer alıyor. SendSeven'i 14 gün ücretsiz, 100 test mesajıyla ve kredi kartı olmadan deneyebilirsiniz.

Butonunuzla ilgili başka bir sorunuz mu var? Yukarıdaki canlı demoyu kullanın, soru doğrudan destek ekibimize ulaşır.

Sık sorulan sorular