Mengatur pengalih bahasa di situs web Bubble.io dapat memudahkan pengguna untuk beralih bahasa. Fitur ini sangat berharga untuk aplikasi dengan audiens global, memungkinkan pengguna berinteraksi dengan platform dalam bahasa pilihan mereka. Bubble.io, platform pengembangan no-code yang populer, menawarkan kemampuan lokalisasi bawaan yang memungkinkan pengembang membuat aplikasi multibahasa tanpa pengetahuan coding yang luas.
Untuk menerapkan pengalih bahasa di Bubble.io, pengembang biasanya mulai dengan menentukan bahasa yang ingin mereka dukung di pengaturan aplikasi. Mereka kemudian membuat elemen dropdown atau tombol yang dapat berinteraksi dengan pengguna untuk mengubah bahasa. Dalam artikel ini, kita akan membahas cara menyiapkan pengalih bahasa di Bubble.io dengan salah satu situs layanan terjemahan otomatis.
Mengapa pengalih bahasa penting di situs web Bubble.io?
Menambahkan pengalih bahasa di situs web bukan tanpa alasan. Berikut alasan mengapa Anda perlu menyiapkannya di situs web Bubble .
- Memudahkan pengguna di negara lain: Pengalih bahasa memungkinkan pengguna internasional untuk melihat situs web dalam bahasa asli mereka. Misalnya, pengguna Spanyol yang mengunjungi toko online dapat beralih ke bahasa Spanyol, sehingga lebih mudah memahami detail produk dan menyelesaikan pembelian. Studi CSA Research menunjukkan bahwa 76% pembeli online lebih memilih membeli produk ketika informasi tersedia dalam bahasa mereka, yang menyoroti pentingnya fitur ini untuk kenyamanan dan aksesibilitas pengguna.
- Mengoptimalkan situs web di hasil pencarian negara lain: Dengan pengalih bahasa, situs Bubble.io Anda dapat menempati peringkat lebih baik dalam pencarian bahasa asing. Misalnya, versi bahasa Prancis dari situs Anda lebih mungkin muncul dalam pencarian Google berbahasa Prancis. Visibilitas yang meningkat ini dapat secara signifikan meningkatkan lalu lintas internasional.
- Meningkatkan konversi penjualan: Menyediakan konten dalam berbagai bahasa dapat meningkatkan penjualan. Platform kursus online yang memungkinkan pengguna beralih bahasa dapat menarik audiens yang lebih luas dan meningkatkan pendaftaran. Pendekatan ini efektif karena konsumen lebih cenderung membeli dari situs web yang menyediakan informasi dalam bahasa asli mereka, yang secara langsung memengaruhi tingkat konversi Anda.
- Meningkatkan keterlibatan dan retensi pengguna: Pengalih bahasa dapat membuat pengguna bertahan lebih lama di situs Anda. Misalnya, pengguna yang berinteraksi dalam bahasa pilihan mereka di aplikasi jejaring sosial cenderung tetap terlibat lebih lama. Peningkatan keterlibatan ini signifikan, karena pengguna biasanya menghabiskan waktu dua kali lebih lama di situs dalam bahasa asli mereka dibandingkan situs dalam bahasa kedua, sehingga menghasilkan retensi pengguna yang lebih baik.
Cara menyiapkan language switcher di Bubble.io
Sekarang setelah kita memahami pentingnya mengganti bahasa di situs web Bubble.io multibahasa, mari kita bahas cara menerapkannya. Layanan terjemahan situs web biasanya menawarkan fitur ini, yang dapat disesuaikan dengan kebutuhan pengguna.
Namun, tidak semua layanan terjemahan menawarkan pengalih bahasa yang dapat disesuaikan dan ramah pengguna. Oleh karena itu, memilih layanan terjemahan otomatis yang kompatibel dengan berbagai framework dan menyediakan fitur pengalihan bahasa yang fleksibel sangatlah penting.
Salah satu layanan terjemahan otomatis yang memenuhi kriteria ini adalah Linguise. Linguise terjemahan otomatis menawarkan fitur pengalih bahasa yang sangat dapat disesuaikan dan mudah digunakan yang terintegrasi dengan CMS dan pembuat web populer seperti Bubble.io.
Linguise menyediakan integrasi yang mulus dengan Bubble, memungkinkan pengembang untuk dengan mudah memasukkan pengalihan bahasa ke dalam aplikasi multibahasa mereka. Dengan memanfaatkan fitur canggih dan antarmuka yang ramah pengguna dari Linguise, Anda dapat menyederhanakan penyiapan dan pemeliharaan pengalih bahasa di situs web Bubble Anda.
Berikut adalah langkah-langkah untuk menginstal Linguise di situs web Bubble.io dan menyiapkan pengalih bahasa.
Langkah 1: Daftarkan akun Linguise
Mulai dengan membuat Linguise akun gratis dan menambahkan domain situs web Anda. Anda dapat memanfaatkan uji coba gratis 30 hari sebelum memilih paket langganan.
Kemudian, Anda perlu mendaftarkan domain Anda untuk mengotorisasi terjemahan. Salin nama domain Anda, termasuk “https://,” dan pilih “other” sebagai platform.
Selanjutnya, pilih bahasa sumber dan bahasa target Anda.
Langkah 2: Tambahkan DNS secara otomatis menggunakan Entri
Setelah mendaftarkan situs web Anda di dasbor Linguise , Anda akan memiliki dua opsi instalasi.
Untuk penambahan catatan DNS secara otomatis, klik “Hubungkan DNS Anda secara otomatis.” Fitur ini, yang disebut Entri, menyederhanakan proses instalasi dengan mengelola catatan DNS untuk Anda. Sebagai alternatif, Anda dapat menyalin catatan DNS secara manual ke penyedia domain Anda.
Mengklik tombol akan meminta Entri menganalisis URL situs web Anda yang terdaftar dan memeriksa catatan DNS publik Anda, mengidentifikasi penyedia dan catatan DNS yang diperlukan.
Selanjutnya, klik “Otorisasi dengan [penyedia domain Anda]” (misalnya, Cloudflare). Tindakan ini akan mengalihkan Anda ke halaman login penyedia domain Anda, tempat Anda dapat masuk dan melanjutkan.
Setelah masuk, Entri akan secara otomatis menambahkan catatan DNS yang sesuai—satu DNS per bahasa dan satu TXT DNS untuk kunci validasi—ke domain Anda.
Setelah otorisasi, Entri akan memberi tahu Anda bahwa semua pengaturan DNS telah berhasil dikonfigurasi. Fitur terjemahan dapat digunakan setelah semua entri DNS tersebar di domain Anda, biasanya memakan waktu 20 hingga 30 menit.
Untuk instalasi manual, Anda dapat mengikuti langkah-langkah yang diberikan di bawah ini.
Langkah 3: Salin catatan DNS
Untuk instalasi manual, Anda akan diarahkan ke layar yang menampilkan catatan DNS yang diperlukan untuk menyiapkan halaman multibahasa Anda, seperti fr.domain.com atau es.domain.com.
Salin elemen-elemen ini ke konfigurasi DNS BubbleAnda.
Selanjutnya, akses pengelola domain Anda dan buka area pengaturan DNS. Ikuti petunjuk untuk menyalin:
- Satu catatan TXT untuk verifikasi domain
- Satu atau beberapa catatan CNAME untuk bahasa-bahasa tersebut
Berikut adalah contoh untuk setiap jenis record (TXT dan CNAME).
Setelah Anda menambahkan semua catatan, konfigurasi Anda akan terlihat seperti ini.
Langkah 4: Verifikasi DNS
Setelah menambahkan semua catatan Anda ke DNS domain, klik tombol “Periksa konfigurasi DNS” untuk memverifikasi propagasi DNS.
Validasi DNS biasanya memakan waktu sekitar 30 menit hingga 1 jam. Setelah selesai, Anda akan melihat indikator hijau di samping daftar DNS di dasbor Linguise . Anda hampir siap untuk menerjemahkan situs web Bubble.io Anda; yang tersisa hanyalah menautkan ke pengalih bahasa dengan bendera negara.
Langkah 5: Aktifkan dan language switcher
Pengalih bahasa adalah popup bendera yang memungkinkan pengguna memilih bahasa pilihan mereka. Untuk menerapkannya, salin kode yang disediakan di akhir proses pendaftaran domain atau di dalam pengaturan domain ke header halaman situs Bubble.io Anda. Pengalih bahasa bendera kemudian akan otomatis muncul di situs web publik Anda.
Selanjutnya, buka Bubble . Klik 'Pengaturan' di menu sidebar sebelah kiri dan pilih “SEO / metatag.”
Gulir ke bawah ke “Script/meta tags in header” di bawah “Advanced Settings.” Tempelkan Linguise script yang Anda salin sebelumnya, lalu klik ‘Save’ dan publikasikan situs Anda.
Langkah 5: Konfigurasikan tampilan utama
Untuk memulai pengaturan pengalih bahasa, navigasikan ke “Pengaturan” > “Tampilan bendera bahasa” di Linguise . Di halaman ini, Anda dapat menyesuaikan beberapa pengaturan.
- Gaya ikon bendera: Pilih dari tiga opsi: tampilan berdampingan, menu dropdown, atau popup.
- Posisi: Pilih di mana pengalih bahasa akan muncul di situs Anda. Tersedia berbagai pilihan posisi; pastikan mudah diakses oleh pengunjung.
Anda dapat menggabungkan tampilan bendera dan nama bahasa, bendera dan singkatan bahasa, atau hanya nama bahasa. Menggunakan bendera dan nama bahasa sekaligus disarankan agar lebih mudah dikenali pengguna.
Langkah 6: Tentukan desain bendera
Setelah mengonfigurasi tampilan utama, sesuaikan lebih lanjut desain bendera yang akan ditampilkan.
- Nama bahasa yang ditampilkan: Anda dapat memilih untuk menampilkan nama bahasa berdasarkan nama negara atau nama bahasa itu sendiri. Misalnya, Anda dapat menampilkan “French” atau “Français.”
- Jenis bendera Inggris: Opsi ini berguna untuk bahasa dengan berbagai variasi, seperti Inggris AS atau Inggris Britania (dan juga berlaku untuk Spanyol, Taiwan, Jerman, dan Portugis).
- Gaya bendera: Pilih bentuk ikon bendera, bulat atau persegi panjang.
Langkah 7: Sesuaikan warna dan ukuran
Setelah mengonfigurasi desain bendera, Anda dapat menyesuaikan lebih lanjut warna dan ukuran bendera. Berikut adalah pengaturan yang dapat Anda sesuaikan:
- Radius batas bendera: Sesuaikan radius dalam piksel untuk gaya bendera persegi panjang.
- Warna nama bahasa: Pilih warna teks default untuk menampilkan nama bahasa.
- Warna bahasa popup: Atur warna teks judul bahasa di area popup atau dropdown.
- Ukuran bendera: Sesuaikan ukuran ikon bendera.
- Warna teks saat kursor diarahkan ke nama bahasa: Atur warna teks yang muncul saat pengguna mengarahkan kursor ke nama bahasa.
- Warna teks saat mengarahkan kursor ke judul bahasa pada popup: Atur warna teks yang muncul saat pengguna mengarahkan kursor ke judul bahasa di area popup atau dropdown.
Langkah 8: Mengatur bayangan kotak bendera
Terakhir, Anda dapat menyesuaikan pengaturan bayangan kotak bendera. Opsi pertama memungkinkan Anda menerapkan efek bayangan pada setiap ikon bendera yang ditampilkan di situs web Anda. Opsi berikutnya mengontrol efek bayangan saat pengguna mengarahkan mouse ke bendera bahasa.
Setelah Anda melakukan semua penyesuaian yang diinginkan, klik tombol Simpan untuk menerapkan perubahan kustomisasi. Kemudian, kunjungi situs web Bubble Anda untuk memverifikasi bahwa konfigurasi telah berhasil diterapkan. Beginilah tampilan pengalih bahasa.
Setelah penyiapan, Anda dapat melihat cara kerja pengalih bahasa di situs web Bubble multibahasa Anda.
Selanjutnya, Anda dapat menerjemahkan situs web ke bahasa lain seperti bahasa Spanyol.
Praktik terbaik untuk mengoptimalkan pengalih bahasa di Bubble
Setelah berhasil menyiapkan pengalih bahasa di situs web multibahasa Bubble , penting untuk mempertimbangkan tips mengoptimalkan pengalih bahasa bagi situs dan pengunjung Anda.
Gunakan logo bendera bahasa yang mudah dikenali
Saat menerapkan pengalih bahasa di situs web Bubble.io Anda, penggunaan bendera atau ikon bahasa yang mudah dikenali sangatlah penting. Petunjuk visual ini membantu pengguna dengan cepat mengidentifikasi dan memilih bahasa yang mereka inginkan. Misalnya, ikon globe dipahami secara universal untuk mewakili pilihan bahasa. Alternatifnya, Anda bisa menggunakan bendera negara, tetapi ketahuilah bahwa ini terkadang bisa bermasalah karena bahasa tidak selalu terkait dengan satu negara.
Contoh: Situs web Amazon menggunakan ikon globe kecil di samping bahasa yang sedang dipilih (misalnya, “EN”) di bilah navigasi atas. Pendekatan yang sederhana namun efektif ini memungkinkan pengguna untuk dengan cepat menemukan opsi bahasa terlepas dari pengaturan bahasa mereka saat ini.
Gabungkan nama bahasa bersama bendera
Meskipun bendera dapat membantu, bendera tidak boleh digunakan sendirian. Menyertakan nama bahasa dalam aksara aslinya di samping bendera atau ikon memberikan kejelasan dan menghindari potensi kebingungan. Hal ini sangat penting untuk bahasa yang digunakan di berbagai negara atau wilayah.
Contoh: Pengalih bahasa di situs web Airbnb menampilkan nama bahasa dan bendera negara. Misalnya, ini menampilkan “English (US)” dengan bendera AS, dan “Français” dengan bendera Prancis. Kombinasi ini memastikan pengguna dapat mengidentifikasi opsi bahasa pilihan mereka secara akurat.
Posisikan tombol pengalih bahasa dengan cermat
Penempatan pemilih bahasa Anda sangat penting untuk aksesibilitas pengguna. Lokasi umum meliputi sudut kanan atas header, di footer, atau di dalam menu navigasi utama. Kuncinya adalah membuatnya mudah ditemukan tanpa mengacaukan area konten utama.
Contoh: Di situs web tiffany.com, pengalih bahasa berada di sudut kanan bawah halaman, selalu terlihat dan dapat diakses. Penempatan yang konsisten ini memastikan pengguna dapat dengan cepat menemukan dan menggunakan opsi bahasa di mana pun mereka berada di situs.
Rancang pengalih bahasa agar responsif
Pastikan pengalih bahasa Anda berfungsi dengan baik di semua perangkat, dari komputer desktop hingga ponsel pintar. Pada layar yang lebih kecil, Anda mungkin perlu menyesuaikan desainnya – misalnya, menggunakan menu dropdown alih-alih daftar opsi horizontal.
Contoh: Pengalih bahasa situs web UNESCO beradaptasi dengan indah di berbagai perangkat. Di desktop, ini muncul sebagai daftar horizontal di header. Di seluler, ini berubah menjadi menu dropdown yang ringkas, memastikan kegunaan tanpa mengorbankan tata letak seluler.
Pastikan pengalih bahasa konsisten di semua halaman
Pertahankan desain, fungsionalitas, dan posisi yang sama dari pengalih bahasa Anda di semua halaman situs Bubble.io Anda. Konsistensi ini membantu pengguna menavigasi situs Anda dengan lebih efisien, karena mereka tahu persis di mana menemukan opsi bahasa terlepas dari halaman mereka saat ini.
Contoh: Situs web mempertahankan pengalih bahasanya secara konsisten di footer di semua halaman, dari halaman beranda hingga halaman produk dan proses checkout. Konsistensi ini memastikan pengguna dapat dengan mudah mengganti bahasa kapan saja selama pengalaman menjelajah atau berbelanja mereka.
Siapkan pengalih bahasa di situs web multibahasa Bubble menggunakan Linguise!
Sekarang, Anda sudah memahami cara memilih bahasa untuk situs web multibahasa Bubble.io. Membaca pemilih bahasa dapat memberikan berbagai manfaat dan selanjutnya mengarah pada optimalisasi berdasarkan poin-poin yang telah disebutkan sebelumnya.
Mengoptimalkan pemilih bahasa secara efektif dapat meningkatkan pengalaman pengguna secara signifikan. Daftar untuk akun Linguise , integrasikan dengan situs web Bubble.io Anda, dan sesuaikan pemilih bahasa untuk meningkatkan pengalaman pengguna.
