3 דרכים להוספת כפתור יצירת קשר בוואטסאפ לאתר

מה זה כתפור יצירת קשר בוואטסאפ ולמה צריך אותו

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

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

ואטסאפ איפשרו יצירת קישור בעזרת פורמט פשוט שנראה ככה:
https://api.whatsapp.com/send?phone={your phone}&text={your text}
במקום {your phone} צריך להכניס את מספר הטלפון שלכם (עם קידומת בינלאומית בלי הפלוס) ובמקום {your text} צריך להכניס את הטקסט שאתם רוצים שישלח (עם + או עם %20 במקום הרווחים)

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

איך ליצור כפתור יצירת קשר באמצעות אלמנטור

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

תחת הלשונית טמפלטים נכנס לבונה התבניות ושם נבחר לערוך את התבנית של הפוטר שבה אנחנו משתמשים באתר.

נוסיף איזור מעל הפוטר, נגדיר אותו שיהיה ברוחב מלא ונכניס אליו וידג'ט מסוג אייקון

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

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

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

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

אחרי שנשמור את העבודה שלנו, הכפתור יתווסף לכל האתר (בכל מקום שהפוטר מופיע)

איך להוסיף כפתור יצירת קשר בוואטסאפ באמצעות תוסף

יש אין-סוף תוספים לוורדפרס שיכולים לעשות את העבודה
אם אתם מחפשים פתרון פשוט שרק יציג כפתור לשליחת הודעה – אתם יכולים להשתמש בWP Sticky Button

אם אתם מחפשים תוסף קצת יותר מורכב, שיתן ללקוח אפשרות לבחור למי לשלוח הודעה או איזה הודעה לשלוח, אתם יכולים להשתמש בוידג'ט החדש של unlimited Elements – Whatsapp Chat שמאפשר לכם לתת לגולש לבחור בין מספר "נציגים" לשליחת הודעה, ונותן לו גם להקליד את ההודעה שהוא רוצה לשלוח (התוסף הזה הוא הרחבה לאלמנטור, אז הוא אפשרי רק אם אתם משתמשים באלמנטור).

סרטון הסבר על הוידג'ט של Unlimited elements

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

מה בעצם אנחנו צריכים לעשות?

• ליצור קישור לשליחת הודעה בוואטסאפ ולשמור אותו כמשתנה (שורה 2 בקוד למטה)
• למצוא את הלוגו שאנחנו רוצים להשתמש בו (בקוד למטה מוצג קישור ללוגו מהאתר של וואטסאפ, אין לי זכויות יוצרים עליו ואני לא ממליץ להשתמש בו)
• ליצור אלמנט html מסוג <a>
• להגדיר לאלמנט מיקום קבוע (fixed) ומיקום צמוד לתחתית (bottom:0)
• להגדיר לאלמנט z-index גבוה (כדי שיופיע מעל שאר הדברים באתר)
• ליצור אלמנט תמונה
• להגדיר לאלמנט תמונה גודל
• להוסיף את האלמנט שיצרנו לDOM

function addLogoCTA() {
    var link = "https://api.whatsapp.com/send?phone=9720542382870&text=%D7%AA%D7%95%D7%93%D7%94%20%D7%A2%D7%9C%20%D7%94%D7%9E%D7%93%D7%A8%D7%99%D7%9A%20%D7%94%D7%9E%D7%93%D7%94%D7%99%D7%9D";
    var logo = 'https://static.whatsapp.net/rsrc.php/yz/r/lOol7j-zq4u.svg';
    var tag = document.createElement("a");
    tag.style.position = "fixed";
    tag.style.bottom = "0";
    tag.style.zIndex = "100";
    tag.href = link;
    tag.target = "_blank";
    tag.rel = "noopener noreferrer";
    var ctaButton = document.createElement('img');
    ctaButton.style.height = "50px";
    ctaButton.src = logo;
    tag.appendChild(ctaButton);
    document.body.appendChild(tag);
}
addLogoCTA();
Code language: JavaScript (javascript)

את הקוד הזה נוסיף לפוטר בכל דף שנרצה להציג בו את הכפתור (אפשר לעשות את זה רוחבית בכל האתר דרך תוסף כמו Insert Headers And Footer או דרך אלמנטור.
במקום זה אפשר להוסיף את הקוד הבא לfunctions.php של התבנית בת כדי להגיע לאותה התוצאה

add_action( 'wp_footer', 'my_footer_scripts' );
function my_footer_scripts(){
  ?>
  <script>

function addLogoCTA() {
    var link = "https://api.whatsapp.com/send?phone=9720542382870&text=%D7%AA%D7%95%D7%93%D7%94%20%D7%A2%D7%9C%20%D7%94%D7%9E%D7%93%D7%A8%D7%99%D7%9A%20%D7%94%D7%9E%D7%93%D7%94%D7%99%D7%9D";
    var logo = 'https://static.whatsapp.net/rsrc.php/yz/r/lOol7j-zq4u.svg';
    var tag = document.createElement("a");
    tag.style.position = "fixed";
    tag.style.bottom = "0";
    tag.style.zIndex = "100";
    tag.href = link;
    tag.target = "_blank";
    tag.rel = "noopener noreferrer";
    var ctaButton = document.createElement('img');
    ctaButton.style.height = "50px";
    ctaButton.src = logo;
    tag.appendChild(ctaButton);
    document.body.appendChild(tag);
}
addLogoCTA();

</script>
  <?php
Code language: JavaScript (javascript)