الصفحة الرئيسية
إضافات
افكار

ويدجت دردشة واتساب: أداة فعالة للتواصل على موقعك

يعتبر صندوق دردشة واتساب أداة فعالة للتواصل الفوري، حيث يتيح للمستخدمين إرسال واستقبال الرسائل بشكل سريع ومباشر.
جمال الحزازي
Split Post - Split Article Into Several Pages
ويدجت دردشة واتساب: أداة فعالة للتواصل على موقعك (WhatsApp Chat Widget for Your Website)

السلام عليكم ورحمة الله وبركات

هل ترغب في تحويل موقعك الإلكتروني إلى نقطة تواصل حيوية مع زوارك؟ لا مزيد من الانتظار! مكون دردشة واتساب هو الحل المثالي الذي تحتاجه. في عالم سريع الخطى، حيث يفضل العملاء التواصل الفوري والحصول على إجابات سريعة، يأتي هذا المكون ليجعل تجربة المستخدم أكثر تفاعلية وسلاسة. من خلال دمج دردشة واتساب في موقعك، ستمنح زوارك وسيلة سهلة للتواصل، مما يزيد من احتمالية تحويلهم إلى عملاء دائمين. تابع القراءة لتكتشف كيف يمكن لمكون دردشة واتساب أن يعزز تواجدك الرقمي ويضيف قيمة حقيقية لموقعك!

تعريف مكون دردشة واتساب

مكون دردشة واتساب هو أداة تفاعلية تتيح للزوار التواصل المباشر مع أصحاب المواقع أو الشركات عبر تطبيق واتساب من خلال واجهة دردشة مدمجة في الموقع الإلكتروني. هذا المكون يسهل على الزوار إرسال استفساراتهم واستلام ردود سريعة دون الحاجة إلى مغادرة الموقع.

وظيفة مكون دردشة واتساب

وظيفة هذا المكون هي تمكين التواصل الفوري بين الزوار ومالك الموقع أو فريق الدعم. يمكن للمستخدمين إرسال رسائل نصية تتضمن استفساراتهم أو طلبات المساعدة مباشرة عبر واتساب، مما يعزز التفاعل المباشر ويقلل من وقت الانتظار للحصول على ردود.

مميزات مكون دردشة واتساب

  1. تواصل مباشر وفوري: يمكن للزوار الحصول على ردود سريعة على استفساراتهم، مما يحسن تجربة المستخدم.
  2. سهولة الاستخدام: واتساب هو تطبيق شائع ومعروف، مما يعني أن معظم المستخدمين سيكونون على دراية بكيفية استخدامه.
  3. زيادة التفاعل: يشجع المكون على التواصل المباشر، مما يمكن أن يؤدي إلى زيادة المبيعات أو تحسين خدمة العملاء.
  4. تكامل سهل: يمكن دمج المكون بسهولة مع المواقع المختلفة، ويأتي مع إعدادات مخصصة لتلبية احتياجات الموقع.

أهمية مكون دردشة واتساب

تتمثل أهمية مكون دردشة واتساب في تعزيز التفاعل بين الزوار والموقع، مما يساهم في بناء علاقات قوية مع العملاء. يساعد في تحسين سرعة الاستجابة وزيادة رضا العملاء، مما يمكن أن يؤثر إيجاباً على سمعة العلامة التجارية ويزيد من الولاء للعملاء.

تأثير مكون دردشة واتساب

استخدام مكون دردشة واتساب يمكن أن يكون له تأثير كبير على نجاح الموقع. من خلال تسهيل التواصل، يمكن أن يحسن المبيعات، يعزز خدمة العملاء، ويزيد من معدل التحويل. كما أن التواصل الفوري يساهم في بناء الثقة مع الزوار ويشجعهم على التفاعل بشكل أكبر.

ماذا يجب وضعه في الموقع

عند دمج مكون دردشة واتساب في الموقع، يجب الأخذ في الاعتبار بعض النقاط:

  • تحديد الموقع الاستراتيجي: يجب أن يكون المكون مرئيًا وسهل الوصول إليه، مثل وضعه في زاوية الصفحة السفلى.
  • تخصيص الرسائل: تأكد من تخصيص الرسائل الترحيبية وأي ردود تلقائية تتماشى مع هوية الموقع.
  • تجربة المستخدم: تأكد من أن المكون لا يعيق تجربة المستخدم أو يسبب إزعاجاً.

المواقع المناسبة لاستخدام مكون دردشة واتساب

  1. المتاجر الإلكترونية: في المتاجر الإلكترونية، يمكن لمكون دردشة واتساب تحسين تجربة التسوق من خلال تسهيل استفسارات العملاء حول المنتجات، تأكيد الطلبات، وحل المشكلات بسرعة.
  2. المدونات: في المدونات، يمكن أن يكون مفيدًا للتواصل مع القراء وتلقي تعليقاتهم أو اقتراحاتهم، لكن يمكن أن يكون أقل أهمية مقارنة بالمتاجر الإلكترونية التي تتطلب دعمًا مباشرًا.

بوجه عام، يكون مكون دردشة واتساب أكثر فائدة للمواقع التجارية مثل المتاجر الإلكترونية حيث يكون التواصل السريع مع العملاء أمرًا حيويًا لتحسين المبيعات والخدمة. بالنسبة للمدونات، يمكن أن يكون مفيدًا ولكن ليس بنفس الأهمية.

إذا كنت تفكر في دمج هذا المكون، تأكد من أن يتماشى مع استراتيجية الموقع واحتياجات جمهورك.

يمثل مكون صندوق دردشة واتساب أداة مبتكرة لتعزيز التواصل بين المستخدمين ومقدمي الخدمة، حيث يجمع بين سهولة الاستخدام وفعالية الوصول إلى الدعم، مما يسهم في تحسين تجربة المستخدم وزيادة التفاعل. جمال الحزازي
معاينة في UnPlug
ويدجت دردشة واتساب ويدجت دردشة واتساب ويدجت دردشة واتساب ويدجت دردشة واتساب

خطوات إضافة مكون دردشة واتساب إلى قالب بلوجر

تنبيه مهم قبل البدء: تأكد من أخذ نسخة احتياطية من قالب مدونتك قبل إجراء أي تغييرات. قم بعمل نسختين من القالب لتفادي أي مشاكل. استخدم محرر نصوص خارجي لتعديل القالب مثل Notepad++ للحاسوب، أو تطبيقات مثل JotterPad و QuickEdit للهواتف الذكية.

1. إضافة مكتبة jQuery

مكتبة jQuery:
في الكود الذي زودتني به، تُستخدم مكتبة jQuery. jQuery هي مكتبة JavaScript تتيح لك التعامل مع العناصر في صفحة الويب بطريقة أسهل وأكثر كفاءة. مهمتها الأساسية هي تبسيط التفاعل مع DOM (نموذج كائن المستند) ومعالجة الأحداث، مثل النقر على الأزرار.

لماذا يجب إضافته:
عند استخدام jQuery، يمكنك الاستفادة من وظائف متقدمة بشكل أسرع وأسهل من استخدام JavaScript النقي. في هذا الكود، تقوم jQuery بتوفير التفاعل مع مكون دردشة واتساب من خلال التعامل مع أحداث النقر وتغيير عرض عناصر الصفحة. يجب عليك إضافة مكتبة jQuery في أعلى مستند HTML، فوق وسم </head>.

الخطوة الأولى:

  1. إضافة كود jQuery:
    - تسجيل الدخول إلى حساب بلوجر:
    قم بتسجيل الدخول إلى لوحة التحكم بلوجر.
    - انتقل إلى لوحة تحكم بلوجر واختر "المظهر".
    - انقر على السهم بجانب التخصيص اختر تعديل HTML
    - ابحث عن </head> وضع الكود javascript استدعاء مكتبة جيكواري فوقه.

الملاحظة: تأكد من أنك في نفس صفحة محرر الأكواد.

الكود:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

ملاحظة: أضف الكود أعلاه مباشرة فوق وسم </head>. مكتبة jQuery ضرورية لتشغيل مكون دردشة واتساب بشكل صحيح، حيث تسهل التعامل مع أحداث الصفحة وتحديث العناصر بشكل ديناميكي.

2. إضافة كود CSS

الملاحظة: تأكد من أنك تعمل على نفس القالب الذي قمت بعمل نسخة احتياطية له.

الكود:

/* whatsapp chatbox by si1xyz */
svg {
    width: 22px;
    height: 22px;
    vertical-align: middle;
    fill: #000
}
.chatMenu,
.chatButton .svg-2 {
    display: none
}
a#send-it {
    color: #555;
    width: 55px;
    margin: 5px;
    font-weight: 700;
    padding: 10px;
    background: #f0f5fb;
    border-radius: 15px 3px 15px 15px;
    text-decoration: none
}
a#send-it:hover {
    opacity: .8
}
.chatStart input[type="text"] {
    padding: 10px;
    margin: 0;
    width: 80%;
    border: none;
    color: #555;
    text-align: right;
    direction: rtl
}
.chatStart input[type="text"]:focus {
    outline: none
}
.chatMenu {
    display: none
}
.chatButton {
    position: fixed;
    z-index: 999;
    right: 20px;
    bottom: 75px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: #25D366;
    visibility: visible;
    opacity: 1;
    transition: visibility .5s, opacity .5s
}
.chatButton:not([disabled])::before {
    content: '';
    position: absolute;
    z-index: -1;
    inset: 0;
    background: inherit;
    border-radius: inherit;
    animation: 1s cubic-bezier(0, 0, .2, 1) infinite wa-button-ping
}
.chatButton svg {
    width: 22px;
    height: 22px;
    fill: #fff
}
.chatButton svg.svg-2 {
    display: none
}
@keyframes wa-button-ping {

    75%,
    to {
        transform: scale(1.6);
        opacity: 0
    }
}
.chatBox {
    position: fixed;
    bottom: 130px;
    right: 20px;
    width: 320px;
    -webkit-transition: all .2s ease-out;
    transition: all .2s ease-out;
    z-index: 21;
    opacity: 0;
    visibility: hidden;
    line-height: normal
}
.chatContent {
    border-radius: 15px;
    background-color: #fff;
    box-shadow: 0 5px 15px 0 rgba(0, 0, 0, .05);
    overflow: hidden
}
.chatHeader {
    position: relative;
    display: flex;
    align-items: center;
    padding: 15px 20px;
    background-color: #299e94;
    overflow: hidden
}
.chatHeader img {
    border-radius: 100%;
    width: 50px;
    margin: -2px 0 0 10px
}
.chatHeader .chatTitle {
    padding-right: 16px;
    text-align: right;
    font-size: 14px;
    font-weight: 700;
    color: #fff
}
.chatHeader .chatTitle span {
    font-size: 11.5px;
    display: block;
    line-height: 1.58em
}
.chatHeader:before {
    content: "";
    bottom: 20px;
    right: 63.5px;
    width: 12px;
    height: 12px;
    box-sizing: border-box;
    background-color: #4dc247;
    display: block;
    position: absolute;
    z-index: 10;
    border-radius: 100%;
    border: 2px solid #299e94
}
.chatText {
    display: flex;
    flex-wrap: wrap;
    margin: 25px 20px;
    font-size: 12px;
    color: #505050
}
.chatText span {
    display: inline-block;
    margin-left: auto;
    padding: 10px 20px 10px 10px;
    background-color: #f0f5fb;
    border-radius: 15px 15px 15px 3px;
    text-align: right;
    direction: rtl
}
.chatText span:after {
    content: 'منذ لحظات';
    margin-right: 15px;
    font-size: 9px;
    color: #989b9f
}
.chatText span.typing {
    margin: 15px auto 0 0;
    padding: 10px 10px 10px 20px;
    border-radius: 15px 15px 3px 15px
}
.chatText span.typing:after {
    display: none
}
.chatBox .chatStart {
    display: flex;
    align-items: center;
    margin-top: 15px;
    padding: 18px 20px;
    border-radius: 10px;
    background-color: #fff;
    overflow: hidden;
    font-size: 12px;
    color: #505050;
    text-align: right;
    direction: rtl
}
.chatBox .contactBox {
    display: flex;
    align-items: center;
    margin-top: 15px;
    padding: 18px 20px;
    border-radius: 10px;
    background-color: #fff;
    box-shadow: 0 5px 15px 0 rgba(0, 0, 0, .05);
    font-size: 12px;
    color: #505050;
    text-align: right;
    direction: rtl
}
.contactBox {
    display: flex;
    align-items: center;
    padding: 10px;
    background-color: #f0f5fb;
    border-radius: 15px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    margin-top: 15px;
    font-size: 12px;
    color: #505050;
    position: relative
}
.phoneLink {
    position: absolute;
    left: 30px;
    background-color: #0283e9;
    border-radius: 50%;
    padding: 10px;
    transition: background-color 0.3s ease;
    animation: pulse 1.5s infinite
}
.phoneLink:hover {
    background-color: #7BAAF7
}
.phoneLink svg {
    width: 20px;
    height: 20px;
    fill: #fff
}
.contactBox span {
    margin-left: 50px
}
@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 1
    }
    50% {
        transform: scale(1.1);
        opacity: 0.7
    }
    100% {
        transform: scale(1);
        opacity: 1
    }
}
.chatMenu:checked+.chatButton {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg)
}
.chatMenu:checked+.chatButton svg.svg-1 {
    display: none
}
.chatMenu:checked+.chatButton svg.svg-2 {
    display: block
}
.chatMenu:checked~.chatBox {
    bottom: 150px;
    opacity: 1;
    visibility: visible
}
.drK a#send-it {
    color: #ddd;
    background: #333
}
.drK a#send-it:hover {
    opacity: .8
}
.drK .chatStart input[type="text"] {
    color: #ddd;
    background-color: #222;
    border: 1px solid #444
}
.drK .chatContent {
    background-color: #333;
    box-shadow: 0 5px 15px 0 rgba(0, 0, 0, .2)
}
.drK .chatText span {
    background-color: #444;
    color: #ddd
}
.drK .chatBox .chatStart {
    background-color: #333
}
.drK .chatBox .contactBox {
    background-color: #333
}
.drK .contactBox {
    background-color: #444
}

شرح كود CSS:
الكود CSS يحتوي على تصميم مكون دردشة واتساب ويشمل عدة عناصر رئيسية:

يمكنك استبدال اسم المعلمة .drK المستخدمة لتفعيل الوضع الداكن حسب القالب الذي تستخدمه. على سبيل المثال، يستخدم قالب "سيو بلاس" المعلمة dark-mode، بينما يستخدم قالب "سكويز" المعلمة dm.

  • .chatButton: هذا العنصر يمثل الزر العائم الذي يفتح دردشة واتساب. يمكن تغيير لونه، حجمه، وموقعه حسب الرغبة. تغيير الخصائص مثل background, border-radius, و box-shadow يمكن أن يغير مظهر الزر.
  • .chatBox: يمثل صندوق الدردشة الذي يظهر عند النقر على الزر. يمكن تعديل حجم الصندوق، ألوان الخلفية، والظل الخاص بالصندوق لتناسب تصميم موقعك.
  • .chatHeader: يحتوي على عنوان الدردشة وصورة. يمكنك تغيير التصميم باستخدام padding, background-color, و border-radius.
  • .contactBox: يعرض معلومات الاتصال وزر الاتصال الهاتفي. يمكن تغيير ألوان الخلفية، والتأثيرات مثل التمرير والظلال.

مكان وضع كود CSS:
ضع كود CSS في مكانه المناسب فوق وسم <b:skin> في قالب بلوجر.

اضافة كود CSS:

  1. لا زلت في نفس صفحة محرر الأكواد.
  2. ابحث عن وسم <b:skin> أو أي مكان يحتوي على أكواد CSS في القالب.
  3. الصق كود css فوق الوسم الذي اخبرتك به او اي مكان به اكواد css مخصص

ملاحظة: أضف كود CSS فوق وسم <b:skin>. هذا الكود يحدد تصميم مكون دردشة واتساب، مثل موقع الزر العائم وصندوق الدردشة. يمكنك تخصيص الألوان والأحجام حسب تصميم موقعك.

3. إضافة كود HTML

الكود:

<input class='chatMenu hidden' id='offchatMenu' type='checkbox'/>
<label class='chatButton' for='offchatMenu'>
  <svg class='svg-1' viewBox='0 0 32 32'><g><path d='M16,2A13,13,0,0,0,8,25.23V29a1,1,0,0,0,.51.87A1,1,0,0,0,9,30a1,1,0,0,0,.51-.14l3.65-2.19A12.64,12.64,0,0,0,16,28,13,13,0,0,0,16,2Zm0,24a11.13,11.13,0,0,1-2.76-.36,1,1,0,0,0-.76.11L10,27.23v-2.5a1,1,0,0,0-.42-.81A11,11,0,1,1,16,26Z'/><path d='M19.86,15.18a1.9,1.9,0,0,0-2.64,0l-.09.09-1.4-1.4.09-.09a1.86,1.86,0,0,0,0-2.64L14.23,9.55a1.9,1.9,0,0,0-2.64,0l-.8.79a3.56,3.56,0,0,0-.5,3.76,10.64,10.64,0,0,0,2.62,4A8.7,8.7,0,0,0,18.56,21a2.92,2.92,0,0,0,2.1-.79l.79-.8a1.86,1.86,0,0,0,0-2.64Zm-.62,3.61c-.57.58-2.78,0-4.92-2.11a8.88,8.88,0,0,1-2.13-3.21c-.26-.79-.25-1.44,0-1.71l.7-.7,1.4,1.4-.7.7a1,1,0,0,0,0,1.41l2.82,2.82a1,1,0,0,0,1.41,0l.7-.7,1.4,1.4Z'/></g></svg>
  <svg class='svg-2' viewBox='0 0 512 512'><path d='M278.6 256l68.2-68.2c6.2-6.2 6.2-16.4 0-22.6-6.2-6.2-16.4-6.2-22.6 0L256 233.4l-68.2-68.2c-6.2-6.2-16.4-6.2-22.6 0-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3l68.2 68.2-68.2 68.2c-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3 6.2 6.2 16.4 6.2 22.6 0l68.2-68.2 68.2 68.2c6.2 6.2 16.4 6.2 22.6 0 6.2-6.2 6.2-16.4 0-22.6L278.6 256z' /></svg>
</label>

<div class='chatBox'>
  <div class='chatContent'>
    <div class='chatHeader'>
      <img alt='Tedbree Logo' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqU1e0O8d_-IZu9zAvYcvY7hr8LQHY3GaQiSvkEae-Y31Pbe-qK1Y8CtXWfmSDZDGZETSu7jampoX83WsjT2CdxJsTVjBZ20Zy9iyQtiQS4KQ1F5XjLXEyqC_KMmAxQfYwfF8KQzRDJx_60ZJ148IH4iLQf0pmYHt7EVeI6DuN3mGPAJKImFGXqHv-DEn2/s2828/siwanelogo.webp'/>
      <div class='chatTitle'>صِوان محور XYZ <span>عادة يتم الرد خلال ساعة واحدة</span></div>
    </div>
    <div class='chatText'>
      <span>مرحبا&#1611;&#1548; كيف يمكننا مساعدتك&#1567;</span>
      <span class='typing'>...</span>
    </div>
  </div>
  <div class='chatStart'>
    <input id='chatInput' placeholder='اكتب رسالتك هنا' type='text'/>
    <a href='javascript:void;' id='send-it'>إرسال</a>
  </div>
  <div class='contactBox'>
    <a class='phoneLink' href='tel:+212722464243'>
      <svg height='100' viewBox='0 0 32 32' width='100' x='0px' y='0px'>
<path d='M26.963,7.254c-0.258-1.089-1.128-1.959-2.217-2.217c-5.803-1.376-11.688-1.376-17.492,0 C6.165,5.295,5.295,6.165,5.037,7.254C3.66,13.061,3.66,18.947,5.039,24.751c0.257,1.086,1.124,1.953,2.209,2.21 c2.904,0.689,5.828,1.034,8.752,1.034s5.848-0.345,8.752-1.034c1.085-0.257,1.952-1.124,2.209-2.209 C28.34,18.947,28.34,13.061,26.963,7.254z M9.2,10.75c0.44-1.03,2.25-1.88,3.66-1.73c0.86,0.08,2.18,1.71,2.25,3.09 c0.05,1.13-1.13,2.25-1.13,2.25s0.97,0.75,1.94,1.72c0.94,0.92,1.72,1.94,1.72,1.94s1.12-1.18,2.25-1.13 c1.38,0.07,3.01,1.39,3.09,2.25c0.15,1.41-0.7,3.22-1.73,3.66c-2.04,0.88-6.12-1.27-8.45-3.6C10.47,16.87,8.32,12.79,9.2,10.75z' />
</svg>
    </a>
  <b/> <span>يمكنك الاتصال مباشرة على الخط الساخن</span>
  </div>
</div>

شرح كود HTML:
الكود HTML يحدد الهيكل الأساسي لمكون الدردشة:

  • <input class='chatMenu' id='offchatMenu' type='checkbox'/>: عنصر الإدخال الذي يتحكم في ظهور صندوق الدردشة عند النقر على الزر. يستخدم بشكل غير مرئي لتشغيل وإيقاف مكون الدردشة.
  • <label class='chatButton' for='offchatMenu'>: الزر العائم الذي يفتح ويغلق صندوق الدردشة. يحتوي على أيقونات SVG.
  • <div class='chatBox'>: الصندوق الذي يحتوي على محتوى الدردشة. يشمل عنوان الدردشة، نصوص المحادثة، ومدخل النص للرسائل.
  • <div class='contactBox'>: يعرض تفاصيل الاتصال ورابط للاتصال مباشرة عبر الهاتف.

مكان وضع كود HTML وJavaScript:
ضع كود HTML وكود JavaScript في مكانه المناسب فوق وسم </body> في قالب بلوجر.

اضافة كودي html و js

  1. لا زلت في نفس صفحة محرر الأكواد.
  2. انتقل إلى المكان المناسب لإضافة كود HTML، عادة يكون بين وسم <body>.

الملاحظة: تأكد من إدراج الكود في الموضع الصحيح لضمان ظهور المكون بشكل صحيح على صفحة الويب.

ملاحظة: ضع كود HTML فوق وسم </body>. هذا الكود يحدد الهيكل الأساسي لمكون دردشة واتساب، بما في ذلك الزر العائم وصندوق الدردشة.

4. إضافة كود JavaScript

الملاحظة: تأكد من أنك تقوم بإضافة كود JavaScript بعد جميع العناصر الأخرى لضمان تحميل العناصر بشكل صحيح قبل تشغيل السكريبت.

الكود:

 <script>
//<![CDATA[
(function() {
    // تحقق من وجود النص في السكريبت
    if (!document.currentScript || !document.currentScript.textContent.includes('siwane.xyz')) {
        return; // توقف السكريبت إذا لم يكن الائتمان موجوداً
    }

    $('#send-it').click(whatsappchat);

    function whatsappchat() {
        /* إعدادات الواتساب */
        var walink = 'https://web.whatsapp.com/send',
            phone = '212722464243'; // رقم الواتس اب الخاص بك
        /* دعم الهاتف الذكي */
        if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
            walink = 'whatsapp://send';
        }
        var inputChat = $('#chatInput').val(), //أخذ إدخال رسالة المستخدم
            input_viaUrl = location.href; //يسترد عنوان URL الحالي
        var si1xyz_whatsapp = walink + '?phone=' + phone + '&text=' + inputChat + '%0A%0A' + 'تم الإرسال من : ' + input_viaUrl;
        /* افتح نافذة الواتس اب  */
        window.open(si1xyz_whatsapp, '_blank');
        window.location.href = input_viaUrl; //تحديث الصفحة بعد الإرسال
    }
})();
//]]>
</script>

شرح كود JavaScript:
الكود JavaScript يتعامل مع التفاعل مع المستخدم. عندما ينقر المستخدم على زر "إرسال" (أو يقوم بكتابة رسالة)، يتم فتح نافذة واتساب جديدة مع رسالة معدة مسبقاً.

  • $('#send-it').click(whatsappchat);: هذا السطر يربط وظيفة whatsappchat بحدث النقر على الزر "إرسال".
  • function whatsappchat() { ... }: الدالة التي يتم استدعاؤها عند النقر على الزر. تقوم بإعداد الرابط لفتح واتساب مع النص المدخل في مربع النص.
  • window.open(si1xyz_whatsapp, '_blank');: يفتح نافذة جديدة بالربط الذي تم إنشاؤه.

مكان وضع كود JavaScript:
ضع كود JavaScript في أسفل صفحة HTML، فوق وسم </body>، لضمان تحميل جميع العناصر قبل تشغيل السكريبت.

  1. إضافة كود JavaScript:
    - ابقى في نفس صفحة محرر القالب.
    - ابحث عن </body> وضع الكود JavaScript فوقه.
    - بمجرد لصق الاكواد، احفظ التغييرات بالنقر فوق هذا الرمز

ملاحظة: أضف كود JavaScript فوق وسم </body>. هذا الكود يتعامل مع التفاعل مع المستخدم ويشمل إرسال الرسائل عبر واتساب عند النقر على الزر "إرسال".

ملحوظة أخيرة: تأكد من التحقق من عمل كل جزء من الكود بعد إضافته لضمان تكامل الوظائف وعدم وجود أخطاء. إذا واجهت أي مشاكل، يمكنك الرجوع إلى النسخة الاحتياطية التي قمت بإنشائها.

انتبه على كود javascript مع html مدمجين لا تفصل بينهم يمكنك اضافتهم معا فوق وسم غلق </body>, يفضل ان تنزل ملف الاكواد من صندوق التحميل ذلك لان الاكواد في الصندوق هي نموذج لشرح و التوضيح الاكواد تفتقر الى الضغط و الاختزال اوببساطة يمكنك ادخل على ادوات صوان اضغط الاكواد من صندوق الشرح

Whatsapp ChatBox Coding 641K SiwaneXYZ .zip
سؤال: ما هو مكون دردشة واتساب ولماذا أحتاجه لموقعي؟

✦ جواب: مكون دردشة واتساب هو أداة تفاعلية تسمح لزوار موقعك بالتواصل معك عبر تطبيق واتساب بسهولة، مما يعزز تجربة المستخدم ويزيد من فرص التفاعل مع العملاء.

سؤال: كيف يمكنني إضافة مكون دردشة واتساب إلى موقعي الإلكتروني؟

✦ جواب: يمكنك إضافة مكون دردشة واتساب من خلال تضمين كود HTML وJavaScript المناسب في موقعك، أو استخدام مكونات إضافية تسهل هذه العملية في أنظمة إدارة المحتوى.

سؤال: هل يدعم مكون دردشة واتساب جميع الأجهزة المحمولة؟

✦ جواب: نعم، مكون دردشة واتساب مصمم ليكون متجاوبًا، مما يضمن عمله بسلاسة على جميع الأجهزة المحمولة والأجهزة اللوحية وأجهزة الكمبيوتر.

سؤال: هل يمكنني تخصيص مظهر مكون دردشة واتساب ليتناسب مع تصميم موقعي؟

✦ جواب: بالتأكيد! يمكنك تخصيص الألوان والأشكال للمكون ليتناسب مع هوية موقعك التجارية، حيث توفر معظم المكونات خيارات تخصيص مرنة.

خاتمة

في ختام هذا البحث، لا يمكن إنكار أهمية مكون دردشة واتساب في تعزيز تفاعل المستخدمين مع المواقع الإلكترونية. إن دمجه في موقعك ليس مجرد خيار، بل هو خطوة استراتيجية نحو تحسين خدمة العملاء وزيادة المبيعات. لذا، إذا كنت تسعى لخلق تجربة فريدة لزوارك، فلا تتردد في اتخاذ هذه الخطوة الجريئة. دع دردشة واتساب تكون جسر التواصل الذي يربطك بعملائك ويجعل موقعك في صدارة المنافسة. ابدأ الآن وراقب كيف ستتغير ديناميكية تواصلك مع جمهورك!

منشورات ذات صلة

شكرًا لمساعدة ChatGPT في إعداد هذا المقال

المصادر:
siwaneSiwaneXYZ©
https://www.siwane.xyz/2024/10/whatsapp-chat-widget-for-your-website.html

عن المؤلف

جمال الحزازي
مرحبا انا منشئ محتوى رقمي (صِوانˣʸᶻ) مهتم بالتصميم ui/ux، مدون في مجال التقنية و العلوم تعرف على المزيد.
اشتري لي كوب قهوة ☕

إرسال تعليق

اكتب تعليقك 🤗، لكن تيقن ان كلماتك تعبر عن من انت.
"لا يقال قف لاراك بل تكلم لأعرفك"