WordPress Web Sitenize Apple İş Sohbet Düğmesi Nasıl Eklenir

Yayınlanan: 2021-03-01

Apple Message, web yöneticilerinin web sitelerine iş sohbet düğmesi ve telefon/arama düğmesini eklemelerine olanak tanıyan bir özelliktir. Kullanıcılar yardım istemek için doğrudan web sitesi sahipleriyle iletişime geçebildikleri için çok kullanışlı ve kullanışlıdır. Bu nedenle, bir web sitesi sahibi olarak, kullanıcı deneyimini artırmak için mutlaka WordPress web sitenize iş sohbeti butonunu eklemelisiniz .

İçindekiler gizle
  1. 1. Adım 1: Business Chat'e kaydolun
  2. 2. Adım 2: Javascript Kitaplığını ekleyin
    1. 2.1. Yöntem 1: Tema dosyasındaki kodu düzenleyin
    2. 2.2. Yöntem 2: Slim SEO eklentisini kullanma
  3. 3. Adım 3: İş Sohbeti Düğmesini İstenen Konumda Görüntüleyin
  4. 4. Son Sözler

Uygulama sırasında, bazı HTML kodları kullanmanız gerekir, bu nedenle teknoloji meraklısı olmayanlar için nispeten zordur. Ancak endişelenmeyin çünkü bu süreçte size adım adım yol göstereceğiz.

Not : İş sohbeti düğmesi yalnızca Apple cihazlarında kullanılabilir. Kullanıcılar bu cihazları kullanmazsa düğme gizlenir.

1. Adım: Business Chat'e kaydolun

İlk olarak, Apple İşletme Kayıt sayfasına gidin ve Apple Kimliğinizle İş Sohbetine kaydolun. Oldukça kolay, bu yüzden ayrıntılara girmeyeceğim.

Apple İşletme Kaydı sayfasına gidin ve Apple Kimliğinizle İş Sohbetine kaydolun

Artık, zaten kendi Business Chat ID'niz var. Bu kimliği bir yere kaydedin çünkü bir sonraki adımda ihtiyacınız olacak.

2. Adım: Javascript Kitaplığını ekleyin

Ardından, Web sitesine İş Sohbeti düğmesini görüntülemek için Javascript Kitaplığı eklemelisiniz. Bunu yapmanın iki yöntemi vardır:

Yöntem 1: Tema dosyasındaki kodu düzenleyin

Tema dosyanızda <head></head> veya </body> etiketlerini bulun. Konumları temaya bağlı olarak farklı olacaktır. Örneğin, Justread temasını kullanıyorum, bu nedenle <head><head> etiketi header.php dosyasında ve </body> etiketi footer.php dosyasında.

Yukarıdaki etiketleri bulduktan sonra, bu kodu </body> etiketinin önüne veya <head><head> etiketinin içine <head><head> :

 <script src="https://static.cdn-apple.com/businesschat/start-chat-button/2/index.js"></script>

Yöntem 2: Slim SEO eklentisini kullanma

Tema dosyasındaki kodu düzenlemek dışında, tema dosyasına gitmeden ve <head><head> ve </body> etiketlerini aramadan kodu eklemek için Slim SEO eklentisini kullanabilirsiniz.

Slim SEO tamamen ücretsizdir, bu nedenle wordpress.org'da kolayca bulabilirsiniz. Yönetici Panosu'nda Eklentiler > Yeni Ekle seçeneğine gidin ve ardından eklentiyi her zamanki gibi kurun ve etkinleştirin.

İnce SEO – Hızlı ve Otomatik WordPress SEO Eklentisi İnce SEO – Hızlı ve Otomatik WordPress SEO Eklentisi

Yazar(lar): eLightUp

Mevcut Sürüm: 3.11.1

Son Güncelleme: 16 Kasım 2021

ince-seo.3.11.1.zip

%92 Derecelendirme 10.000+ Yükleme WP 4.5+ Gerekiyor

Daha sonra Ayarlar > Slim SEO bölümüne gidin ve yukarıdaki kodu Header Code veya Body Code bölümlerine ekleyin.

Apple iş sohbeti düğmesini görüntülemek için kodu eklemek için Slim SEO eklentisini kullanın

Ve Kaydet'e tıklamayı unutmayın.

Ek olarak, Slim SEO, WordPress web sitelerini SEO için otomatik olarak optimize etmenize yardımcı olacak birçok başka kullanışlı özelliğe sahiptir. Bu özellikler hakkında daha fazla bilgiyi buradan edinebilirsiniz.

3. Adım: İş Sohbeti Düğmesini İstenen Konumda Görüntüleyin

Bu son adımda, istediğiniz widget alanında İş Sohbeti düğmesini görüntülemeniz gerekir. Bu, widget'a bazı HTML kodları eklenerek yapılabilir. HTML kodu aşağıdaki yapıya sahip olmalıdır:

 <div class="elma-sınıfı-adı" elma-öznitelik-adı ></div>

data-apple-business-id şeklinde bir özniteliğe sahip bir örnek yapıyorum. 1. adımda alınan kimliği hatırlıyor musunuz? Şimdi, onu kullanma zamanı. Kimliğim ca0db090 ve container-style bir başlıkta sohbet düğmesini eklemek istiyorum, bu nedenle <div> etiketim :

 <div class="apple-business-chat-banner-container" data-apple-business-></div>

data-apple-business-id özelliğinin gerekli olduğunu unutmayın. Business Chat ID'nin sahibini belirlemek ve mesajlarınızı onlara göndermek için kullanılır.

Ayrıca, HTML kodu için kullanabileceğiniz başka birçok sınıf ve nitelik vardır. En popüler sınıfları ve özellikleri aşağıdaki listede bulabilirsiniz:

Sohbet veya arama butonlarını görüntülemek için sınıflar:

  • apple-business-chat-banner-container : hem sohbeti hem de çağrı düğmelerini görüntüleyin
  • apple-business-chat-message-container : yalnızca sohbet düğmesini görüntüle
  • apple-business-chat-phone-container : yalnızca arama düğmesini göster
  • vb

Sohbet / çağrı düğmelerinin görünümünü özelleştirmeye yönelik özellikler (renkler, yazı tipleri, boyut, …)

  • data-apple-banner-font-family : Harekete geçirici mesaj düğmesi için bir aile yazı tipi seçin
  • data-apple-banner-icon-background-color : data-apple-banner-icon-background-color plan rengini (daire) seçin
  • data-apple-banner-icon-color : sohbet ve çağrı düğmelerinin renklerini seçin
  • Vb.

Müşteriler ve web sitesi sahipleri arasındaki etkileşimle ilgili nitelikler:

  • data-apple-business-group-id : aramaları/mesajları alan departmanı belirleyin. Örneğin, bu özniteliğe “Müşteri Hizmetleri” veya “Teknik Destek” departmanlarının ID'sini atayabilirsiniz.
  • Data-apple-business-phone : Sohbet edemezlerse, kullanıcıların sizinle iletişim kurmak için kullandıkları telefon numarasını girin. Bu özelliği eklemezseniz, Ara düğmesi gizlenecektir.
  • Vb.

Ayrıca Apple'ın tüm özelliklerini ve sınıflarını burada bulabilirsiniz.

Gerekli <div> etiketlerine sahip olduktan sonra, HTML düzenleyicisini kullanarak bunları istediğiniz konuma ekleyin. Örneğin, Justread temasının alt kısmındaki bir widget'ta İş Sohbeti düğmesini görüntülemek istiyorum ve işte bunu yapmanın yolu.

Yönetici Panosu'nda Görünüm > Pencere Öğesi seçeneğine gidin, Özel HTML pencere aracını seçin ve ardından pencere öğesini alt bilgide görüntülemeyi seçin.

widget'ı WordPress web sitesinin altbilgisinde görüntüleyin

Ardından, widget'a aşağıdaki kodu ekleyin:

 <div>
	class="elma-iş-sohbet-banner-konteyner"
	veri-elma-iş-
	data-apple-business-phone="0987725475"
	data-apple-banner-cta="Sorularınız mı var? Yardımcı olabiliriz."
	data-apple-banner-context="iPhone Xs teklifinizi almak için uzmanlarımızdan biriyle sohbet edin."
	data-apple-banner-scale="1"
	data-apple-banner-background-color="rgb(27, 63, 104)"
	data-apple-banner-text-color="rgb(255, 255, 255)"
	data-apple-banner-icon-background-color="rgb(255, 255, 255)"
	data-apple-banner-icon-color="rgba(0, 210, 143, 0.3)"></div> 

İş sohbeti düğmesini eklemek için kodu kullanın

Son olarak, Kaydet'i tıklayın .

WordPress web sitesinin alt bilgisinde İş Sohbeti düğmesini görüntülemeyi bitirdik. Şu andan itibaren, Apple kullanıcıları Business Chat düğmesinin altbilgide şu şekilde görüntülendiğini görecekler:

WordPress web sitesinin alt bilgisinde İş Sohbeti düğmesini görüntüleyin.

Düğmeye stil verebilir ve yukarıdaki kod, sınıflar ve niteliklerle aynı şekilde diğer konumlarda görüntüleyebilirsiniz. Deneyin ve yorum bölümünde bize gösterin!

Son sözler

WordPress web sitesine İş Sohbeti düğmesini eklemek için kod kullanmak, WordPress'e yeni başlayanlar için oldukça zor olabilir. Ancak bu öğreticiyi sıkı bir şekilde takip ederseniz, kesinlikle işe yarayacaktır. Sitenize Business Chat butonu yerleştikten sonra müşterilerin aramalarına ve mesajlarına cevap vermeyi unutmayın. Müşteriler ve web sitesi sahibi arasında güven oluşturmaya yardımcı olacak, böylece markanızı iyileştirecek ve dönüşümü artıracaktır.

İş sohbeti düğmesini eklemeye ek olarak, WordPress web sitenize canlı sohbet düğmesini ve Facebook müşteri sohbeti düğmesini de ekleyebilirsiniz. Bu özellikler, müşteri sorularına daha hızlı yanıt vermenize yardımcı olur.