Cara Menambahkan Tombol Obrolan Bisnis Apple ke Situs WordPress Anda

Diterbitkan: 2021-03-01

Apple Message adalah fitur yang memungkinkan webmaster untuk menambahkan tombol obrolan bisnis dan tombol telepon/panggilan ke situs web mereka. Ini sangat berguna dan nyaman karena pengguna dapat menghubungi pemilik situs web secara langsung untuk meminta bantuan. Oleh karena itu, sebagai pemilik situs web, Anda harus menambahkan tombol obrolan bisnis ke situs web WordPress Anda untuk meningkatkan pengalaman pengguna.

Daftar Isi sembunyikan

1. Langkah 1: Daftar ke Obrolan Bisnis
2. Langkah 2: Tambahkan Pustaka Javascript
1. 2.1. Metode 1: Edit kode di file tema
2. 2.2. Metode 2: Menggunakan plugin Slim SEO
3. Langkah 3: Tampilkan Tombol Obrolan Bisnis di Posisi yang Diinginkan
4. Kata-Kata Terakhir

Selama implementasi, Anda perlu menggunakan beberapa kode HTML, sehingga relatif sulit bagi yang tidak paham teknologi. Tapi jangan khawatir karena kami akan memandu Anda melalui proses ini langkah demi langkah.

Catatan : Tombol obrolan bisnis hanya tersedia di perangkat Apple. Jika pengguna tidak menggunakan perangkat ini, tombol akan disembunyikan.

Langkah 1: Mendaftar untuk Obrolan Bisnis

Pertama, buka halaman Daftar Bisnis Apple dan daftar untuk Obrolan Bisnis dengan ID Apple Anda. Ini cukup mudah, jadi saya tidak akan membahas detailnya.

Sekarang, Anda sudah memiliki ID Obrolan Bisnis Anda sendiri. Simpan ID ini di suatu tempat karena Anda akan membutuhkannya di langkah berikutnya.

Langkah 2: Tambahkan Perpustakaan Javascript

Selanjutnya Anda harus menambahkan Javascript Library untuk menampilkan tombol Business Chat ke website. Ada dua metode untuk melakukannya:

Metode 1: Edit kode di file tema

Temukan <head></head> atau </body> di file tema Anda. Lokasi mereka akan berbeda tergantung pada tema. Sebagai contoh, saya menggunakan tema Justread, jadi <head><head> ada di file header.php , dan </body> ada di file footer.php .

Setelah Anda menemukan tag di atas, tambahkan kode ini sebelum </body> atau ke dalam <head><head> :

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

Metode 2: Menggunakan plugin Slim SEO

Selain mengedit kode di file tema, Anda dapat menggunakan plugin Slim SEO untuk menambahkan kode tanpa harus pergi ke file tema dan mencari <head><head> dan </body> .

Slim SEO benar-benar gratis, sehingga Anda dapat menemukannya di wordpress.org dengan mudah. Di Dasbor Admin , buka Plugins > Add New , lalu instal dan aktifkan plugin seperti biasa.

Slim SEO – Plugin SEO WordPress Cepat & Otomatis

Pengarang: eLightUp

Versi Saat Ini: 3.11.1

Terakhir Diperbarui: 16 November 2021

slim-seo.3.11.1.zip

92% Peringkat 10.000+ Menginstal WP 4.5+ Membutuhkan

Setelah itu, masuk ke Settings > Slim SEO dan tambahkan kode di atas ke bagian Header Code atau Body Code .

Dan jangan lupa klik Simpan .

Selain itu, Slim SEO memiliki banyak fitur berguna lainnya untuk membantu Anda mengoptimalkan situs web WordPress secara otomatis untuk SEO. Anda dapat mempelajari lebih lanjut tentang fitur-fitur ini di sini.

Langkah 3: Tampilkan Tombol Obrolan Bisnis di Posisi yang Diinginkan

Pada langkah terakhir ini, Anda perlu menampilkan tombol Obrolan Bisnis di area widget yang Anda inginkan. Ini dapat dilakukan dengan menambahkan beberapa kode HTML ke widget. Kode HTML harus memiliki struktur berikut:

 <div class="nama-kelas-apel" nama-atribut-apel ></div>

Saya membuat contoh dengan atribut berupa data-apple-business-id . Apakah Anda ingat ID yang diambil pada langkah 1? Sekarang, saatnya untuk menggunakannya. ID saya adalah ca0db090 dan saya ingin menambahkan tombol obrolan di spanduk container-style , jadi tag <div> adalah:

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

Perhatikan bahwa atribut data-apple-business-id diperlukan. Ini digunakan untuk menentukan pemilik ID Obrolan Bisnis dan mengirim pesan Anda kepada mereka.

Selain itu, ada banyak kelas dan atribut lain yang dapat Anda gunakan untuk kode HTML. Anda dapat menemukan kelas dan atribut paling populer dalam daftar di bawah ini:

Kelas untuk menampilkan tombol obrolan atau panggilan:

apple-business-chat-banner-container : menampilkan tombol obrolan dan panggilan
apple-business-chat-message-container : hanya menampilkan tombol obrolan
apple-business-chat-phone-container : hanya menampilkan tombol panggilan
dll

Atribut untuk menyesuaikan tampilan tombol obrolan / panggilan (warna, font, ukuran, ...)

data-apple-banner-font-family : pilih font keluarga untuk tombol Ajakan bertindak
data-apple-banner-icon-background-color : pilih warna latar belakang (lingkaran) dari ikon
data-apple-banner-icon-color : pilih warna tombol obrolan dan panggilan
Dll.

Atribut yang berhubungan dengan interaksi antara pelanggan dan pemilik website:

data-apple-business-group-id : menentukan departemen yang menerima panggilan/pesan. Misalnya, Anda dapat menetapkan ID departemen "Layanan Pelanggan" atau "Dukungan Teknis" ke atribut ini.
Data-apple-business-phone : Masukkan nomor telepon yang digunakan pengguna untuk menghubungi Anda jika mereka tidak dapat mengobrol. Jika Anda tidak menambahkan atribut ini, tombol Panggil akan disembunyikan.
Dll.

Selain itu, Anda dapat menemukan semua atribut dan kelas Apple di sini.

Setelah memiliki tag <div> diperlukan, tambahkan tag ke posisi yang diinginkan menggunakan editor HTML. Misalnya, saya ingin menampilkan tombol Obrolan Bisnis di widget di footer tema Justread dan inilah caranya.

Di Dasbor Admin , buka Appearance > Widget , pilih widget HTML Kustom , lalu pilih untuk menampilkan widget di footer.

Selanjutnya, masukkan kode berikut ke widget:

 <div>
	class="apple-business-chat-banner-container"
	data-apel-bisnis-
	data-apple-business-phone="0987725475"
	data-apple-banner-cta="Ada pertanyaan? Kami dapat membantu."
	data-apple-banner-context="Obrolan dengan salah satu profesional kami untuk mendapatkan penawaran Anda untuk iPhone Xs."
	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>

Terakhir, klik Simpan .

Kami telah selesai menampilkan tombol Obrolan Bisnis di footer situs WordPress. Mulai sekarang, pengguna Apple akan melihat tampilan tombol Business Chat di footer seperti ini:

Anda dapat menata tombol dan menampilkannya di posisi lain dengan cara yang sama dengan kode, kelas, dan atribut di atas. Cobalah, dan tunjukkan pada kami di bagian komentar!

Kata-kata terakhir

Menggunakan kode untuk menambahkan tombol Obrolan Bisnis ke situs WordPress mungkin cukup sulit bagi pemula WordPress. Tetapi jika Anda mengikuti tutorial ini dengan ketat, itu pasti akan berhasil. Setelah Anda memiliki tombol Obrolan Bisnis di situs Anda, jangan lupa untuk membalas panggilan dan pesan pelanggan. Ini akan membantu membangun kepercayaan antara pelanggan dan pemilik situs web, sehingga meningkatkan merek Anda dan meningkatkan konversi.

Selain menambahkan tombol obrolan bisnis, Anda juga dapat menambahkan tombol obrolan langsung dan tombol obrolan pelanggan Facebook ke situs web WordPress Anda. Fitur-fitur ini membantu Anda menjawab pertanyaan pelanggan dengan lebih cepat.