איך להשתמש בקישור עמוק כדי לפתוח את חלון הצ’אט (בלי לערוך את קוד התבנית)

אפשר לפתוח את חלון הצ’אט באמצעות קישור עמוק בלי לשנות את קוד התבנית שלכם. בעורך התבניות של Shopify, פשוט הוסיפו את ה-hashtag #shoply-ai-chatbot לכל כפתור, סמל או רכיב טקסט. כאשר הלקוחות ילחצו על הרכיבים האלה, חלון הצ’אט ייפתח באופן אוטומטי.

דוגמה פעילה: demo.shoplyai.ai 

שלבים:

1. ערכו את הכפתור, הטקסט או הסמל הרצויים בעורך התבניות.
2. הגדירו את הקישור או את כתובת ה-URL ל-#shoply-ai-chatbot.

דוגמאות:

השתמשו בכפתור כדי לפתוח את חלון הצ’אט:

השתמשו בטקסט מקושר כדי לפתוח את חלון הצ’אט:

פתיחת הצ’אט עם שאלה שמולאה מראש

רוצים לפתוח את חלון הצ’אט וגם לשלוח שאלה באופן אוטומטי? אפשר לעשות זאת באמצעות מקטע hash (מומלץ) או באמצעות פרמטר שאילתה בכתובת ה-URL.

האפשרות הזו מושלמת ליצירת קישורים ישירים לנושאים נפוצים כמו מדיניות משלוחים, מדיניות החזרות או שאלות על מוצרים.

מומלץ: מקטע hash (ללא טעינה מחדש של הדף)

השתמשו במקטע ה-hash #shoply_question=. מכיוון שה-hash מעובד כולו בדפדפן, לחיצה על הקישור הזה לא תטען מחדש את הדף, והיסטוריית הצ’אט הקיימת תישמר.

פורמט:

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?

אפשר לשלב זאת עם כל דף בחנות. לדוגמה, כדי לפתוח את הצ’אט עם שאלה בדף מוצר מסוים:

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

מדור קודם: פרמטר שאילתה בכתובת ה-URL

פרמטר השאילתה ?shoply_question= עדיין נתמך לצורך תאימות לאחור. שימו לב שהוספת פרמטר שאילתה לכתובת URL שבה הלקוח כבר נמצא תגרום לטעינה מחדש של הדף.

פורמט:

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

הערה: זכרו לקודד את השאלה בכתובת ה-URL בעת שימוש בתווים מיוחדים או ברווחים. רוב הדפדפנים יטפלו בכך באופן אוטומטי, אבל אם אתם מוסיפים קישורים באופן תכנותי, השתמשו בקידוד URL תקין (למשל, רווחים הופכים ל-%20).

כאשר לקוח לוחץ על אחד מסוגי הקישורים, חלון הצ’אט ייפתח באופן אוטומטי והשאלה תישלח לצ’אטבוט של הבינה המלאכותית, שיספק תשובה מיידית.

מקרי שימוש:

• הוסיפו קישור “שאלו על משלוחים” בכותרת התחתונה
• צרו קודי QR שפותחים את הצ’אטבוט עם שאלות ספציפיות
• כללו קישורים מועילים בקמפיינים שלכם בדוא”ל או באישורי הזמנה
• הוסיפו קישורי עזרה לפי הקשר בדפי מוצרים (למשל, “שאלו על מידות”)

איך להשתמש בקישור עמוק כדי לפתוח את חלון הצ’אט (יש לערוך את הקוד בתבנית)

בחלק הקודם הסברנו איך להשתמש ב-hashtag (קישור עמוק) כדי להפעיל את חלון הצ’אט על ידי הוספתו לכל כפתור, סמל או טקסט ישירות מעורך התבניות, בלי לערוך את קוד התבנית.

עם זאת, אם תרצו גמישות מלאה להוסיף את הקישור העמוק בכל מקום בחנות שלכם (למשל, ליצור סמל חדש בכותרת), תצטרכו לערוך את קוד התבנית.

להלן דוגמאות פשוטות של קוד HTML שבהן תוכלו להשתמש כדי ליצור סמלים חדשים בתבנית שלכם:

דוגמאות קוד

1. סמל צ’אט

הקוד שלמטה מוסיף סמל צ’אט:

<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. סמל כוכב של בינה מלאכותית

הקוד שלמטה מוסיף כוכב של בינה מלאכותית:

<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. שיטת קריאה לפונקציה

בנוסף לשימוש ב-hashtags, אפשר גם להציב את הקריאה לפונקציה openShoplyAIChatBot() במאפיין onclick של כל כפתור/סמל, כדי שחלון הצ’אט יוצג ללקוחות כאשר ילחצו על הכפתור/הסמל.

<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, כדי להוסיף את הקישור העמוק של הצ’אט לכותרת החנות.

עם זאת, אם אינכם מרגישים בנוח לערוך את הקוד בתבנית שלכם, אל דאגה!

אתם מוזמנים לקבוע איתנו פגישה , ונשמח לעזור לכם להגדיר את הסמל המושלם במקום האידיאלי, כך שיתאים לאופי הייחודי של החנות שלכם.

איך להסתיר את הסמל הצף?

לאחר שתגדירו את הקישור העמוק לפתיחת חלון הצ’אט, ייתכן שתרצו להסתיר את הסמל הצף. בעלי חנויות גם מציינים לעיתים קרובות שריבוי סמלים צפים באתר שלהם עלול ליצור עומס. אנחנו מבינים את החששות שלכם! לכן הוספנו אפשרות להסתיר את סמל הצ’אט.

בקטע “Customize AI Chat” במסוף הניהול של האפליקציה, תחת ההגדרות Select a Chat Icon, תוכלו כעת לבחור באפשרות:

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

האפשרות הזו מאפשרת לכם להסתיר את הסמל הצף ובמקביל להשאיר את האפשרות לפתוח את חלון הצ’אט באמצעות קישור עמוק.