כפתור פתיחה מותאם
הוסיפו כפתור או קישור בכל מקום באתר שלכם כדי לפתוח את ווידג'ט הצ'אט
כברירת מחדל, מבקרים פותחים את הצ'אט על ידי לחיצה על סמל הצ'אט הצף בפינת הדף שלכם. אבל תוכלו גם להוסיף כפתור או קישור מותאם אישית משלכם — בסרגל הניווט, קטע הגיבור, אזור CTA או בכל מקום אחר — שפותח את ווידג'ט הצ'אט בלחיצה.
טיפ: זה מצוין להוספת קישור "שוחחו איתנו" בסרגל הניווט של האתר, כפתור "קבלו עזרה" בדף מוצר, או CTA שפותח את הצ'אט ישירות.
איך זה עובד
לאחר שסקריפט ווידג'ט Asyntai מותקן בדף שלכם, הוא חושף API JavaScript גלובלי ב-window.AsyntaiWidget. תוכלו לקרוא לשיטות שלו כדי לשלוט בווידג'ט הצ'אט באופן תכנותי.
שיטות זמינות
// Open the chat widget
window.AsyntaiWidget.open();
// Close the chat widget
window.AsyntaiWidget.close();
// Toggle open/close
window.AsyntaiWidget.toggle();
דוגמה בסיסית
הוסיפו כפתור בכל מקום ב-HTML שלכם וצרפו מטפל לחיצה שקורא ל-window.AsyntaiWidget.open():
<button onclick="window.AsyntaiWidget.open()">Chat with us</button>
זהו. כאשר מבקר לוחץ על הכפתור, ווידג'ט הצ'אט ייפתח.
דוגמת סרגל ניווט
הוסיפו קישור "שוחחו איתנו" לניווט של האתר שלכם:
<nav>
<a href="/">Home</a>
<a href="/products">Products</a>
<a href="/about">About</a>
<a href="#" onclick="event.preventDefault(); window.AsyntaiWidget.open();">Chat with us</a>
</nav>
הערה: השתמשו ב-event.preventDefault() בקישורי עוגן כדי למנוע מהדף לגלול למעלה בלחיצה.
דוגמת כפתור מעוצב
צרו כפתור CTA בולט יותר עם עיצוב מותאם:
<style>
.chat-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 28px;
background: #6366f1;
color: #fff;
border: none;
border-radius: 50px;
font-size: 15px;
font-weight: 500;
cursor: pointer;
transition: all 0.25s ease;
box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3);
}
.chat-btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 24px rgba(99, 102, 241, 0.45);
}
.chat-btn:active {
transform: translateY(0);
}
.chat-btn svg {
width: 18px;
height: 18px;
fill: currentColor;
}
</style>
<button class="chat-btn" onclick="window.AsyntaiWidget.open()">
<svg viewBox="0 0 24 24">
<path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12z"/>
</svg>
Chat with us
</button>
דוגמת כפתור החלפה
אם אתם רוצים כפתור יחיד שפותח וסוגר את הצ'אט:
<button onclick="window.AsyntaiWidget.toggle()">Toggle Chat</button>
בדיקה אם הווידג'ט מוכן
הווידג'ט נטען באופן אסינכרוני, כך שאם הכפתור שלכם עלול להילחץ לפני שהווידג'ט מסיים להיטען, עליכם לבדוק תחילה את מאפיין initialized:
<script>
function openChat() {
if (window.AsyntaiWidget && window.AsyntaiWidget.initialized) {
window.AsyntaiWidget.open();
} else {
// Widget not ready yet — optionally show a message
alert('Chat is loading, please try again in a moment.');
}
}
</script>
<button onclick="openChat()">Chat with us</button>
טיפ: ברוב הדפים, הווידג'ט מאותחל תוך שנייה. בדיקת initialized נחוצה רק אם הכפתור שלכם מופיע מוקדם מאוד בדף (למשל, מעל הקפל באתר שנטען מהר).
הסתרת סמל הצ'אט הברירת מחדל
אם אתם רוצים להחליף לחלוטין את סמל הצ'אט הצף בכפתור מותאם משלכם, תוכלו להסתיר אותו עם CSS:
<style>
#mccs-chat-button {
display: none !important;
}
</style>
אזהרה: אם אתם מסתירים את סמל הצ'אט ברירת המחדל, ודאו שהכפתור המותאם שלכם גלוי בבירור בכל דף. אחרת מבקרים לא ידעו שהצ'אט זמין.
תיעוד API מלא
| שיטה | תיאור |
|---|---|
AsyntaiWidget.open() |
פותח את ווידג'ט הצ'אט |
AsyntaiWidget.close() |
סוגר את ווידג'ט הצ'אט |
AsyntaiWidget.toggle() |
מחליף את מצב הצ'אט בין פתוח לסגור |
AsyntaiWidget.initialized |
Boolean — true כאשר הווידג'ט מוכן |