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

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

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

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

1) הוספת הקוד שיוסיף לנו את הפונקציה

כמו שתוכלו לראות הקוד מורכב מקוד PHP שמוסיף לנו את הפונקציה לשליחת ההודעה בתוספת פרטי המוצר, ובנוסף יש את קוד ה – CSS לעיצוב של השורטקוד שיראה כמו כפתור ווטסאפ.

את הקוד אנחנו נטמיע בתוסף סניפט או בתבנית בת.

PHP
function whatsapp_chat_link_shortcode($atts) {
    ob_start(); ?>
    <style>
        .whatsapp-button {
            display: inline-block;
            padding: 12px 24px;
            background-color: #37C43B;
            color: #ffffff; 
            text-decoration: none;
            border-radius: 100px; 
            border: 2px solid #ffffff; 
            transition: background-color 0.3s, color 0.3s, transform 0.2s;
            text-align: center;
        }

        .whatsapp-button:hover {
            color: #ffffff; 
            transform: scale(1.1); 
        }
    </style>

    <script>
        function generateWhatsAppLink() {
            var title = encodeURIComponent("היי, אשמח לקבל פרטים נוספים על המוצר: <?php echo get_the_title(); ?>");
            var url = encodeURIComponent("<?php echo wp_get_shortlink(); ?>");
            var phoneNumber = '972501234567';
            var whatsappLink = "https://api.whatsapp.com/send/?phone=" + phoneNumber + "&text=" + title + "%0D%0A" + url;
            window.open(whatsappLink, '_blank');
        }
    </script>

    <a href="javascript:void(0);" class="whatsapp-button" onclick="generateWhatsAppLink()">
        <span>תשאלו אותנו בווטסאפ</span>
    </a>
    <?php
    return ob_get_clean();
}

// Register the shortcode
add_shortcode('whatsapp_chat_link', 'whatsapp_chat_link_shortcode');

שימו לב רק לשנות את מספר הטלפון בשורה 26 למספר שאליו תרצו לקבל את ההודעה.

תוכלו לשנות את ההודעה בווטסאפ בשורה 24, ואת הטקסט על הכפתור תוכלו לשנות בשורה 33.

2) נוסיף את השורטקוד בעמוד סינגל באלמנטור

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

PHP
[whatsapp_chat_link]

עכשיו נבצע שמירה והנה התוצאה:

נתקלתם בבעיה? תכתבו לי בתגובות ואשמח לעזור לכם!

3 תגובות

כתיבת תגובה

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

WhatsApp-Image-2021-08-24-at-12.41.04
מיכאל אלחיאני
עוזר לבעלי עסקים למקסם את הפוטנציאל הדיגיטלי שטמון בעסק שלהם, באמצעות אתר אינטרנט חכם, שיודע למקסם את הרווח מכל לקוח שרוכש באתר,

בעל תואר ראשון B.A. במנהל עסקים ותעודת 'מנתח מערכות מידע' מטעם הלשכה לטכנולוגיות המידע בישראל.
העדכונים שלא תרצו לפספס
הירשמו ותהיו הראשונים לקבל את המדריכים הכי חמים למייל.
אלמנטור
אנימציות מיוחדות לטקסט עם GSAP
הוספת אנימציות מרהיבות לטקסט עם ספריית GSAP
ווקומרס
הגדלת מכירות באמצעות יצירת מוצרים קשורים עם ג'ט
במדריך זה נלמד איך להגדיל את המכירות באמצעות יצירת מוצרים קשורים עם ג'ט.
אלמנטור
יצירת אפקט מעבר צבע בכפתור אלמנטור
שדרגו את הנראות של הכפתורים באתרים שלכם.
אלמנטור
כפתורי יצירת קשר מתרחבים במעבר עכבר
רוצים להגדיל את ההמרות באתר? הוסיפו כפתורי יצירת קשר שנגללים עם העמוד!
אלמנטור
יצירת אפקט הופעה לאלמנטים במעבר עכבר עם אלמנטור
נמאס לכם להשתמש באותם עיצובים משעממים? המדריך הזה הוא בשבילכם.
חיפוש חופשי
העדכונים שלא תרצו לפספס
הירשמו ותהיו הראשונים לקבל את המדריכים הכי חמים למייל.
הרשימה מתעדכנת כל הזמן - מומלץ לשמור את הדף במועדפים!
כדי לשמור את האתר לחצו על Ctrl+D במקלדת (במק D+⌘).