İçeriğe geç
OmniChannels.ai
Menü

Ücretsiz araç

Web siteniz için WhatsApp sohbet butonu

Dakikalar içinde herhangi bir web sitesine yüzen bir WhatsApp butonu ekleyin. Numaranızı, önceden doldurulmuş mesajı, rengi, konumu, karşılamayı ve gecikmeyi ayarlayın; masaüstü veya mobil önizlemede canlı izleyin, ardından WordPress, Shopify, Wix ve düz HTML için kurulum adımlarıyla birlikte küçük, bağımsız bir kodu kopyalayın.

Ücretsiz · kayıt gerektirmez · tarayıcınızda çalışır

Numara ve mesaj

Yerel olarak arayacağınız şekilde yazın veya + ya da 00 ile başlayın. Boşluklar, tireler ve parantezler sorun değildir.

Müşterinin metin kutusunda görünür; göndermeden önce düzenleyebilir. Arapça, emoji ve satır sonları sizin için kodlanır.

Düğme ayarları

Konum

Bu renk üzerindeki beyaz simgenin kontrastı 2.0:1 olup simgeler için önerilen 3:1 değerinin altındadır. Yine de erişilebilir bir adı vardır, ancak daha koyu bir yeşil daha okunaklıdır.

Düğmenin yanında gösterilir; ziyaretçiler ziyaretlerinin geri kalanı için kapatabilir. Balon istemiyorsanız boş bırakın.

Ekran okuyucular tarafından okunur ve üzerine gelindiğinde ipucu olarak gösterilir.

Gösterilecek yer

0, düğmeyi hemen gösterir. Kısa bir gecikme, sayfanızın ana harekete geçirici öğesiyle yarışmayı önler.

Canlı önizleme

Yerleştirme kodunuz

Kodunuzu tamamlamak için geçerli bir WhatsApp numarası girin.

<!-- WhatsApp chat button (generated with omnichannels.ai/tools/whatsapp-chat-button/) -->
<div id="ocwa" class="ocwa ocwa-r" hidden>
  <div id="ocwa-tip" class="ocwa-tip" dir="auto"><span>Merhaba 👋 Size nasıl yardımcı olabiliriz?</span><button type="button" class="ocwa-x" aria-label="Kapat">&times;</button></div>
  <a class="ocwa-btn" href="https://wa.me/?text=Merhaba%21%20Web%20sitenizle%20ilgili%20bir%20sorum%20var." target="_blank" rel="noopener" aria-label="WhatsApp&#39;ta bizimle sohbet edin" title="WhatsApp&#39;ta bizimle sohbet edin"><svg viewBox="0 0 24 24" width="30" height="30" aria-hidden="true" focusable="false"><path fill="#ffffff" d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z"/></svg></a>
</div>
<style>
.ocwa{position:fixed;bottom:20px;z-index:2147483000;display:flex;flex-direction:column;align-items:flex-end;gap:10px;font:15px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,Tahoma,Arial,sans-serif}
.ocwa[hidden]{display:none}
.ocwa-r{right:20px}.ocwa-l{left:20px;align-items:flex-start}
.ocwa-btn{width:58px;height:58px;border-radius:50%;background:#25d366;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(0,0,0,.24);transition:transform .2s ease}
.ocwa-btn:hover{transform:scale(1.07)}
.ocwa-btn:focus-visible{outline:3px solid #1a73e8;outline-offset:3px}
.ocwa-tip{position:relative;box-sizing:border-box;max-width:min(260px,calc(100vw - 40px));margin:0;padding-block:10px;padding-inline:14px 36px;background:#fff;color:#111b21;border-radius:12px;box-shadow:0 6px 20px rgba(0,0,0,.18);text-align:start;overflow-wrap:anywhere}
.ocwa-x{position:absolute;top:5px;inset-inline-end:5px;width:26px;height:26px;padding:0;border:0;border-radius:50%;background:transparent;color:#54656f;font-size:20px;line-height:26px;cursor:pointer}
.ocwa-x:hover{background:#f0f2f5}.ocwa-x:focus-visible{outline:2px solid #1a73e8}
.ocwa-in{animation:ocwa-in .35s ease-out both}
@keyframes ocwa-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.ocwa-in{animation:none}.ocwa-btn{transition:none}.ocwa-btn:hover{transform:none}}
@media (max-width:767px){.ocwa{bottom:16px}.ocwa-r{right:16px}.ocwa-l{left:16px}.ocwa-nomob{display:none!important}}
@media (min-width:768px){.ocwa-nodesk{display:none!important}}
@media print{.ocwa{display:none!important}}
</style>
<script>
(function(){var w=document.getElementById("ocwa");if(!w)return;var t=document.getElementById("ocwa-tip"),k="ocwa-tip-closed";if(t){var c=false;try{c=sessionStorage.getItem(k)==="1"}catch(e){}if(c){t.parentNode.removeChild(t)}else{t.querySelector("button").addEventListener("click",function(){t.parentNode.removeChild(t);try{sessionStorage.setItem(k,"1")}catch(e){}})}}setTimeout(function(){w.hidden=false;w.className+=" ocwa-in"},3000);})();
</script>

Kendi kendine yeten: yaklaşık 3,8 KB, harici betik, yazı tipi veya görsel yok, çerez yok.

Nasıl kurulur?

  1. 1Yukarıdaki kodu kopyalayın.
  2. 2WPCode gibi bir üst bilgi ve alt bilgi kodu eklentisi kurun veya blok temalı bir tema kullanıyorsanız Görünüm → Düzenleyici'yi açın.
  3. 3Kodu alt bilgi (gövde sonu) bölümüne veya alt bilgi şablonu parçasındaki bir Özel HTML bloğuna yapıştırın.
  4. 4Kaydedin, varsa önbellek eklentisini temizleyin ve telefonunuzda test edin.

Sohbetler tek bir telefonda mı birikiyor? Bu sohbetleri ortak bir ekip gelen kutusundan yanıtlayın

Buraya yazdığınız hiçbir şey sunucularımıza gönderilmez.

Kısa yanıt

WhatsApp sohbet butonu, bir web sitesinde tıklandığında işletmeyle bir WhatsApp sohbeti açan küçük yüzen bir butondur. https://wa.me/ adresine işletme numarası ve isteğe bağlı önceden doldurulmuş bir mesaj eklenmiş bir bağlantıdır; sayfanın bir köşesinde simge olarak biçimlendirilir. Ziyaretçiler, form doldurmadan ve numarayı kaydetmeden sohbeti kendi telefonlarında veya WhatsApp Web'de başlatır.

Güvenilir altyapıResmî Meta Business Solution ProviderGoogle RBM iş ortağıGSMA üyesiISO/IEC 27001:2022ISO/IEC 27018ISO 9001:2015ISO 22301SOC 2 Type IIGDPR uyumlu

Web sitenize WhatsApp butonu nasıl eklenir

  1. 1

    Numaranızı ve mesajınızı girin

    Ülkeyi seçin, WhatsApp numaranızı yazın ve ziyaretçilerin göndereceği mesajı belirleyin; örneğin bir siparişle ilgili soru.

  2. 2

    Butonu biçimlendirin

    Köşeyi, rengi, karşılama balonunu, cihazları ve bir gecikmeyi seçin. Canlı önizleme butonu masaüstü ve mobilde örnek bir sayfada gösterir.

  3. 3

    Kodu kopyalayın

    Kodu kopyalayın. Harici istek, çerez veya izleme içermeyen birkaç kilobaytlık HTML, CSS ve JavaScript'tir.

  4. 4

    </body> öncesine yapıştırın

    WordPress, Shopify, Wix veya düz HTML adımlarını izleyin, yayımlayın ve butonu telefonda ve bilgisayarda test edin.

Oluşturulan kod ne yapar

Kod, sayfalarınızın alt köşesine sabit konumlu tek bir bağlantı ekler. Bağlantı, WhatsApp'ın yardım sayfasında (faq.whatsapp.com/5913398998672934) belgelediği biçimde standart bir tıkla-sohbet URL'sidir: https://wa.me/ artı tam uluslararası numaranız ve isterseniz URL kodlu bir mesajla ?text=. Telefonlarda WhatsApp uygulamasını, bilgisayarlarda WhatsApp Web'i veya masaüstü uygulamayı açar.

Her şey satır içidir: WhatsApp simgesi bir SVG yoludur, stiller tek bir sınıf önekiyle kapsamlanır ve betik, gecikmeyi ve kapatılabilir karşılamayı yöneten birkaç satırdır. Harici betik, yazı tipi, görsel veya çerez yoktur; bu yüzden buton sayfanızı yavaşlatmaz ve üçüncü taraf izleyici eklemez.

Tasarımdan erişilebilir ve sağdan sola uyumlu

Yüzen butonlar çoğu zaman yalnızca simgeden oluşur ve bu, ekran okuyucu kullanıcılarını tahmine bırakır. Oluşturulan bağlantıda sizin belirleyebildiğiniz bir aria-label (varsayılan olarak "Bizimle WhatsApp'ta sohbet edin"), klavye kullanıcıları için görünür bir odak çerçevesi ve yardımcı teknolojiden gizlenmiş dekoratif bir simge bulunur. Karşılamanın kendi etiketine sahip gerçek bir kapatma butonu vardır.

Cihazını hareketi azaltacak şekilde ayarlayan ziyaretçiler, butonu kayarak girme animasyonu veya üzerine gelince yakınlaştırma olmadan görür. Karşılama otomatik metin yönü ve mantıksal CSS özellikleri kullanır; böylece Arapça ve sağdan sola yazılan diğer metinler doğru yerleşir ve sağdan sola siteler için butonu sol alta yerleştirebilirsiniz.

  • Net bir erişilebilir ada sahip, klavyeyle ulaşılabilir bağlantı.
  • prefers-reduced-motion tercihine uyar.
  • Yazdırırken gizlenir ve cihaz türüne göre isteğe bağlıdır.
  • Karşılamanın kapatılması ziyaret boyunca çerezsiz hatırlanır.

Renk, konum ve zamanlamayı seçmek

Soldan sağa yazılan sitelerde sağ alt gelenektir, Arapça sitelere ise çoğunlukla sol alt uyar; ancak butonun bir çerez bannerını, bir chatbot başlatıcısını veya mobil ödeme çubuğunu örtmediğinden emin olun. WhatsApp yeşili (#25D366) anında tanınır; beyaz simgeyle kontrastı yaklaşık 2:1'dir. Erişilebilirlik en önemliyse #128C7E gibi daha koyu bir yeşil yaklaşık 4:1 verir.

Birkaç saniyelik bir gecikme, ziyaretçilere buton belirmeden önce sayfayı okuma fırsatı verir; ekibiniz telefonlardan yanıt veriyorsa yalnızca mobilde göstermek mantıklı bir tercihtir. Karşılamayı tek kısa ve belirli bir satırda tutun; örneğin "Teslimatla ilgili sorularınız mı var? Bizimle sohbet edin."

Resmî Chat on WhatsApp butonu ve marka kuralları

WhatsApp ayrıca yeşil ve beyaz, üç boyutlu markalı bir "Chat on WhatsApp" butonu yayımlar ve işletmelerden onu değiştirmeden kullanmalarını ister. WhatsApp yardım merkezine göre şu anda yalnızca İngilizce olarak sunulmaktadır. Bu aracın yüzen simge butonu farklı, kompakt bir kalıptır; hangisini kullanırsanız kullanın WhatsApp logosunun kendisini değiştirmeyin ve WhatsApp'ın işletmenizi onayladığını ima etmeyin.

Tek telefon artık yetmediğinde

Bir web sitesi butonu gelen sohbetleri hızla çoğaltabilir. WhatsApp Business uygulamasında konuşmalar sınırlı sayıda bağlı cihazda yaşar. WhatsApp Business Platform'da (API) aynı wa.me bağlantısı ortak bir ekip gelen kutusunu besleyebilir; burada sohbetler temsilcilere atanır, önce chatbotlar veya yapay zeka asistanları tarafından yanıtlanır ve 24 saatlik müşteri hizmetleri penceresi kapandıktan sonra onaylı şablonlarla takip edilir.

Kimin, hangi saatlerde ve ne kadar hızlı yanıtlayacağını planlayın. Sohbetleri günün her saati karşılamıyorsanız yanıt saatlerinizi karşılama mesajında belirtin.

WhatsApp web sitesi butonu soruları

Web siteme WhatsApp butonu nasıl eklerim?

Yukarıda numaranız ve mesajınızla kodu oluşturun, kopyalayın ve sitenizin kapanış </body> etiketinden hemen önceye ya da site oluşturucunuzun altbilgi kod alanına yapıştırın. Ardından her sayfada görünür.

Bu WhatsApp sohbet widget'ı ücretsiz mi?

Evet. Oluşturucu ve kod ücretsizdir, hesap gerektirmez ve kullanım sınırı yoktur. Buton doğrudan WhatsApp'a bağlanır; arkasında abonelik veya barındırılan bir betik yoktur.

WhatsApp butonu web sitemi yavaşlatır mı?

Hayır. Kod, birkaç kilobaytlık satır içi HTML, CSS ve JavaScript'tir ve bir ziyaretçi tıklayana kadar ağ isteği yapmaz; harici betik, yazı tipi ve izleyici yükleyen widget'lardan farklıdır.

WordPress'e WhatsApp butonu nasıl eklerim?

WPCode gibi bir başlık ve altbilgi kodu eklentisi kullanın ve kodu altbilgi bölümüne yapıştırın; blok tema kullanıyorsanız altbilgi şablonunuzdaki bir Özel HTML bloğuna ekleyin. Önbelleği temizleyin ve test edin.

Shopify'a WhatsApp butonu nasıl eklerim?

Shopify yönetiminde Online Store, Themes, ardından canlı temanızda Edit code seçeneğini açın. layout/theme.liquid dosyasını açıp kodu </body> öncesine yapıştırın, kaydedin ve mağazanızı mobilde kontrol edin.

WhatsApp butonunu yalnızca mobilde gösterebilir miyim?

Evet. Oluşturucuda Masaüstü seçeneğinin işaretini kaldırırsanız buton 768 piksel ve üzeri genişlikteki ekranlarda gizlenir. Yalnızca masaüstünde göstermek için Mobil işaretini de kaldırabilirsiniz.

Web sitesi butonundan gelen sohbetleri birden çok temsilci yanıtlayabilir mi?

Tek bir telefondan iyi olmaz. Numarayı WhatsApp Business API'ye bağlayın ve sohbetleri, birden çok temsilcinin ve chatbotun aynı numarayı yanıtlayabildiği ortak bir ekip gelen kutusuna yönlendirin.

Diğer ücretsiz araçlar