Bir Bağlantı ile Sohbet Penceresi Nasıl Açılır

Temanızın kodunu değiştirmeden bir derin bağlantı kullanarak sohbet penceresini açabilirsiniz. Shopify Tema Düzenleyicisi’nde, herhangi bir düğme, simge veya metin öğesine sadece #shoply-ai-chatbot etiketi ekleyin. 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:

Ürüne Özel Sorularla Sohbet Açma

Alışveriş yapanların o ürün hakkında soru sormasına yardımcı olmak için ürün sayfasına “Bu Ürün Hakkında Sorunuz mu Var?” düğmesi ekleyin. Bağlantısını #shoply_product_questions olarak ayarlayın. Tıklandığında sohbet; ürün adı, kısa bir ürün özeti ve o ürüne uygun otomatik oluşturulmuş sorularla açılır.

Shopify Tema Düzenleyicisi’nde ürün şablonunuzu açın ve URL destekleyen bir düğme veya bağlantılı metin ekleyin ya da düzenleyin.
Etiketi “Bu Ürün Hakkında Sorunuz mu Var?” olarak, bağlantıyı ise #shoply_product_questions olarak ayarlayın.
Kaydedin, bir ürün sayfasını ziyaret edin ve ürün sorularını kontrol etmek için bağlantıya tıklayın.

Temanız uygun bir düğme veya bağlantı ayarı sunmuyorsa, bu bağlantıyı ürün şablonunun HTML’ine ekleyin:

html


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

Bu bağlantıyı bir ürün sayfasında kullanın ki Shoply ürün bağlamına sahip olsun. Ayrıca sonu #shoply_product_questions ile biten tam bir ürün URL’sini de paylaşabilirsiniz.

Bent 85 Skis için ürün-sorusu sohbetini deneyin . Öneriler; kayak ağırlığı, çekirdek yapısı, rocker profili ve üst yüzey sanatı hakkında sorular içerir. Alışveriş yapanlar bir öneri seçebilir veya kendi sorularını yazabilir.

Bu bağlantıları nerelerde kullanabileceğinize dair örnekler için SSS değiştirme rehberimizdeki AI destekli ürün soruları bölümüne bakın.

Bu ürün soruları otomatik olarak oluşturulur. Customize AI Chat içinde yapılandırdığınız başlangıç soruları bunun yerine standart sohbet açılışı için geçerlidir.

Önceden Doldurulmuş Bir Soruyla Sohbet 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; kargo politikası, iade politikası veya ürün soruları gibi yaygın konulara doğrudan bağlantılar oluşturmak için mükemmeldir.

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

#shoply_question= hash fragment’ını kullanın. Hash tamamen tarayıcı içinde işlendiği için, 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 chatbot’u bir soruyla 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 zaten bulunduğu bir URL’ye 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 encode etmeyi unutmayın. Çoğu tarayıcı bunu otomatik olarak yapar, ancak bağlantıları programatik olarak ekliyorsanız doğru URL kodlamasını kullanın (örneğin, boşluklar %20 olur).

Müşteri bu bağlantı türlerinden herhangi birine tıkladığında, sohbet penceresi otomatik olarak açılır ve soru AI chatbot’a gönderilir; böylece anında yanıt alınır.

Kullanım Senaryoları:

Alt bilginize “Kargo hakkında sor” bağlantısı ekleyin
Belirli sorularla chatbot’u 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ğlamsal yardım bağlantıları ekleyin (ör. “Beden hakkında sor”)

Sohbet Penceresini Açmak için Derin Bağlantı Nasıl Kullanılır (Tema şablonundaki kodu düzenlemek gerekir)

Önceki bölümde, tema kodunuzu düzenlemeden, etiketi doğrudan Tema Düzenleyicisi’nden herhangi bir düğme, simge veya metne ekleyerek sohbet penceresini tetiklemek için hashtag’in (derin bağlantı) nasıl kullanılacağını ele aldık.

Ancak mağazanızın herhangi bir yerine derin bağlantıyı eklemek için tam esneklik istiyorsanız (örneğin, üst bilgiye yeni bir simge oluşturmak gibi), şablon kodunu düzenlemeniz gerekir.

Aşağıda, Tema şablonunuzda yeni simgeler oluşturmak için kullanabileceğiniz basit HTML kod örnekleri bulunmaktadı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. AI Yıldız Simgesi

Aşağıdaki kod bir AI 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. Fonksiyon Çağrısı Yöntemi

Hashtag kullanmanın yanı sıra, openShoplyAIChatBot() fonksiyon çağrısını herhangi bir düğmenin/simgenin onclick niteliğine de ekleyebilirsiniz; böylece müşteriler düğmeye/simgeye tıkladıklarında sohbet penceresini görür.

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ı İhtiyacınız Var?

Yukarıdaki örneklerden herhangi birini kullanabilir ve mağazanızın üst bilgisine sohbet derin bağlantısını eklemek için kodu sections/header.liquid dosyasında arama simgesinin yanına ekleyebilirsiniz.

Ancak Tema şablonunuzdaki kodu düzenleme konusunda tamamen rahat değilseniz, endişelenmeyin!

Bizimle bir toplantı ayarlamaktan çekinmeyin; mağazanızın benzersiz havasına uygun, ideal noktadaki mükemmel simgeyi kurmanıza memnuniyetle yardımcı oluruz.

Kayan Simge Nasıl Gizlenir?

Sohbet penceresini açmak için derin bağlantıyı yapılandırdıktan sonra kayan simgeyi gizlemek isteyebilirsiniz. Ayrıca, mağaza sahipleri sık sık web sitelerinde çok fazla kayan simge olmasının bunaltıcı olabileceğini belirtiyor. Endişelerinizi anlıyoruz! Bu yüzden sohbet simgesini gizlemek için bir özellik sunduk.

Uygulamanın yönetici panelindeki “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, sohbet penceresinin derin bağlantı yoluyla açılmasını etkin tutarken kayan simgeyi gizlemenizi sağlar.