Sade wa.me bağlantısından tam bir kayan düğmeye kadar kopyala-yapıştır WhatsApp widget HTML'i, artı ham kodun tek başına size bıraktığı, kendinizin inşa etmesi gereken kısımlar.
Gerçek HTML’i aradıysanız, işte burada, kayıt gerekmeden:
<a href="https://wa.me/15551234567">Chat with us on WhatsApp</a>15551234567 yerine numaranızı tam uluslararası biçimde koyun: önce ülke kodu, artı işareti yok, boşluk yok, başında sıfır yok. Bu bağlantı tek başına işletmenizle bir WhatsApp sohbeti açmaya yeter. Aynı zamanda “bana HTML widget kodunu ver” sorusunun tüm dürüst cevabı da budur, çünkü bu noktadan sonrası, o tek satırın kapsamadığı kısımları sizin (ya da bir oluşturucunun) inşa etmesinden ibarettir.
Bir ziyaretçi bağlantıya hiçbir şey yazılmamış halde iner. Sohbet açıldığında kutuda bir mesaj hazır beklesin diye text parametresini ekleyin:
<a href="https://wa.me/15551234567?text=Hi%2C%20I%27d%20like%20to%20ask%20about%20pricing">
Chat with us on WhatsApp
</a>Mesaj URL kodlanmış olmak zorundadır: %20 bir boşluk, %2C bir virgül, %27 bir kesme işaretidir. Önce istediğiniz cümleyi yazın, sonra text değerine yapıştırmadan önce herhangi bir URL kodlayıcıdan geçirin, çünkü sorgu dizesinin ortasında ham bir boşluk veya noktalama işareti bazı tarayıcılarda bağlantıyı bozar.
Çoğu insanın “WhatsApp widget’ı” derken kastettiği şey bir metin bağlantısı değildir. Köşedeki düğme, aynı bağlantının üzerine eklenmiş CSS’ten ibarettir:
<a
href="https://wa.me/15551234567?text=Hi%2C%20I%27d%20like%20to%20ask%20about%20pricing"
target="_blank"
rel="noopener"
aria-label="Chat on WhatsApp"
style="
position: fixed;
bottom: 24px;
right: 24px;
z-index: 999;
width: 60px;
height: 60px;
border-radius: 50%;
background: #25D366;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 12px rgba(0,0,0,.2);
"
>
<svg width="30" height="30" viewBox="0 0 24 24" fill="white" aria-hidden="true">
<path d="M12.04 2c-5.46 0-9.91 4.45-9.91 9.91 0 1.75.46 3.45 1.32 4.95L2.05 22l5.25-1.38a9.87 9.87 0 0 0 4.74 1.21h.01c5.46 0 9.9-4.45 9.9-9.91 0-2.65-1.03-5.14-2.9-7.01A9.82 9.82 0 0 0 12.04 2Z"/>
</svg>
</a>Bu sürüm, telefon/sohbet simgesini SVG olarak satır içine gömerek ayrı bir ikon dosyasına ihtiyaç duymuyor, yani gerçekten kendi kendine yeten tek bir blok: </body>’den önce yapıştırın, başka yükleyecek bir şey yok. Yine de elle halletmeniz gereken dört şeyi geride bırakıyor ve gerçek oluşturucunun işe yaradığı yer de tam olarak burası.
Mobil ve masaüstü aynı şekilde davranmaz ve bu parçadaki hiçbir şey bunu kontrol etmez. WhatsApp yüklü bir telefonda bir wa.me bağlantısına tıklayın, uygulamayı doğrudan açar. Uygulama yüklü değilse, ziyaretçiyi bunun yerine uygulama mağazasına gönderir; bağlantının kendisinden yapılandırabileceğiniz bir yedek mesaj veya alternatif iletişim yöntemi yoktur. Masaüstü tarayıcısında ise yeni bir sekmede web.whatsapp.com açar, bu da ancak ziyaretçi o tarayıcıda zaten WhatsApp Web’e giriş yapmışsa işe yarar; aksi halde neden orada olduğuna dair hiçbir bağlam olmadan bir QR koduna bakakalırlar. Bu üç sonucun hepsi aynı href’ten gelir. Hangisinin gerçekleşeceğini tespit edemez veya sade HTML ile araya giremezsiniz.
Önceden doldurulmuş mesaj bir form alanında değil, URL’nin içinde yaşar. Değiştirmek istediğinizde yeniden elle kodlamaya, bağlantının yapıştırıldığı her sayfayı bulmaya ve paylaşılan bir şablonunuz yoksa oradaki mesajı da değiştirmeye geri dönersiniz.
SVG yolunu elle düzenlemeden değiştirebileceğiniz bir ikon dosyası yoktur ve satır içi stil bloğuna, satır satır, doğrudan dokunmadan düğmeyi yeniden konumlandırmanın, boyutlandırmanın veya renklendirmenin bir yolu yoktur.
Burada hiçbir şey sohbet açılmadan önce bir potansiyel müşteri bilgisi yakalamaz. Bağlantı (veya düğme), tıklandığı anda doğrudan WhatsApp’a gider. Konuşma başlamadan önce bir isim ve iletişim nedeni almak istiyorsanız, bu, sizin kendinizin inşa etmeniz, bağlamanız ve bir şekilde text parametresine aktarmanız gereken ayrı bir formdur.
WhatsApp Sohbet Widget Oluşturucu, sizin bakımını yapacağınız bir CSS bloğu yerine aynı birkaç ayarı tek bir komut dosyası etiketine dönüştüren ücretsiz bir araçtır. Numaranızı belirleyin, bir renk seçin, konumu ve ofsetleri ayarlayın, bir selamlama yazın ve isteğe bağlı olarak WhatsApp penceresi hiç açılmadan önce bağlam toplayan bir ön sohbet formunu (zorunlu veya değil olarak işaretlenmiş e-posta ya da telefon içeren kısa bir soru) açın. Araç şunu üretir:
<script src="https://cdn.thechatquotient.com/widget/v1/widget.js"
data-widget-id="wgt_xxxxxxxx"
data-whatsapp-number="15551234567"
data-color="#128C7E"
data-position-vertical="bottom"
data-position-horizontal="left"
data-offset-vertical="24"
data-offset-horizontal="24"
data-z-index="999"
data-greeting="Hi! Ask us anything."
data-prechat="true"
data-prechat-title="Before we chat"
data-prechat-description="Tell us what you need help with."
async
defer
></script>Her ayar tek bir satırda etiketlenmiş bir data- özniteliğidir, bu yüzden selamlamayı değiştirmek veya düğmeyi diğer köşeye taşımak, bir CSS dosyasında avlanmak değil, etiketi formdan yeniden kopyalamak demektir. İkon, konumlandırma mantığı, mobil ile masaüstü arasındaki derin bağlantı işleme ve ön sohbet formu, etiketin işaret ettiği barındırılan komut dosyasında yaşar; bu da yukarıdaki ham HTML’in, siz kendiniz yazmadan tek başına yapamayacağı şeydir.
Oluşturulmuş bir parçayı yapıştırıyor ve elle değiştirmeden önce her satırın neyi kontrol ettiğini bilmek istiyorsanız, işte etiketin kabul ettikleri:
| Öznitelik | Kontrol ettiği |
|---|---|
data-widget-id | Oluşturucu tarafından verilen benzersiz kimlik, bunu düzenlemeyin |
data-whatsapp-number | Hedef numara, uluslararası biçim, + yok |
data-color | Düğme arka planı, herhangi bir onaltılık değer |
data-position-vertical | top veya bottom |
data-position-horizontal | left veya right |
data-offset-vertical / data-offset-horizontal | O kenardan piksel mesafesi |
data-z-index | Yığılma sırası, başka bir sabit konumlu öğe düğmeyi örtüyorsa yükseltin |
data-greeting | Önceden doldurulmuş mesaj metni, elle URL kodlaması gerekmez |
data-prechat | Sohbet açılmadan önce kısa bir form göstermek için true |
data-prechat-title / data-prechat-description / data-prechat-question | Ön sohbet formunda gösterilen metin |
Hem ham HTML hem de oluşturulmuş komut dosyası etiketi aynı yere gider: her sayfada işlenen bir yere, tercihen </body>’den hemen önce.
theme.liquid, </body>’nin hemen üstüne, Çevrimiçi Mağaza → Temalar → Kodu Düzenle üzerinden.Ham HTML bağlantısı bir WhatsApp Business hesabı gerektiriyor mu?
Hayır. Kişisel bir WhatsApp numarası, bir wa.me bağlantısıyla tıpkı bir Business numarası gibi çalışır. Katalog veya otomatik yanıtlar gibi Business’a özgü özellikler bağlantının kendisinin bir parçası değildir.
Düğmem neden bir ikon yerine bozuk bir görsel gösteriyor?
Bu, HTML o yola yüklenmemiş harici bir ikon dosyasına (<img src="/whatsapp-icon.svg">) referans verdiğinde olur. Yukarıdaki satır içi SVG sürümü, ikon doğrudan HTML’in içine yazıldığı için bunu tamamen önler.
Widget HTML’ini bir <head> etiketinin içine koyabilir miyim?
Teknik olarak, <head> içeriği görüntülenmediği için, bağlantı (anchor) etiketinin kendisinin <body> içinde işlenmesi gerekir. Komut dosyaları <head>’den yüklenebilir, ancak parçayı </body>’den hemen önce yerleştirmek işleme engelini önler ve çoğu site oluşturucunun beklediği örüntüdür.
Bir sayfaya kaç tane WhatsApp widget’ı ekleyebileceğimin bir sınırı var mı? İki tane yapıştırmanızı engelleyen bir şey yok, ama aynı köşede üst üste yığılmış iki kayan düğme genellikle bir özellik değil, bir hata gibi görünür. İki numaraya ihtiyacınız varsa (örneğin satış ve destek), bunları üst üste bindirmek yerine her birine ayrı bir konum verin.
Bu Squarespace’te de aynı şekilde çalışır mı? Squarespace’in Kod Ekleme paneli (Ayarlar → Gelişmiş altında), WordPress’in Özel HTML bloğunun kabul ettiği gibi her iki sürümü de kabul eder; altbilgiye ekleme, onu tek bir yerde site genelinde uygular.
Bir WhatsApp widget’ının literal HTML’i tek bir <a href="https://wa.me/..."> etiketidir, artık elinizde. Bunu insanların genellikle aklında canlandırdığı, markalı, potansiyel müşteri yakalayan kayan düğmeye dönüştürmek ise ya CSS’i ve uç durumları kendinizin yazıp bakımını yapmasını, ya da WhatsApp Sohbet Widget Oluşturucu’nün bitmiş komut dosyası etiketini tek bir yapıştırmayla üretmesine izin vermeyi gerektirir; ücretsiz, hesap gerekmeden.
Chrome uzantısını ekleyin ve işletmeniz için WhatsApp sohbet yönetimini dönüştürün.