Shoply AI
דמואים
מקרה בוחן
תמחור
בלוג
שאלות נפוצות
סרטונים
שותפות
אודותינו
דמואים
מקרה בוחן
תמחור
התקנה ב-Shopify
התקינו באתר שלכם
בלוג
שאלות נפוצות
סרטונים
שותפות
אודותינו
שפות

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

How to Use Deep Link

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

דוגמה חיה: demo.shoplyai.ai 

שלבים:

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

דוגמאות:

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

Deep Link Button

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

Deep Link Text

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

הוסיפו כפתור “שאלה על המוצר הזה?” לדף מוצר כדי לעזור לקונים לשאול על אותו פריט. הגדירו את הקישור שלו ל-#shoply_product_questions. לחיצה עליו תפתח את הצ’אט עם שם המוצר, תקציר קצר על המוצר ושאלות שנוצרו אוטומטית ורלוונטיות למוצר זה.

  1. בעורך התבניות של Shopify, פתחו את תבנית המוצר שלכם והוסיפו או ערכו כפתור או טקסט עם קישור שתומכים ב-URL.
  2. הגדירו את התווית ל-”שאלה על המוצר הזה?” ואת הקישור ל-#shoply_product_questions.
  3. שמרו, בקרו בדף מוצר, ולחצו על הקישור כדי לבדוק את שאלות המוצר.

אם התבנית שלכם אינה מציעה הגדרת כפתור או קישור מתאימה, הוסיפו את הקישור הזה ל-HTML של תבנית המוצר:

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

השתמשו בקישור הזה בדף מוצר כדי של-Shoply יהיה הקשר המוצר. תוכלו גם לשתף URL מלא של מוצר שמסתיים ב-#shoply_product_questions.

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

לדוגמאות של מקומות שבהם אפשר להשתמש בקישורים האלה, ראו שאלות מוצר מבוססות AI במדריך שלנו להחלפת עמוד ה-FAQ.

שאלות המוצר האלה נוצרות אוטומטית. שאלות הפתיחה שאתם מגדירים ב-Customize AI Chat חלות במקום זאת על פתיחת הצ’אט הסטנדרטית.

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

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

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

מומלץ: Hash Fragment (ללא רענון עמוד)

השתמשו ב-hash fragment #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?

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

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

ישן: URL Query Parameter

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

פורמט:

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

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

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

מקרי שימוש:

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

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

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

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

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

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

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

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

כיצד להסתיר את האייקון הצף?

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

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

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

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