Πώς να χρησιμοποιήσετε deep link για να ανοίξετε το παράθυρο συνομιλίας (χωρίς επεξεργασία του κώδικα του θέματος)

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

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

Βήματα:

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

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

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

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

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

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

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

Συνιστάται: Τμήμα hash (χωρίς επαναφόρτωση σελίδας)

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

Μορφή:

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?

Παλαιότερη μέθοδος: Παράμετρος ερωτήματος URL

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

Μορφή:

plaintext


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

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

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

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

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

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

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

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

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

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

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

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

Εκτός από τη χρήση hashtag, μπορείτε επίσης να τοποθετήσετε την κλήση συνάρτησης openShoplyAIChatBot() στο χαρακτηριστικό 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, για να προσθέσετε το deep link συνομιλίας στην κεφαλίδα του καταστήματός σας.

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

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

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

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

Στην ενότητα «Customize AI Chat» της κονσόλας διαχείρισης της εφαρμογής, στις ρυθμίσεις Select a Chat Icon, μπορείτε πλέον να επιλέξετε την εξής:

«Hide floating icon and use deep link to open chat».

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