וואטסאפ חצה את סף 2 מיליארד משתמשים בעולם. ולא רק בעולם הפופולריות שלו גבוהה, אלא גם כאן בישראל. כמעט כולם עושים שימוש יומיומי בוואטסאפ. ע"פ סקר QualiTest, 97% מהישראלים שגולשים באינטרנט, 97% מהם עושים שימוש בוואטסאפ.
העסקים המצליחים, הם אלו שיודעים להתאים את עצמם לשינויים, ולכן עסקים רבים היום מאפשרים פנייה ישירה וקבלת שירות דרך הוואטסאפ כדי להקל על המשתמשים ליצור קשר עם העסק או החברה.
במאמר הבא נדבר על איך מתקנים וואטסאפ באתר באמצעות 3 דרכים:
- התקנת תוסף וורדפרס מהירה
- יצירת אלמנט וואטסאפ מתוך אלמנטור
- הטמעת קוד ישירה באמצעות HTML
הוספת וואטסאפ לאתר באמצעות תוסף וורדפרס
התוסף שעליו אני ממליץ הוא תוסף JOIN.CHAT אותו ניתן להוריד ישירות מספריית התוספים של וורדפרס. אני משתמש בתוסף הזה בגלל האפשרויות הבסיסיות הטובות שהתוסף מאפשר לי כמו למשל התאמה של הטקסט, הנעה לפעולה ועוד כמה פיצ'רים קטנים ומיד נסקור אותם:
יש להתקין את התוסף ולהפעיל, ועם הפעלת התוסף תפתח לשונית חדשה בלוח הבקרה הנקראת JOIN.CHAT.
פיצ'רים:
- Telephone – מספר הוואטסאפ אליו תרצו לקשר
- Message – שדה הודעה מובנית איתה הלקוח יוכל להתחיל את השיחה. למשל: "שלום שלמה, אשמח לקבל פרטים נוספים בנוגע לבניית אתרים"
כאן גם ניתן להשתמש בערכים מוגדרים כמו למשל שם הכותרת, כתובת URL או שם האתר. וזה יראה כך: "שלום שלמה, אשמח לקבל מידע בנוגע ל(שם הדף – הוספת וואטסאפ לאתר}". - Image – תוכלו להחליף את תמונות הוואטסאפ בתמונה משלכם, למשל לוגו העסק. ההמלצה היא להשאיר את לוגו הוואטסאפ כדי להקל על משתמשים לזהות את הוואטסאפ
- Tooltip – הוא שדה שנותן מידע קל אודות מטרת השיחה. למשל: “זקוקים לייעוץ?”
- Position on Screen – מיקום הכפתור. האם הכפתור יופיע בצד שמאל או בצד ימין
- Button Delay – האם תרצו שכפתור הוואטסאפ ייפתח מיד או תרצו לתת זמן השהייה של כמה שניות?
- Mobile Only – האם הכפתור יהיה זמין רק בטלפונים ניידים?
- WhatsApp Web – האם לפתוח בוואטסאפ-ווב?
- Call to Action – שדה הנעה לפעולה שיגרום למשתמש להתחיל אתכם את השיחה. כאן ניתן להכניס את ההבטחה השיווקית או את מטרת השיחה. למשל: “נעים מאוד, אנחנו צריח מדיה – איפיון ובניית אתרים לפי דרישה, ואני כאן כדי לבנות לכם את האתר הבא שלכם בצורה מושקעת ומטופחת”
- Button Text – כפתור התחלת השיחה. למשל: בואו נדבר בוואטסאפ
- Theme Color – ניתן לשנות את צבע הכפתורים
- Dark Mode – האם להפעיל מצב כהה?
- Header – האם יופיע כפתור הוואטסאפ, לוגו העסק או בכלל לוגו התוסף. ההמלצה היא להשאיר לוגו וואטסאפ
- Chat Delay – כמה זמן להשוה עד שתפתח חלונית השיחה עם טקסט ההנעה לפעולה
- Page Views – לכמה דפים להשאיר את כפתור הצ’אט פתוח (זה של ההנעה לפעולה*)
- Notification Balloon – האם רק להציג את כפתור הוואטסאפ ללא הודעה נפתחת. ההמלצה היא לסמן את התיבה.
הוספת וואטסאפ לאתר עם אלמנטור
באמצעות אלמנטור (או כל עורך ויזואלי אחר), ניתן להוסיף וואטסאפ לאתר.
יש לגשת אל ההדר או הפוטר (רצוי פוטר), ליצור אזור תוכן חדש, להוסיף אלמנט אייקון, לשנות את האייקון לזה של וואטסאפ, להתאים צבעים ולהגדיר את מיקום האייקון.
הגדרת המיקום תיעשה באמצעות עריכת האייקון > מתקדם > התאמת רוחב > התאמת מיקום.
כפתור וואטסאפ לאתר עם קוד HTML
אם אתם לא מעוניינים בהתקנת תוסף או אם אתם עובדים עם ממשק אתר אחר שהוא לא וורדפרס (למה?), ניתן לבצע הוספת וואטסאפ לאתר באמצעות קוד HTML.
להלן קוד ה-HTML:
<!-- font awesome -->
<link data-minify="1" rel="stylesheet" href="https://rooks.co.il/wp-content/cache/min/1/font-awesome/4.5.0/css/font-awesome.min.css?ver=1741022035">
/* WhatsApp icon */
<a
href="https://wa.me/0584458206"
class="chat"
target="_blank"
rel="noopener noreferrer"
>
<i class="fa fa-whatsapp whatsapp-icon"></i>
</a>
ובקובץ ה-CSS יש להוסיף את הגדרות העיצוב:
/* desktop */
.chat {
position: fixed;
width: 60px;
height: 60px;
bottom: 40px;
right: 40px;
background-color: #25d366;
color: #FFFFFF;
border-radius: 50px;
text-align: center;
font-size: 30px;
box-shadow: 2px 2px 3px #999;
z-index: 100;
}
.whatsapp-icon {
margin-top: 16px;
}
/* mobile */
@media screen and (max-width: 767px) {
.whatsapp-icon {
margin-top: 10px;
}
.chat {
width: 40px;
height: 40px;
bottom: 20px;
right: 10px;
font-size: 22px;
}
}
עד כאן מדריך הוספת וואטסאפ לאתר, מקווה שהמדריך היה מועיל. לכל שאלה אנחנו כאן.
