Sohbet Penceresini Açmak İçin Deep Link Kullanma (Tema Kodunu Düzenlemeden)

Temanızın kodunu değiştirmeden deep link kullanarak sohbet penceresini açabilirsiniz. Shopify Tema Düzenleyicisi’nde herhangi bir düğmeye, simgeye veya metin öğesine #shoply-ai-chatbot hashtag’ini eklemeniz yeterlidir. Müşteriler bu öğelere tıkladığında sohbet penceresi otomatik olarak açılır.

Canlı örnek: demo.shoplyai.ai

Adımlar:

Tema düzenleyicinizde istediğiniz düğmeyi, metni veya simgeyi düzenleyin.
Bağlantıyı veya URL’yi #shoply-ai-chatbot olarak ayarlayın.

Örnekler:

Sohbet penceresini açmak için bir düğme kullanın:

Sohbet penceresini açmak için bağlantılı bir metin kullanın:

Önceden Doldurulmuş Bir Soruyla Sohbeti Açma

Sohbet penceresini açmak ve otomatik olarak bir soru göndermek mi istiyorsunuz? Bunu bir hash fragment’ı (önerilir) veya bir URL sorgu parametresi kullanarak yapabilirsiniz.

Bu yöntem; kargo politikası, iade politikası veya ürün soruları gibi yaygın konulara doğrudan bağlantılar oluşturmak için idealdir.

Önerilen: Hash Fragment (sayfa yeniden yüklenmez)

#shoply_question= hash fragment’ını kullanın. Hash tamamen tarayıcıda işlendiğinden, bu bağlantıya tıklamak sayfayı yeniden yüklemez ve mevcut sohbet geçmişi korunur.

Biçim:

plaintext


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

Örnekler:

Kargo Politikası: https://your-store.com#shoply_question=What is your shipping policy?
İadeler: https://your-store.com#shoply_question=How do I return an item?
Sipariş Durumu: https://your-store.com#shoply_question=Where is my order?
Ürün Keşfi: https://your-store.com#shoply_question=What class 2 e-bikes are available under $2000?

Bunu mağazanızdaki herhangi bir sayfayla birleştirebilirsiniz. Örneğin, belirli bir ürün sayfasında bir soruyla chatbot’u açmak için:

plaintext


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

Eski yöntem: URL Sorgu Parametresi

?shoply_question= sorgu parametresi geriye dönük uyumluluk için hâlâ desteklenmektedir. Müşterinin hâlihazırda bulunduğu URL’ye bir sorgu parametresi eklemenin sayfanın yeniden yüklenmesine neden olacağını unutmayın.

Biçim:

plaintext


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

Not: Özel karakterler veya boşluklar kullanırken sorunuzu URL ile kodlamayı unutmayın. Çoğu tarayıcı bunu otomatik olarak yapar, ancak bağlantıları programlı olarak ekliyorsanız uygun URL kodlamasını kullanın (örneğin boşluklar %20 olur).

Müşteri bağlantı türlerinden herhangi birine tıkladığında sohbet penceresi otomatik olarak açılır ve soru yapay zekâlı chatbot’a gönderilerek anında yanıt sağlanır.

Kullanım Alanları:

Altbilginize “Kargo hakkında sor” bağlantısı ekleyin
Chatbot’u belirli sorularla açan QR kodları oluşturun
E-posta kampanyalarınıza veya sipariş onaylarınıza yararlı bağlantılar ekleyin
Ürün sayfalarına bağlama duyarlı yardım bağlantıları ekleyin (örneğin, “Beden hakkında sor”)

Sohbet Penceresini Açmak İçin Deep Link Kullanma (Tema şablonundaki kodun düzenlenmesi gerekir)

Önceki bölümde, hashtag’i (deep link) herhangi bir düğmeye, simgeye veya metne doğrudan Tema Düzenleyicisi’nden ekleyerek, tema kodunu düzenlemeden sohbet penceresini nasıl tetikleyeceğinizi ele aldık.

Ancak deep link’i mağazanızın herhangi bir yerine eklemek için tam esnekliğe sahip olmak (örneğin üst bilgi bölümünde yeni bir simge oluşturmak) istiyorsanız şablon kodunu düzenlemeniz gerekir.

Aşağıda, Tema şablonunuzda yeni simgeler oluşturmak için kullanabileceğiniz basit HTML kodu örnekleri yer almaktadır:

Kod Örnekleri

1. Sohbet Simgesi

Aşağıdaki kod bir sohbet simgesi ekler:

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. Yapay Zekâ Yıldızı Simgesi

Aşağıdaki kod bir yapay zekâ yıldızı ekler:

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. İşlev Çağrısı Yöntemi

Hashtag kullanmanın yanı sıra, müşterilerin düğmeye/simgeye tıkladıklarında sohbet penceresini görmesini sağlamak için openShoplyAIChatBot() işlev çağrısını herhangi bir düğmenin/simgenin onclick niteliğine de ekleyebilirsiniz.

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>

Yardıma mı ihtiyacınız var?

Yukarıdaki örneklerden herhangi birini kullanabilir ve mağazanızın üst bilgisine sohbet deep link’ini eklemek için kodu sections/header.liquid dosyasında arama simgesinin yanına yerleştirebilirsiniz.

Ancak Tema şablonunuzdaki kodu düzenleme konusunda kendinizi tamamen rahat hissetmiyorsanız endişelenmeyin!

Bizimle bir görüşme planlayın ; mağazanızın kendine özgü tarzına uyacak ideal noktaya mükemmel simgeyi yerleştirmenize memnuniyetle yardımcı oluruz.

Yüzen Simge Nasıl Gizlenir?

Sohbet penceresini açacak deep link’i yapılandırdıktan sonra yüzen simgeyi gizlemek isteyebilirsiniz. Ayrıca mağaza sahipleri, web sitelerinde çok fazla yüzen simge bulunmasının bunaltıcı olabileceğini sıkça belirtir. Endişelerinizi anlıyoruz! Bu nedenle sohbet simgesini gizleyen bir özellik kullanıma sunduk.

Uygulamanın yönetim konsolundaki “Customize AI Chat” bölümünde, Select a Chat Icon ayarları altında artık şu seçeneği belirleyebilirsiniz:

“Hide floating icon and use deep link to open chat” seçeneği.

Bu seçenek, bir deep link üzerinden sohbet penceresinin açılmasını sağlamaya devam ederken yüzen simgeyi gizlemenize olanak tanır.