Cara Menyesuaikan Tampilan Chatbot Anda

Shoply AI Chat dan AI Search menyediakan lebih dari 40 opsi untuk menyesuaikan tampilan aplikasi.

Bagian ini memandu Anda melalui berbagai opsi kustomisasi yang tersedia untuk AI Chatbot Anda. Anda dapat mempersonalisasi tampilannya, desain jendela chat, dan pengalaman perpesanan agar sesuai dengan merek Anda.

Siap untuk memulai? Buka Customize AI Chat di Shoply AI Admin Console Anda, baik Anda menggunakan Shopify maupun platform situs web lainnya. Jika chatbot belum terlihat, ikuti checklist instalasi dan visibilitas.

Pratinjau Jendela Chat Anda

Coba tema yang sama dan ilustrasi lebar desktop yang digunakan di admin. Pilih tampilan terang atau gelap dan bandingkan seberapa banyak ruang yang digunakan jendela chat.

Untuk mengubah cara AI berbicara alih-alih tampilannya, lihat cara menyesuaikan kepribadian AI Anda.

Pilihan Ikon Chat

Select an icon

Anda dapat memilih ikon chat dari 17 ikon berbeda yang telah kami sediakan, atau mengunggah gambar sebagai ikon chat Anda sendiri

Warna dan Ukuran Ikon Chat

Primary Color

Ini adalah warna tema utama, dan juga digunakan sebagai warna teks yang disorot di jendela chat.

Jika Anda menggunakan mode terang di situs web Anda, silakan pilih warna selain putih sebagai warna tema Anda — ini untuk memastikan teks yang disorot tetap mudah dibaca dengan latar belakang terang. Jika Anda menggunakan mode gelap di situs web Anda, silakan pilih warna selain hitam sebagai warna tema Anda.

Complementary Color

Ini adalah warna pelengkap yang bekerja bersama warna utama Anda untuk membuat gradasi (transisi halus antara dua warna) pada ikon chat dan header jendela chat, sehingga ikon chat terlihat lebih menarik secara visual dan selaras dengan merek Anda.

Icon’s Line Color

Ini adalah warna garis tepi ikon chat.

Whether to remove the background color of the chat icon.

Ini sering kali berguna jika Anda mengunggah gambar sebagai ikon chat, dan Anda ingin menghapus warna latar belakang (warna utama) dari ikon chat.

Whether to remove the shadow of the chat icon.

Opsi ini memungkinkan Anda menghapus efek bayangan jatuh dari ikon chat untuk desain yang lebih datar dan minimalis. Ini sangat berguna jika toko Anda memiliki estetika yang bersih dan modern, atau jika Anda telah mengunggah ikon kustom yang sudah memiliki bayangan atau efek kedalamannya sendiri.

Floating Icon Size for desktop and mobile.

Di perangkat seluler, Anda mungkin ingin menetapkan ukuran yang lebih kecil untuk ikon chat agar tidak menghalangi tampilan pelanggan pada layar seluler.

Penempatan Ikon Chat

Chat icon positioning’s on desktop and on mobile.

Z-index of Chat Icon:

Gunakan nilai yang lebih tinggi jika Anda ingin ikon tetap berada di depan elemen UI lainnya.

Auto-hide chat icon on mobile

Sembunyikan ikon chat setelah jumlah detik tertentu di perangkat seluler.

Opsi ini hanya tersedia untuk perangkat seluler. Ini membantu mencegah ikon chat menghalangi tampilan pelanggan pada layar seluler.

Kustomisasi Jendela Chat

Saat Anda mengklik ikon chat Shoply AI, jendela chat akan muncul. Pelanggan dapat berinteraksi dengan Shoply AI melalui jendela chat tersebut.

Bagian ini akan memandu Anda melalui berbagai opsi yang tersedia untuk menyesuaikan jendela chat.

Color Theme (dark mode or light mode) of the chat window

Jika Anda memilih mode gelap, latar belakang jendela chat akan berwarna hitam dan warna font akan putih. Kami merekomendasikan untuk menggunakan opsi mode gelap jika tema toko Anda juga menggunakan mode gelap.

Width of the chat window on desktop

Opsi ini hanya berlaku untuk desktop. Di perangkat seluler, jendela chat selalu memenuhi seluruh layar.

Select the branding image and background image

Anda dapat memilih untuk mengunggah gambar branding dan gambar latar belakang Anda sendiri untuk jendela chat, atau cukup membiarkan Shoply AI membuat gambar tersebut untuk Anda.

Jika Anda memilih untuk menggunakan gambar yang dibuat AI, Shoply AI akan membuat gambar branding dan gambar latar belakang berdasarkan deskripsi toko Anda.

Adjust the transparency and aspect ratios of the background image for the chat window.

Gambar latar belakang di jendela chat dapat membuat teks di atasnya menjadi sulit dibaca. Oleh karena itu, secara default, kami menambahkan lapisan setengah transparan di atas gambar latar belakang.

Whether to remove Shoply AI’s Logo in Input Bar

Opsi ini memungkinkan Anda menghapus logo Shoply AI dari bilah input chat untuk pengalaman yang lebih bersih dan lebih sesuai merek. Ini sangat berguna jika Anda ingin mempertahankan identitas merek yang konsisten di seluruh toko Anda tanpa logo pihak ketiga, atau jika Anda lebih menyukai desain antarmuka chat yang lebih minimal.

Opsi ini hanya tersedia untuk paket berbayar.

Pesan yang Telah Ditentukan Sebelumnya untuk AI Chat

Anda juga dapat menetapkan atau mengedit pesan default yang membimbing pelanggan saat mereka pertama kali berinteraksi dengan chatbot Anda. Selain itu, Anda dapat mengonfigurasi opsi terjemahan untuk pesan-pesan tersebut (lihat halaman FAQ ini untuk detail lebih lanjut).

Popup Welcome message (shows above chat icon if not empty)

Jika Anda membiarkan pesan sambutan kosong, kami tidak akan menampilkan pesan sambutan di atas ikon chat.

Pre-defined messages in chat window

Anda dapat menyiapkan hingga 3 jenis pesan yang telah ditentukan sebelumnya di jendela chat:

1. Pesan pertama di jendela chat - Ini adalah pesan sapaan awal yang otomatis muncul saat pelanggan pertama kali membuka jendela chat. Gunakan ini untuk menyambut pelanggan dan menentukan nada percakapan.

2. Hingga 4 pertanyaan pembuka - Ini adalah saran pertanyaan yang dapat diklik dan ditampilkan di awal chat. Ini membantu membimbing pelanggan dengan menyediakan pertanyaan umum yang dapat mereka klik untuk memulai percakapan, sehingga pelanggan lebih mudah untuk memulai.

3. Pesan placeholder input - Ini adalah teks petunjuk yang muncul di kolom input chat sebelum pelanggan mulai mengetik. Ini memberikan panduan tentang apa yang dapat ditanyakan pelanggan, seperti “Ask me anything 🤗” atau “How can I help you today?”

Pengaturan ini mengontrol pembukaan chat standar. Saat pembeli membuka chat melalui tautan “Question About This Product?”, Shoply akan menampilkan nama produk, sorotan singkat produk, dan pertanyaan yang dibuat secara otomatis tentang item tersebut. Anda tidak perlu menulis pertanyaan pembuka untuk setiap produk. Pelajari cara kerja pertanyaan produk berbasis AI, atau ikuti langkah-langkah untuk menambahkan tombol pertanyaan produk.

Lihat contoh untuk setiap jenis pesan yang telah ditentukan sebelumnya: