Cara Menggunakan Deep Link untuk Membuka Jendela Chat (Tanpa Mengedit Kode Tema)

Anda dapat membuka jendela chat menggunakan deep link tanpa mengubah kode tema Anda. Di Shopify Theme Editor, cukup tambahkan hashtag #shoply-ai-chatbot ke tombol, ikon, atau elemen teks apa pun. Saat pelanggan mengeklik 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 tertaut untuk membuka jendela chat:

Membuka Chat dengan Pertanyaan yang Telah Diisi

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

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

Disarankan: Hash Fragment (tanpa memuat ulang halaman)

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

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?
Menemukan Produk: https://your-store.com#shoply_question=What class 2 e-bikes are available under $2000?

Anda dapat menggabungkannya dengan halaman apa 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?

Lama: Parameter Kueri URL

Parameter kueri ?shoply_question= masih didukung untuk kompatibilitas ke belakang. Perhatikan bahwa menambahkan parameter kueri ke URL yang sedang dibuka pelanggan akan menyebabkan halaman dimuat ulang.

Format:

plaintext


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

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

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

Kasus Penggunaan:

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

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

Di bagian sebelumnya, kita 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 pun pada toko Anda (misalnya, membuat ikon baru di header), Anda perlu mengedit kode templat.

Di bawah ini adalah contoh kode HTML sederhana yang dapat Anda gunakan untuk membuat ikon baru di templat Tema 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 menambahkan pemanggilan fungsi openShoplyAIChatBot() ke atribut onclick tombol/ikon apa pun, sehingga pelanggan akan melihat jendela chat saat mengeklik 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>

Perlu Bantuan?

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

Namun, jika Anda tidak sepenuhnya nyaman mengedit kode di templat Tema Anda, jangan khawatir!

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

Bagaimana Cara Menyembunyikan Ikon Mengambang?

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

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

“Hide floating icon and use deep link to open chat”.

Ini memungkinkan Anda menyembunyikan ikon mengambang sekaligus tetap mengaktifkan pembukaan jendela chat melalui deep link.