Cara Membuka Jendela Chat dengan Tautan

Anda dapat membuka jendela chat dengan menggunakan deep link tanpa memodifikasi kode tema Anda. Di Shopify Theme Editor, cukup tambahkan hashtag #shoply-ai-chatbot ke tombol, ikon, atau elemen teks apa pun. Saat pelanggan mengklik elemen-elemen ini, jendela chat akan terbuka secara otomatis.

Contoh langsung: demo.shoplyai.ai

Langkah-langkah:

Edit tombol, teks, atau ikon yang diinginkan di editor tema Anda.
Atur tautan atau URL ke #shoply-ai-chatbot.

Contoh:

Gunakan tombol untuk membuka jendela chat:

Gunakan teks bertautan untuk membuka jendela chat:

Buka Chat dengan Pertanyaan Khusus Produk

Tambahkan tombol “Pertanyaan Tentang Produk Ini?” ke halaman produk untuk membantu pembeli mengajukan pertanyaan tentang item tersebut. Atur tautannya ke #shoply_product_questions. Saat diklik, chat akan terbuka dengan nama produk, sorotan singkat produk, dan pertanyaan yang dibuat otomatis yang relevan dengan produk tersebut.

Di Shopify Theme Editor, buka template produk Anda dan tambahkan atau edit tombol atau teks bertautan yang mendukung URL.
Atur label menjadi “Pertanyaan Tentang Produk Ini?” dan tautannya ke #shoply_product_questions.
Simpan, kunjungi halaman produk, dan klik tautan tersebut untuk memeriksa pertanyaan produk.

Jika tema Anda tidak menyediakan pengaturan tombol atau tautan yang sesuai, tambahkan tautan ini di HTML template produk:

html


<a href="#shoply_product_questions">Question About This Product?</a>

Gunakan tautan ini pada halaman produk agar Shoply memiliki konteks produk. Anda juga dapat membagikan URL produk lengkap yang diakhiri dengan #shoply_product_questions.

Coba chat pertanyaan produk untuk Bent 85 Skis . Saran yang ditampilkan mencakup pertanyaan tentang berat ski, core, profil rocker, dan seni topsheet. Pembeli dapat memilih saran atau mengetik pertanyaan mereka sendiri.

Untuk contoh tempat menggunakan tautan-tautan ini, lihat pertanyaan produk berbasis AI dalam panduan pengganti FAQ kami.

Pertanyaan produk ini dibuat secara otomatis. Pertanyaan awal yang Anda konfigurasi di Customize AI Chat berlaku untuk pembukaan chat standar.

Buka Chat dengan Pertanyaan yang Sudah Terisi

Ingin membuka jendela chat dan otomatis mengirim pertanyaan? Anda dapat melakukannya menggunakan hash fragment (disarankan) atau parameter query URL.

Ini sangat cocok untuk membuat tautan langsung ke topik umum seperti kebijakan pengiriman, kebijakan pengembalian, atau pertanyaan produk.

Disarankan: Hash Fragment (tanpa memuat ulang halaman)

Gunakan hash fragment #shoply_question=. Karena hash diproses sepenuhnya di browser, mengklik tautan ini tidak akan memuat ulang halaman, dan riwayat chat yang sudah ada akan tetap dipertahankan.

Format:

plaintext


https://your-store.com#shoply_question=your question here

Contoh:

Kebijakan Pengiriman: https://your-store.com#shoply_question=What is your shipping policy?
Pengembalian: https://your-store.com#shoply_question=How do I return an item?
Status Pesanan: https://your-store.com#shoply_question=Where is my order?
Pencarian Produk: https://your-store.com#shoply_question=What class 2 e-bikes are available under $2000?

Anda dapat menggabungkannya dengan halaman mana pun di toko Anda. Misalnya, untuk membuka chatbot dengan pertanyaan di halaman produk tertentu:

plaintext


https://your-store.com/products/blue-jacket#shoply_question=What sizes are available?

Legacy: Parameter Query URL

Parameter query ?shoply_question= masih didukung untuk kompatibilitas mundur. Perlu diperhatikan bahwa menambahkan parameter query ke URL yang sedang dibuka pelanggan akan menyebabkan halaman dimuat ulang.

Format:

plaintext


https://your-store.com?shoply_question=your question here

Catatan: Ingat untuk melakukan URL encode pada pertanyaan Anda saat menggunakan karakter khusus atau spasi. Sebagian besar browser akan menanganinya secara otomatis, tetapi jika Anda menambahkan tautan secara terprogram, gunakan URL encoding yang tepat (misalnya, spasi menjadi %20).

Saat pelanggan mengklik salah satu jenis tautan tersebut, jendela chat akan otomatis terbuka dan pertanyaan akan dikirim ke chatbot AI, sehingga memberikan jawaban instan.

Kasus Penggunaan:

Tambahkan tautan “Tanya tentang pengiriman” di footer Anda
Buat kode QR yang membuka chatbot dengan pertanyaan tertentu
Sertakan tautan yang membantu dalam kampanye email atau konfirmasi pesanan Anda
Tambahkan tautan bantuan kontekstual di halaman produk (misalnya, “Tanya tentang ukuran”)

Cara Menggunakan Deep Link untuk Membuka Jendela Chat (perlu mengedit kode di template Tema)

Pada bagian sebelumnya, kami membahas cara menggunakan hashtag (deep link) untuk memicu jendela chat dengan menambahkannya ke tombol, ikon, atau teks apa pun langsung dari Theme Editor, tanpa mengedit kode tema Anda.

Namun, jika Anda ingin memiliki fleksibilitas penuh untuk menambahkan deep link di mana saja pada toko Anda (misalnya, membuat ikon baru di header), Anda perlu mengedit kode template.

Di bawah ini adalah contoh kode HTML sederhana yang dapat Anda gunakan untuk membuat ikon baru di template Theme Anda:

Contoh Kode

1. Ikon Chat

Kode di bawah ini menambahkan ikon chat:

plaintext


<a href="#shoply-ai-chatbot"
   style="display:inline-flex;align-items:center;margin-right:13px">
    <svg viewBox="64 64 896 896" style="height:28px;width:28px;fill:orange">
        <path
            d="M868.2 377.4c-18.9-45.1-46.3-85.6-81.2-120.6a377.26 377.26 0 00-120.5-81.2A375.65 375.65 0 00519 145.8c-41.9 0-82.9 6.7-121.9 20C306 123.3 200.8 120 170.6 120c-2.2 0-7.4 0-9.4.2-11.9.4-22.8 6.5-29.2 16.4-6.5 9.9-7.7 22.4-3.4 33.5l64.3 161.6a378.59 378.59 0 00-52.8 193.2c0 51.4 10 101 29.8 147.6 18.9 45 46.2 85.6 81.2 120.5 34.7 34.8 75.4 62.1 120.5 81.2C418.3 894 467.9 904 519 904c51.3 0 100.9-10.1 147.7-29.8 44.9-18.9 85.5-46.3 120.4-81.2 34.7-34.8 62.1-75.4 81.2-120.6a376.5 376.5 0 0029.8-147.6c-.2-51.2-10.1-100.8-29.9-147.4zm-66.4 266.5a307.08 307.08 0 01-65.9 98c-28.4 28.5-61.3 50.7-97.7 65.9h-.1c-38 16-78.3 24.2-119.9 24.2a306.51 306.51 0 01-217.5-90.2c-28.4-28.5-50.6-61.4-65.8-97.8v-.1c-16-37.8-24.1-78.2-24.1-119.9 0-55.4 14.8-109.7 42.8-157l13.2-22.1-9.5-23.9L206 192c14.9.6 35.9 2.1 59.7 5.6 43.8 6.5 82.5 17.5 114.9 32.6l19 8.9 19.9-6.8c31.5-10.8 64.8-16.2 98.9-16.2a306.51 306.51 0 01217.5 90.2c28.4 28.5 50.6 61.4 65.8 97.8l.1.1.1.1c16 37.6 24.1 78 24.2 119.8-.1 41.7-8.3 82-24.3 119.8zM681.1 364.2c-20.4 0-37.1 16.7-37.1 37.1v55.1c0 20.4 16.6 37.1 37.1 37.1s37.1-16.7 37.1-37.1v-55.1c0-20.5-16.7-37.1-37.1-37.1zm-175.2 0c-20.5 0-37.1 16.7-37.1 37.1v55.1c0 20.4 16.7 37.1 37.1 37.1 20.5 0 37.1-16.7 37.1-37.1v-55.1c0-20.5-16.7-37.1-37.1-37.1z" />
    </svg>
</a>

2. Ikon Bintang AI

Kode di bawah ini menambahkan bintang AI:

plaintext


<a href="#shoply-ai-chatbot" style="display:inline-flex;align-items:center">
    <img style="height:28px;width:28px" src="https://[CFN_PRODUCTION_ASSET]/AIStar.svg" alt="Shoply Chatbot"  />
</a>

3. Metode Pemanggilan Fungsi

Selain menggunakan hashtag, Anda juga dapat menempatkan pemanggilan fungsi openShoplyAIChatBot() pada atribut onclick dari tombol/ikon apa pun, sehingga pelanggan akan melihat jendela chat saat mereka mengklik tombol/ikon tersebut.

plaintext


<button onclick="openShoplyAIChatBot()" style="border-radius:20px;margin:10px;cursor:pointer;background:black">
    <span style="font-size:13px;color:white;margin:5px">Click to Chat</span>
</button>

Butuh Bantuan?

Anda dapat menggunakan salah satu contoh di atas, lalu menyisipkan kode tersebut di sebelah ikon pencarian dalam file sections/header.liquid, untuk menambahkan deep link chat ke header toko Anda.

Namun, jika Anda belum sepenuhnya nyaman mengedit kode di template Theme Anda, jangan khawatir!

Silakan jadwalkan pertemuan dengan kami , dan kami dengan senang hati akan membantu Anda menyiapkan ikon yang sempurna di posisi ideal agar sesuai dengan nuansa unik toko Anda.

Cara Menyembunyikan Ikon Melayang?

Setelah Anda mengonfigurasi deep link untuk membuka jendela chat, Anda mungkin ingin menyembunyikan ikon melayang. Selain itu, pemilik toko sering menyebutkan bahwa terlalu banyak ikon melayang di situs web mereka bisa terasa berlebihan. Kami memahami kekhawatiran Anda! Itulah sebabnya kami memperkenalkan fitur untuk menyembunyikan ikon chat.

Di bagian “Customize AI Chat” pada konsol admin aplikasi, di bawah pengaturan Select a Chat Icon, Anda sekarang dapat memilih opsi:

“Sembunyikan ikon melayang dan gunakan deep link untuk membuka chat”.

Ini memungkinkan Anda menyembunyikan ikon melayang sambil tetap memungkinkan jendela chat dibuka melalui deep link.