كيفية إضافة زر Apple Business Chat إلى موقع WordPress الخاص بك

نشرت: 2021-03-01

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

جدول المحتويات إخفاء

1. الخطوة 1: قم بالتسجيل في Business Chat
2. الخطوة 2: قم بإضافة مكتبة Javascript
1. 2.1. الطريقة الأولى: تحرير التعليمات البرمجية في ملف النسق
2. 2.2. الطريقة الثانية: استخدام البرنامج المساعد Slim SEO
3. الخطوة 3: اعرض زر محادثة العمل في الموضع المطلوب
4. الكلمات الأخيرة

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

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

الخطوة 1: قم بالتسجيل في Business Chat

أولاً ، انتقل إلى صفحة Apple Business Register وقم بالتسجيل في Business Chat باستخدام معرف Apple الخاص بك. الأمر سهل للغاية ، لذا لن أخوض في التفاصيل.

الآن ، لديك بالفعل معرف دردشة الأعمال الخاص بك. احفظ هذا المعرف في مكان ما لأنك ستحتاج إليه في الخطوة التالية.

الخطوة 2: قم بإضافة مكتبة Javascript

بعد ذلك ، يجب عليك إضافة مكتبة Javascript لعرض زر Business Chat إلى موقع الويب. هناك طريقتان للقيام بذلك:

الطريقة الأولى: تحرير التعليمات البرمجية في ملف النسق

ابحث عن علامتي <head></head> أو </body> في ملف المظهر. ستكون مواقعهم مختلفة حسب الموضوع. على سبيل المثال ، أنا أستخدم سمة Justread ، لذا فإن علامة <head><head> موجودة في ملف header.php وعلامة </body> في ملف footer.php .

بعد العثور على هذه العلامة أعلاه ، أضف هذا الرمز قبل علامة </body> أو في علامة <head><head> :

 <script src = "https://static.cdn-apple.com/businesschat/start-chat-button/2/index.js"> </script>

الطريقة الثانية: استخدام البرنامج المساعد Slim SEO

بخلاف تحرير الكود في ملف السمة ، يمكنك استخدام البرنامج المساعد Slim SEO لإضافة الكود دون الانتقال إلى ملف السمة والبحث عن علامتي <head><head> و </body> .

Slim SEO مجاني تمامًا ، لذا يمكنك العثور عليه بسهولة على wordpress.org. في لوحة تحكم المسؤول ، انتقل إلى المكونات الإضافية > إضافة جديد ، ثم قم بتثبيت المكون الإضافي وتنشيطه كالمعتاد.

Slim SEO - إضافة WordPress SEO سريعة وآلية

المؤلف (المؤلفون): eLightUp

الإصدار الحالي: 3.11.1

تاريخ التحديث الأخير: 16 نوفمبر 2021

Slim-seo.3.11.1.zip

92٪ التقييمات 10،000+ يتطلب WP 4.5+ التثبيت

بعد ذلك ، انتقل إلى الإعدادات > Slim SEO وأضف الكود أعلاه إلى أقسام Header Code أو Body Code .

ولا تنس النقر فوق حفظ .

بالإضافة إلى ذلك ، يحتوي Slim SEO على العديد من الميزات المفيدة الأخرى لمساعدتك على تحسين مواقع WordPress تلقائيًا لتحسين محركات البحث. يمكنك معرفة المزيد عن هذه الميزات هنا.

الخطوة 3: اعرض زر محادثة الأعمال في الموضع المطلوب

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

 <div class = "apple-class-name" apple-attribute-name> </div>

أجعل مثالا مع سمة في شكل data-apple-business-id . هل تتذكر المعرف الذي تم التقاطه في الخطوة 1؟ الآن ، حان الوقت لاستخدامه. المعرف الخاص بي هو ca0db090 وأريد إضافة زر الدردشة في شعار container-style ، لذا فإن علامة <div> هي:

 <div class = "apple-business-chat-banner-container" data-apple-business-> </div>

لاحظ أن السمة data-apple-business-id مطلوبة. يتم استخدامه لتحديد مالك معرف محادثة الأعمال وإرسال رسائلك إليهم.

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

فصول لعرض الدردشة أو أزرار الاتصال:

apple-business-chat-banner-container : اعرض أزرار الدردشة والمكالمة
apple-business-chat-message-container : عرض زر الدردشة فقط
apple-business-chat-phone-container : عرض زر الاتصال فقط
إلخ

سمات لتخصيص عرض أزرار الدردشة / الاتصال (الألوان ، الخطوط ، الحجم ، ...)

data-apple-banner-font-family : اختر خطًا عائليًا لزر الحث على اتخاذ إجراء
data-apple-banner-icon-background-color : اختر لون الخلفية (الدائرة) للرمز
data-apple-banner-icon-color : اختر ألوان الدردشة وأزرار الاتصال
إلخ.

السمات المتعلقة بالتفاعل بين العملاء ومالكي مواقع الويب:

data-apple-business-group-id : حدد القسم الذي يستقبل المكالمات / الرسائل. على سبيل المثال ، يمكنك تعيين معرف أقسام "خدمة العملاء" أو "الدعم الفني" لهذه السمة.
Data-apple-business-phone : أدخل رقم الهاتف الذي يستخدمه المستخدمون للاتصال بك إذا لم يتمكنوا من الدردشة. في حالة عدم إضافة هذه السمة ، سيتم إخفاء زر الاتصال .
إلخ.

بالإضافة إلى ذلك ، يمكنك العثور على جميع سمات وفئات Apple هنا.

بعد الحصول على علامات <div> المطلوبة ، قم بإضافتها إلى الموضع المطلوب باستخدام محرر HTML. على سبيل المثال ، أرغب في عرض زر Business Chat في عنصر واجهة مستخدم في تذييل سمة Justread وإليك طريقة القيام بذلك.

في لوحة تحكم المسؤول ، انتقل إلى المظهر > عنصر واجهة المستخدم ، واختر أداة HTML المخصصة ، ثم اختر عرض الأداة على التذييل.

بعد ذلك ، أدخل الكود التالي في الأداة:

 <div>
	class = "apple-business-chat-banner-container"
	بيانات-تفاح-أعمال-
	data-apple-business-phone = "0987725475"
	data-apple-banner-cta = "هل لديك أسئلة؟ يمكننا المساعدة."
	data-apple-banner-Context = "تحدث مع أحد المحترفين لدينا للحصول على عرضك لـ iPhone Xs."
	data-apple-banner-scale = "1"
	data-apple-banner-background-color = "rgb (27 ، 63 ، 104)"
	data-apple-banner-text-color = "rgb (255 ، 255 ، 255)"
	data-apple-banner-icon-background-color = "rgb (255 ، 255 ، 255)"
	data-apple-banner-icon-color = "rgba (0، 210، 143، 0.3)"> </div>

أخيرًا ، انقر فوق حفظ .

لقد انتهينا من عرض زر Business Chat في تذييل موقع WordPress على الويب. من الآن فصاعدًا ، سيرى مستخدمو Apple عرض زر Business Chat في التذييل كما يلي:

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

الكلمات الأخيرة

قد يكون استخدام الكود لإضافة زر Business Chat إلى موقع WordPress الإلكتروني أمرًا صعبًا للغاية بالنسبة للمبتدئين في WordPress. ولكن إذا اتبعت هذا البرنامج التعليمي بدقة ، فسيعمل بالتأكيد. بعد أن يكون لديك زر Business Chat على موقعك ، لا تنس الرد على مكالمات العملاء ورسائلهم. سيساعد في بناء الثقة بين العملاء ومالك موقع الويب ، وبالتالي تحسين علامتك التجارية وزيادة التحويل.

بالإضافة إلى إضافة زر الدردشة التجارية ، يمكنك أيضًا إضافة زر الدردشة المباشرة وزر الدردشة عبر Facebook إلى موقع WordPress الخاص بك. تساعدك هذه الميزات في الرد على أسئلة العملاء بشكل أسرع.