הגדרות מראה

סקירה כללית

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

פנל הגדרות המראה עם תצוגה מקדימה חיה

גישה להגדרות המראה

1. נווטו ל-WooAI Chat

   בממשק ניהול WordPress, גישה אל WooAI Chat בסרגל הצד השמאלי.

2. לחצו על מראה

   בחרו מראה מתפריט המשנה כדי לפתוח את פנל ההתאמה.

3. ביצוע שינויים

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

4. שמירת הגדרות

   לחצו על שמור הגדרות כדי להחיל את השינויים שלכם על הווידג'ט הלייב.

התאמת צבעים

התאימו את ווידג'ט הצ'אט שלכם לצבעי הברנד שלכם בעזרת אפשרויות ההתאמה הללו.

צבע ראשי

צבע הדגש הראשי המשמש בכל הווידג'ט. זה משפיע על:

• רקע כותרת הצ'אט
• כפתור שליחה
• בועת צ'אט (כפתור הפעלה)
• בועות הודעות של המשתמש
• קישורים ואלמנטים אינטראקטיביים

בחירות צבעים פופולריות

הגדרות צבע נוספות

עמדת הווידג'ט

בחרו היכן ווידג'ט הצ'אט מופיע באתר שלכם.

סטיית עמדה

כוונן בדיוק את עמדת הווידג'ט עם ערכי סטייה:

תצוגה מקדימה של הווידג'ט

כך ייראה ווידג'ט הצ'אט שלכם עם ההתאמה שלכם:

הגדרות כותרת

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

אפשרויות אוואטר

תוכלו להגדיר את אוואטר הצ'אטבוט באמצעות:

• תמונה מותאמת: העלו את התמונה שלכם (מומלץ: 100x100px PNG עם שקיפות)
• Emoji: בחרו מ-emoji זמינים (🤖, 💬, 🛍️, 👋, וכו')
• סמל: בחרו מערכת הסמלים המובנית
• הלוגו שלכם: השתמשו ב-favicon או לוגו של החנות שלכם

הודעות ברוכים הבאים והנושא

הגדרו את ההודעות המוגדרות כברירת מחדל שהצ'אטבוט שלכם מציג.

דוגמאות הודעת ברוכים הבאים

פשוט:
"👋 שלום! איך אוכל לעזור לכם היום?"

ידידותי:
"שלום! ברוכים הבאים ל-[שם החנות]. אני כאן כדי לעזור לכם למצוא את המוצר המושלם!"

מידעי:
"שלום! אני יכול לעזור לכם עם:
• חיפוש מוצרים
• בדיקת סטטוס הזמנה
• שאלות משלוח
מה אתם רוצים לדעת?"

דוגמאות טקסט מציין מקום

• "הקלידו את הודעתכם..."
• "שאלו אותי כל דבר..."
• "איך אוכל לעזור לכם?"
• "חפשו מוצרים או שאלו שאלה..."

דוגמאות אינדיקטור הקלדה

• "מחשבת..."
• "[שם הבוט] מקליד..."
• "מחפשת את התשובה הטובה ביותר..."
• "רגע אחד..."

כפתור ההשקה

התאימו את הכפתור הצף שפותח את ווידג'ט הצ'אט.

אנימציית ההשקה

בחרו כיצד כפתור ההשקה מתנהג:

• דופק: אנימציית דופק עדינה למשיכת תשומת לב
• קפיצה: אנימציית קפיצה עדינה
• סטטי: ללא אנימציה

גודל הווידג'ט

שלטו בממדים של חלון הצ'אט המורחב.

זימון בנייד

בהתקנים ניידים, הווידג'ט מכיל את עצמו באופן אוטומטי:

• מורחב לרוחב מסך מלא
• מצמצם גובה ל-70% של תצוגת יציאה
• מוסיף ריפוד אזור בטוח להתקנים עם חריצים
• מכיוונן שדה קלט למקלדת וירטואלית

הגדרות התנהגות

שלטו בהתנהגות הווידג'ט כאשר לקוחות מקיימים אינטראקציה איתו.

כללי נראות עמוד

שלטו היכן הווידג'ט מופיע:

הסתר בעמודים ספציפיים:
/checkout, /cart, /my-account

הצג רק בעמודי מוצר:
/product/*

הסתר בעמודי ניהול:
/wp-admin/*

CSS מותאם

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

הוספת CSS מותאם

1. פתחו את קטע CSS המותאם

   גללו לקטע CSS מותאם בתחתית הגדרות המראה.

2. הזינו כללי CSS

   הוסיפו את קוד ה-CSS שלכם בתיבת הטקסט. הכללים יוחלו על ווידג'ט הצ'אט.

3. תצוגה מקדימה של שינויים

   צפו בשינויים בפנל התצוגה המקדימה החיה.

4. שמירת הגדרות

   לחצו על שמור הגדרות כדי להחיל סגנונות מותאמים.

ייחוס מחלקה CSS

/* מיכל ווידג'ט */
.wooai-chat-widget { }

/* כפתור הפעלה */
.wooai-chat-launcher { }

/* חלון צ'אט */
.wooai-chat-window { }

/* כותרת */
.wooai-chat-header { }

/* אזור ההודעה */
.wooai-chat-messages { }

/* הודעות בודדות */
.wooai-message { }
.wooai-message--user { }
.wooai-message--bot { }

/* אזור קלט */
.wooai-chat-input { }
.wooai-chat-input-field { }
.wooai-chat-send-button { }

דוגמאות CSS מותאמות

/* הרחב את הווידג'ט */
.wooai-chat-window {
    width: 450px !important;
}

/* גופן מותאם */
.wooai-chat-widget {
    font-family: 'Your Custom Font', sans-serif !important;
}

/* בועות הודעה מעוגלות */
.wooai-message {
    border-radius: 20px !important;
}

/* הסתר את אינדיקטור המצב */
.wooai-chat-header-status {
    display: none !important;
}

שיטות טובות

מיתוג

• התאימו את הברנד שלכם: השתמשו בצבעים מלוח הצבעים של האתר שלכם
• טון עקבי: כתבו הודעות התואמות את קוול הברנד שלכם
• אוואטר מקצועי: השתמשו בתמונה נקייה וניתנת לזיהוי או emoji

חוויית משתמש

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

נגישות

• ניגודיות צבעים: ודאו שהטקסט ניתן לקריאה על רקע
• גודל גופן: שמרו על טקסט בגודל 14px לפחות לקריאות
• ניווט במקלדת: בדקו שהווידג'ט נגיש במלואו באמצעות מקלדת

פתרון בעיות

הווידג'ט לא מוצג

• בדקו שהווידג'ט מופעל בהגדרות
• ודאו שהעמוד הנוכחי לא נמצא ברשימת "הסתר בעמודים"
• נקו את זיכרון המטמון של הדפדפן וטענו מחדש
• בדקו שגיאות JavaScript בקונסול של הדפדפן

צבעים לא חלים

• ודאו ששמורות ההגדרות לאחר ביצוע שינויים
• נקו כל תוספי קיש
• בדקו אם CSS מותאם מעקף את ההגדרות שלכם

בעיות עמדה

• בדקו CSS מנוגד מהערכים שלכם
• התאימו ערכי סטייה כדי להימנע מחפיפת אלמנטים
• בדקו עם ערכים שונים כדי לבודד את הבעיה

בעיות תצוגה בנייד

• ודאו ש"הצג בנייד" מופעל
• בדקו בהתקנים בפועל, לא רק בשינוי גודל דפדפן
• בדקו עבור עימותי CSS מגיבים