كيفية تضمين أداة الشهادات في أي موقع إلكتروني

توفّر منصة SocialProof.Reviews لكل مساحة عمل أربع أدوات شهادات قابلة للتضمين: جدار المحبة، والشريط المتحرك، وشارة التقييم، ونموذج الجمع. وكل واحدة منها عبارة عن <iframe> خفيف يَعرض شهاداتك المعتمدة مباشرةً، ويستخدم ألوان علامتك وشعارها، ويُحدِّث نفسه آلياً عند اعتماد أي مراجعات جديدة.

يغطّي هذا الدليل:

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

---

الأدوات الأربع

الأداة	حجم التضمين	أنسب موضع
جدار المحبة	عرض كامل، ارتفاع 800 بكسل فأكثر	صفحة مخصّصة مثل /testimonials أو /reviews
الشريط المتحرك	عرض كامل، ارتفاع 280–360 بكسل	صدر الصفحة الرئيسية، أو صفحة التسعير، أو الصفحة المقصودة
الشارة	220×48 بكسل	شريط التنقّل، التذييل، بجوار خطط التسعير
نموذج الجمع	عرض كامل، ارتفاع 700 بكسل	صفحة ما بعد الشراء، صفحة الشكر، لوحة المنتج

تعمل الأدوات الأربع عبر HTTPS، وتُحمَّل بصورة غير متزامنة (دون أي أثر على مؤشرات Core Web Vitals)، وتُحدِّث نفسها تلقائياً حين تعتمد شهادات جديدة، دون حاجة إلى إعادة التضمين.

---

الحصول على رمز التضمين

1. سجّل الدخول إلى SocialProof.Reviews وافتح مساحة عملك
2. اضغط التضمين والتكاملات من شريط الإدارة الجانبي
3. اختر تبويب الأداة: الجدار، أو الشريط المتحرك، أو الشارة، أو نموذج الجمع
4. انسخ مقتطف <iframe>، فهو خاص بمساحة عملك وحدها

---

الأداة 1: جدار المحبة

شبكة بنمط الـ masonry تعرض كل الشهادات المعتمدة. استخدمها في صفحة مستقلة للمراجعات أو الشهادات.

يتضمّن: اسم صاحب المراجعة، وصورته، والشركة، والمسمّى الوظيفي، والتقييم النجمي، ونص المراجعة، والصور، والصور المصغَّرة للفيديوهات، وشريط التصفية، وألوان العلامة، ودعوة اختيارية بعنوان «اترك مراجعة».

رمز التضمين

<iframe
  src="https://socialproof.reviews/YOUR-SLUG/wall"
  width="100%"
  height="800px"
  frameborder="0"
  style="border:none; width:100%;"
  title="Wall of Love"
></iframe>

ارتفاع ديناميكي (اختياري)

<iframe
  id="spr-wall"
  src="https://socialproof.reviews/YOUR-SLUG/wall"
  width="100%"
  frameborder="0"
  style="border:none; width:100%;"
  title="Wall of Love"
  onload="this.style.height = this.contentWindow.document.body.scrollHeight + 'px'"
></iframe>

---

الأداة 2: الشريط المتحرك

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

يتضمّن: شرائح متعاقبة للشهادات، واسم صاحب المراجعة، وصورته، والشركة، والتقييم النجمي، ونص المراجعة، ونقاط التنقل وأسهمه، وألوان العلامة.

رمز التضمين

<iframe
  src="https://socialproof.reviews/YOUR-SLUG/widgets/carousel"
  width="100%"
  height="280px"
  frameborder="0"
  style="border:none; width:100%;"
  title="Customer Reviews"
></iframe>

تلميح بشأن الارتفاع: إن كانت شهاداتك طويلة، زد الارتفاع إلى 320–360 بكسل؛ فالارتفاع الافتراضي 280 بكسل يناسب بطاقة واحدة.

مقترحات الموضع:

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

---

الأداة 3: الشارة

قرص ثقة مضغوط يُظهر متوسّط تقييمك الإجمالي وعدد المراجعات، وهو مصمَّم لشرائط التنقّل والتذييلات ولمحاذاة خطط التسعير.

يتضمّن: متوسّط التقييم النجمي (مثال: ★ 4.9)، وإجمالي عدد المراجعات، ولمسة من لون العلامة، ورابط يُوصل إلى جدار المحبة الكامل.

رمز التضمين

<iframe
  src="https://socialproof.reviews/YOUR-SLUG/widgets/badge"
  width="220px"
  height="48px"
  frameborder="0"
  style="border:none;"
  title="Rating Badge"
></iframe>

مقترحات الموضع:

• شريط التنقّل: يبني الثقة قبل أن يبدأ الزائر بالتمرير
• التذييل: يَحسُن وضعه مع شارة SSL وأيقونات الدفع والضمان
• بجوار خطة تسعير: يُعزِّز القيمة في لحظة اتخاذ القرار
• توقيع البريد الإلكتروني: صدِّره صورةً من إعدادات العلامة التجارية، واربطه بعنوان جدار المحبة

---

الأداة 4: نموذج الجمع

يُضمِّن نموذج تقديم الشهادات مباشرةً داخل موقعك، دون توجيه الزائر إلى صفحة منفصلة.

يتضمّن: تدفّقاً متعدّد الخطوات (التقييم ← بياناتك ← المراجعة ← فيديو اختياري)، وألوان العلامة وشعارها، والتحقّق من البريد، ورفع الصور، وعرض المكافأة اختيارياً بعد التقديم.

رمز التضمين

<iframe
  src="https://socialproof.reviews/YOUR-SLUG"
  width="100%"
  height="700px"
  frameborder="0"
  style="border:none; width:100%;"
  title="Leave a Review"
></iframe>

أنسب المواضع:

• صفحة الشكر بعد الشراء: أعلى المواضع تحويلاً، إذ يكون الرضا في ذروته
• صفحة إكمال التهيئة (Onboarding): فعّله عند وصول المستخدم إلى أول لحظة نجاح
• رسالة بريد بعد الشراء (رابط لا تضمين): الرسالة بعد 3 إلى 7 أيام تحقّق أفضل معدّلات الاستجابة
• داخل لوحة منتجك: أضف قسم «اترك مراجعة» ضمن الإعدادات أو قائمة المساعدة

---

إرشادات خاصة بكل منصة

تَستخدم أدوات SocialProof.Reviews وسم <iframe> القياسي في HTML، وتعمل على جميع المنصات الكبرى. ويبيّن الجدول التالي العنصر المناسب لإضافة HTML مخصّص أو تضمين في كل منصة؛ وهذا كل المطلوب.

المنصة	العنصر المستخدَم
WordPress	كتلة HTML مخصّصة
Webflow	عنصر Embed (متقدّم)
Wix	Embed HTML (Embed & Social)
Squarespace	كتلة Code
Shopify	Edit Code (Themes)
Kajabi	كتلة Custom Code
ClickFunnels 2.0	عنصر Custom JS/HTML (Misc)
Framer	عنصر Embed (Utility)
Systeme.io	عنصر Raw HTML (Advanced)
React / Next.js	عنصر <iframe> بصيغة JSX
HTML مخصّص	الصق الرمز مباشرة في ملف HTML

---

WordPress

الطريقة الموصى بها — كتلة HTML مخصّصة (Gutenberg):

1. افتح الصفحة أو المقال الذي تريد وضع الأداة فيه لتحريره
2. اضغط + لإضافة كتلة جديدة وابحث عن Custom HTML
3. الصق مقتطف <iframe> داخل الكتلة
4. انتقل إلى تبويب Preview للتحقق من التحميل
5. انشر الصفحة أو حدِّثها

بديل — أدوات بناء الصفحات:

• Elementor: أضف وحدة HTML والصق رمز الـ iframe
• Divi: أضف وحدة Code والصق رمز الـ iframe

ملاحظة: تُقيِّد خطّتا Free وPersonal في WordPress.com وسوم <iframe>، وتحتاج إلى خطة Business أو أعلى، أو استخدم WordPress.org الذاتي الاستضافة.

---

Webflow

1. في Webflow Designer، اضغط + (لوحة الإضافة) من الشريط الأيسر
2. مرّر إلى قسم Advanced واسحب عنصر Embed إلى لوحة التصميم
3. يُفتح محرّر الرمز تلقائياً — الصق رمز الـ <iframe>
4. اضغط Save & Close
5. انشر الموقع

ملاحظة: يظهر المحتوى المضمَّن في المصمم بصورة مربع رمادي بديل، ويُعرض بصورة صحيحة على الموقع المنشور.

---

Wix

1. في محرّر Wix، اضغط + Add Elements من القائمة اليسرى
2. اذهب إلى Embed & Social → Embed Code → Embed HTML
3. اضغط Enter Code والصق رمز <iframe>
4. اضغط Update
5. عدِّل حجم العنصر على لوحة التصميم كي لا يُقطع المحتوى

ملاحظة لـ Wix Studio: استخدم أيقونة + لإضافة عنصر HTML iFrame، والخطوات ذاتها تنطبق.

HTTPS إلزامي: يجب أن يبدأ عنوان src في الـ iframe بـ https:// لا بـ http://.

---

Squarespace

1. سجّل الدخول واضغط Edit في الصفحة المستهدفة
2. اضغط نقطة إدراج أو زر +، واختر Code أو Embed
3. اضغط أيقونة القلم لتحرير الكتلة، واختر Code Snippet، والصق رمز <iframe>
4. اضغط Apply ثم Save

اشتراط الخطة: يتطلّب دعم الـ iframe خطة Business أو Commerce أو أعلى في Squarespace. ويجب أن يستخدم عنوان الـ src بروتوكول HTTPS.

---

Shopify

1. في لوحة إدارة Shopify، اذهب إلى Online Store → Themes → Edit Code
2. افتح ملف القالب للصفحة المستهدفة (مثل page.liquid)
3. الصق مقتطف <iframe> في الموضع المناسب من HTML
4. اضغط Save

بديل — محرّر الصفحات في Shopify:

1. اذهب إلى Online Store → Pages وافتح الصفحة
2. في محرّر المحتوى، انتقل من عرض النص المنسَّق إلى HTML source (زر <>)
3. الصق رمز الـ iframe واحفظ

---

Kajabi

1. في Kajabi، اذهب إلى Website → Pages (أو الصفحة المقصودة لمنتجك) وافتح المحرّر
2. اضغط Add Section أو Add Block من الشريط الجانبي واختر Custom Code
3. اضغط كتلة Custom Code لفتح المحرّر
4. الصق رمز <iframe> في حقل الرمز
5. اضغط Save

لتوسيط الأداة، ضعها داخل div:

<div style="text-align:center;">
  <iframe src="https://socialproof.reviews/YOUR-SLUG/widgets/carousel"
    width="100%" height="280px" frameborder="0" style="border:none;"></iframe>
</div>

ملاحظة: إن كنت تُضمِّن شهادة فيديو منفصلة، استخدم كتلة Video Embed المخصّصة في Kajabi لأداء أفضل. أما لجدار SocialProof.Reviews أو الشريط المتحرك فكتلة Custom Code هي الخيار الصحيح.

---

ClickFunnels 2.0

1. اذهب إلى Funnels، واختر خطوة القمع التي تريد تحريرها، واضغط Edit Page
2. من الشريط الأيسر، اضغط Elements ثم Add Element
3. مرّر إلى قسم Misc واختر Custom JS/HTML
4. اضغط العنصر الجديد في لوحة التصميم، ثم اضغط Open Code Editor
5. الصق رمز <iframe> وأغلق المحرّر
6. احفظ الصفحة بالضغط على Save

إن ظهر الـ iframe صغيراً، فحدِّد الأبعاد صراحةً:

<iframe
  src="https://socialproof.reviews/YOUR-SLUG/widgets/carousel"
  style="width:100%; height:320px; border:none;"
  frameborder="0"
  title="Customer Reviews"
></iframe>

---

Framer

1. في لوحة Framer، اضغط + Insert من القائمة العلوية اليسرى
2. ابحث عن Embed أو اعثر عليه في قسم Utility
3. اسحب عنصر Embed إلى صفحتك
4. في لوحة الخصائص اليمنى:
   • اختر HTML للصق مقتطف <iframe> كامل، أو
   • اختر URL للصق عنوان الأداة مباشرةً
5. اضغط زر Play للمعاينة — ويظهر التضمين في الموقع المنشور

حجم الهاتف: اضبط عرض وارتفاع عنصر Embed يدوياً لضمان العرض السليم على الشاشات الصغيرة.

---

Systeme.io

1. افتح الصفحة أو خطوة القمع في Systeme.io Page Builder
2. في قائمة العناصر اليسرى، ابحث عن Raw HTML داخل كتلة Advanced
3. اسحب عنصر Raw HTML إلى صفحتك
4. اضغط العنصر لفتح إعداداته، ثم اضغط Edit code
5. الصق رمز <iframe> واضغط Save

التحجيم: عيِّن width="100%" وارتفاعاً ثابتاً (مثل height="300px") في وسم الـ iframe مباشرةً لضمان تخطيط مستقرّ.

---

React / Next.js

الصق الأداة بوصفها عنصر <iframe> بصيغة JSX. يُراعى أن frameborder تصبح frameBorder، وأن style تأخذ كائناً في JSX:

export default function TestimonialsSection() {
  return (
    <section>
      <h2>What our customers say</h2>
      <iframe
        src="https://socialproof.reviews/your-slug/widgets/carousel"
        width="100%"
        height="300"
        frameBorder="0"
        title="Customer Reviews"
        style={{ border: 'none', width: '100%' }}
      />
    </section>
  );
}

لجدار المحبة في Next.js (App Router):

// app/testimonials/page.jsx
export default function TestimonialsPage() {
  return (
    <main>
      <h1>Customer Testimonials</h1>
      <iframe
        src="https://socialproof.reviews/your-slug/wall"
        width="100%"
        height="900"
        frameBorder="0"
        title="Wall of Love"
        style={{ border: 'none', width: '100%' }}
      />
    </main>
  );
}

---

HTML مخصّص

الصق الـ iframe مباشرةً في أي ملف HTML أو قالب تريد إظهار الأداة فيه:

<!-- أداة الشريط المتحرك -->
<iframe
  src="https://socialproof.reviews/YOUR-SLUG/widgets/carousel"
  width="100%"
  height="280px"
  frameborder="0"
  style="border:none; width:100%;"
  title="Customer Reviews"
></iframe>

استبدل YOUR-SLUG بـ slug مساحة عملك. تُحمَّل الأداة بصورة غير متزامنة دون أن تُعيق تصيير الصفحة.

---

تخصيص مظهر الأداة

تَرِث الأدوات كلها هوية علامتك التجارية آلياً. ولتغيير الألوان أو الشعار أو العناوين أو إخفاء أقسام:

1. افتح Branding في لوحة إدارة مساحة العمل
2. حدِّث اللون الأساسي والثانوي والشعار وأي إعدادات للعرض
3. اضغط Save، وستتحدّث جميع الأدوات النشطة فوراً دون إعادة التضمين

لمزيد من التفاصيل، طالع دليل العلامة التجارية.

---

ملاحظات حول الأداء

أدوات SocialProof.Reviews جميعها:

• تُحمَّل بصورة غير متزامنة، دون أيّ أثر على مؤشرات Core Web Vitals أو درجة Lighthouse
• تُخدَم عبر HTTPS من شبكة CDN بزمن استجابة أقلّ من 100 ميلي ثانية
• تُلغي التخزين المؤقت آلياً حين تعتمد شهادات جديدة
• متجاوبة تماماً حين يُضبط width="100%"

---

الأسئلة الشائعة

هل يلزمني مطوِّر لتضمين الأدوات؟ لا. تدعم جميع المنصات المذكورة أعلاه لصق رمز HTML دون كتابة أي شفرة. كل ما تحتاجه هو صلاحية الوصول إلى محرّر صفحات موقعك.

ما خطة Squarespace المطلوبة لتضمين الـ iframes؟ تحتاج خطة Business أو Commerce Basic أو Commerce Advanced. أما خطتا Personal وStarter فلا تدعمان تضمينات iframe.

هل تُبطئ الأداة موقعي الإلكتروني؟ لا. يُحمَّل الـ <iframe> بصورة غير متزامنة في سياق تصفّح منفصل، فلا يُعيق مسار التصيير الحرج للصفحة ولا يؤثر على درجة Core Web Vitals.

لماذا يظهر الـ iframe مربّعاً رمادياً بدلاً من الأداة؟ في وضع Designer في Webflow ووضع المعاينة في Framer تظهر الـ iframes بوصفها عناصر بديلة. انشر الموقع وافتح رابطه المباشر، وستظهر الأداة كما ينبغي.

هل يمكن تضمين الأداة داخل بريد إلكتروني؟ تمنع عملاء البريد الـ iframes لأسباب أمنية. عِوضاً عن ذلك، ضع رابطاً مباشراً إلى جدار المحبة داخل الرسالة. وفي تسلسلات ما بعد الشراء، يعطي الربط بـ https://socialproof.reviews/YOUR-SLUG (نموذج الجمع) نتائج أفضل عادةً.

حين أعتمد شهادة جديدة، هل يجب إعادة التضمين؟ لا. تجلب الأداة البيانات الحيّة من SocialProof.Reviews في كل تحميل. اعتمد الشهادة من لوحتك، فتظهر في الأداة تلقائياً.

هل يسمح WordPress.com بالـ iframes؟ في WordPress.org الذاتي الاستضافة: نعم دائماً. أما في WordPress.com فيلزم اشتراك Business أو أعلى، وفي الخطط الأدنى تحذف كتلة Custom HTML وسم الـ iframe.

لماذا لا تظهر الأداة في Kajabi؟ السبب الأشيع استخدام عنوان HTTP في الـ src؛ فتأكّد من أنه يبدأ بـ https://. وتحقّق كذلك من استخدام كتلة Custom Code (لا محرّر النصوص)، لأن محرّر النصوص في Kajabi يحذف رمز HTML الخام.

هل يمكنني تضمين نموذج الجمع داخل خطوة قمع في ClickFunnels؟ نعم. استخدم عنصر Custom JS/HTML (قسم Misc) في ClickFunnels 2.0، والصق رمز iframe نموذج الجمع، واضبط height على 700 بكسل على الأقلّ كي لا يظهر النموذج مقطوعاً.