Πώς να Ανοίξετε το Παράθυρο Συνομιλίας με έναν Σύνδεσμο

Μπορείτε να ανοίξετε το παράθυρο συνομιλίας χρησιμοποιώντας έναν deep link χωρίς να τροποποιήσετε τον κώδικα του theme σας. Στον Shopify Theme Editor, απλώς προσθέστε το hashtag #shoply-ai-chatbot σε οποιοδήποτε κουμπί, εικονίδιο ή στοιχείο κειμένου. Όταν οι πελάτες κάνουν κλικ σε αυτά τα στοιχεία, το παράθυρο συνομιλίας θα ανοίγει αυτόματα.

Ζωντανό παράδειγμα: demo.shoplyai.ai

Βήματα:

Επεξεργαστείτε το επιθυμητό κουμπί, κείμενο ή εικονίδιο στον theme editor.
Ορίστε τον σύνδεσμο ή το URL σε #shoply-ai-chatbot.

Παραδείγματα:

Χρησιμοποιήστε ένα κουμπί για να ανοίξετε το παράθυρο συνομιλίας:

Χρησιμοποιήστε ένα συνδεδεμένο κείμενο για να ανοίξετε το παράθυρο συνομιλίας:

Άνοιγμα Συνομιλίας με Ερωτήσεις Συγκεκριμένες για το Προϊόν

Προσθέστε ένα κουμπί “Ερώτηση για αυτό το προϊόν;” σε μια σελίδα προϊόντος για να βοηθήσετε τους αγοραστές να ρωτήσουν σχετικά με αυτό το αντικείμενο. Ορίστε τον σύνδεσμό του σε #shoply_product_questions. Κάνοντας κλικ σε αυτό, ανοίγει η συνομιλία με το όνομα του προϊόντος, μια σύντομη επισήμανση του προϊόντος και αυτόματα δημιουργημένες ερωτήσεις σχετικές με το συγκεκριμένο προϊόν.

Στον Shopify Theme Editor, ανοίξτε το template προϊόντος σας και προσθέστε ή επεξεργαστείτε ένα κουμπί ή συνδεδεμένο κείμενο που υποστηρίζει URL.
Ορίστε την ετικέτα σε “Ερώτηση για αυτό το προϊόν;” και τον σύνδεσμο σε #shoply_product_questions.
Αποθηκεύστε, επισκεφθείτε μια σελίδα προϊόντος και κάντε κλικ στον σύνδεσμο για να ελέγξετε τις ερωτήσεις προϊόντος.

Αν το theme σας δεν προσφέρει κατάλληλη ρύθμιση κουμπιού ή συνδέσμου, προσθέστε αυτόν τον σύνδεσμο στο HTML του template προϊόντος:

html


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

Χρησιμοποιήστε αυτόν τον σύνδεσμο σε μια σελίδα προϊόντος ώστε το Shoply να έχει το context του προϊόντος. Μπορείτε επίσης να κοινοποιήσετε ένα πλήρες URL προϊόντος που τελειώνει σε #shoply_product_questions.

Δοκιμάστε τη συνομιλία ερωτήσεων προϊόντος για τα Bent 85 Skis . Οι προτάσεις περιλαμβάνουν ερωτήσεις σχετικά με το βάρος των σκι, τον πυρήνα, το προφίλ rocker και το topsheet art. Οι αγοραστές μπορούν να επιλέξουν μια πρόταση ή να πληκτρολογήσουν τη δική τους ερώτηση.

Για παραδείγματα του πού να χρησιμοποιήσετε αυτούς τους συνδέσμους, δείτε τις ερωτήσεις προϊόντων με AI στο FAQ replacement guide μας.

Αυτές οι ερωτήσεις προϊόντων δημιουργούνται αυτόματα. Οι αρχικές ερωτήσεις που ρυθμίζετε στο Customize AI Chat εφαρμόζονται αντίθετα στο κανονικό άνοιγμα της συνομιλίας.

Άνοιγμα Συνομιλίας με Προσυμπληρωμένη Ερώτηση

Θέλετε να ανοίξετε το παράθυρο συνομιλίας και να στείλετε αυτόματα μια ερώτηση; Μπορείτε να το κάνετε αυτό είτε με ένα hash fragment (προτείνεται) είτε με μια παράμετρο URL query.

Αυτό είναι ιδανικό για τη δημιουργία άμεσων συνδέσμων προς συνηθισμένα θέματα όπως η πολιτική αποστολής, η πολιτική επιστροφών ή ερωτήματα για προϊόντα.

Προτεινόμενο: Hash Fragment (χωρίς επαναφόρτωση σελίδας)

Χρησιμοποιήστε το hash fragment #shoply_question=. Επειδή το hash υποβάλλεται σε επεξεργασία εξ ολοκλήρου στον browser, κάνοντας κλικ σε αυτόν τον σύνδεσμο δεν θα γίνει επαναφόρτωση της σελίδας, και τυχόν υπάρχον ιστορικό συνομιλίας διατηρείται.

Μορφή:

plaintext


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

Παραδείγματα:

Πολιτική Αποστολής: https://your-store.com#shoply_question=What is your shipping policy?
Επιστροφές: https://your-store.com#shoply_question=How do I return an item?
Κατάσταση Παραγγελίας: https://your-store.com#shoply_question=Where is my order?
Ανακάλυψη Προϊόντων: https://your-store.com#shoply_question=What class 2 e-bikes are available under $2000?

Μπορείτε να το συνδυάσετε αυτό με οποιαδήποτε σελίδα στο κατάστημά σας. Για παράδειγμα, για να ανοίξετε το chatbot με μια ερώτηση σε μια συγκεκριμένη σελίδα προϊόντος:

plaintext


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

Legacy: Παράμετρος URL Query

Η παράμετρος query ?shoply_question= εξακολουθεί να υποστηρίζεται για backward compatibility. Σημειώστε ότι η προσθήκη μιας παραμέτρου query σε ένα URL στο οποίο βρίσκεται ήδη ο πελάτης θα προκαλέσει επαναφόρτωση της σελίδας.

Μορφή:

plaintext


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

Σημείωση: Θυμηθείτε να κάνετε URL encode την ερώτησή σας όταν χρησιμοποιείτε ειδικούς χαρακτήρες ή κενά. Οι περισσότεροι browsers θα το χειριστούν αυτόματα, αλλά αν προσθέτετε συνδέσμους προγραμματιστικά, χρησιμοποιήστε σωστή κωδικοποίηση URL (π.χ. τα κενά γίνονται %20).

Όταν ένας πελάτης κάνει κλικ σε οποιονδήποτε από τους δύο τύπους συνδέσμων, το παράθυρο συνομιλίας θα ανοίγει αυτόματα και η ερώτηση θα αποστέλλεται στο AI chatbot, παρέχοντας άμεση απάντηση.

Περιπτώσεις Χρήσης:

Προσθέστε έναν σύνδεσμο “Ρωτήστε για την αποστολή” στο footer σας
Δημιουργήστε QR codes που ανοίγουν το chatbot με συγκεκριμένες ερωτήσεις
Συμπεριλάβετε χρήσιμους συνδέσμους στις email καμπάνιες σας ή στις επιβεβαιώσεις παραγγελιών
Προσθέστε contextual συνδέσμους βοήθειας σε σελίδες προϊόντων (π.χ. “Ρωτήστε για το μέγεθος”)

Πώς να Χρησιμοποιήσετε Deep Link για να Ανοίξετε το Παράθυρο Συνομιλίας (χρειάζεται να επεξεργαστείτε τον κώδικα στο Theme template)

Στην προηγούμενη ενότητα, εξηγήσαμε πώς να χρησιμοποιήσετε το hashtag (deep link) για να ενεργοποιήσετε το παράθυρο συνομιλίας προσθέτοντάς το σε οποιοδήποτε κουμπί, εικονίδιο ή κείμενο απευθείας από τον Theme Editor, χωρίς να επεξεργαστείτε τον κώδικα του theme σας.

Ωστόσο, αν θέλετε να έχετε πλήρη ευελιξία ώστε να προσθέσετε το deep link οπουδήποτε στο κατάστημά σας (π.χ. δημιουργώντας ένα νέο εικονίδιο στο header), θα χρειαστεί να επεξεργαστείτε τον κώδικα του template.

Παρακάτω θα βρείτε απλά παραδείγματα κώδικα HTML που μπορείτε να χρησιμοποιήσετε για να δημιουργήσετε νέα εικονίδια στο Theme template σας:

Παραδείγματα Κώδικα

1. Εικονίδιο Συνομιλίας

Ο παρακάτω κώδικας προσθέτει ένα εικονίδιο συνομιλίας:

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 Star

Ο παρακάτω κώδικας προσθέτει ένα αστέρι 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. Μέθοδος Function Call

Εκτός από τη χρήση hashtags, μπορείτε επίσης να βάλετε την κλήση συνάρτησης openShoplyAIChatBot() στο attribute onclick οποιουδήποτε κουμπιού/εικονιδίου, ώστε οι πελάτες να βλέπουν το παράθυρο συνομιλίας όταν κάνουν κλικ στο κουμπί/εικονίδιο.

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>

Χρειάζεστε Βοήθεια;

Μπορείτε να χρησιμοποιήσετε οποιοδήποτε από τα παραπάνω παραδείγματα και να εισαγάγετε τον κώδικα δίπλα στο εικονίδιο αναζήτησης στο αρχείο sections/header.liquid, για να προσθέσετε το chat deep link στο header του καταστήματός σας.

Ωστόσο, αν δεν αισθάνεστε απόλυτα άνετα με την επεξεργασία του κώδικα στο Theme template σας, μην ανησυχείτε!

Μη διστάσετε να κλείσετε μια συνάντηση μαζί μας , και θα χαρούμε πολύ να σας βοηθήσουμε να ρυθμίσετε το ιδανικό εικονίδιο στο κατάλληλο σημείο ώστε να ταιριάζει με το μοναδικό ύφος του καταστήματός σας.

Πώς να Αποκρύψετε το Αιωρούμενο Εικονίδιο;

Αφού ρυθμίσετε το deep link για να ανοίγει το παράθυρο συνομιλίας, ίσως θελήσετε να αποκρύψετε το αιωρούμενο εικονίδιο. Επίσης, οι ιδιοκτήτες καταστημάτων συχνά αναφέρουν ότι η ύπαρξη υπερβολικά πολλών αιωρούμενων εικονιδίων στις ιστοσελίδες τους μπορεί να είναι υπερβολική. Κατανοούμε τις ανησυχίες σας! Γι’ αυτό εισαγάγαμε μια λειτουργία για την απόκρυψη του εικονιδίου συνομιλίας.

Στην ενότητα “Customize AI Chat” της admin console της εφαρμογής, κάτω από τις ρυθμίσεις Select a Chat Icon, μπορείτε πλέον να επιλέξετε την επιλογή:

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

Αυτό σας επιτρέπει να αποκρύψετε το αιωρούμενο εικονίδιο, ενώ παράλληλα επιτρέπει στο παράθυρο συνομιλίας να ανοίγει μέσω deep link.