خيارات التضمين

ثلاث طرق لإضافة نموذج SupportRetriever إلى أي مشروع: رابط مباشر، أو iframe، أو رابط HTML.

الحصول على أكواد التضمين

عند استدعاء GET /api/agent/form، تستلم كل خيارات التضمين:

{
  "embed": {
    "direct_url": "https://supportretriever.com/form/uuid",
    "iframe": "<iframe src=\"...\" width=\"100%\" height=\"600\" frameborder=\"0\" style=\"border: none;\"></iframe>",
    "html_link": {
      "default": "<a href=\"...\" class=\"support-btn\">Contact Support</a>",
      "with_styles": "<a href=\"...\" style=\"display:inline-block;padding:12px 24px;background:var(--color-primary);color: var(--color-on-primary);text-decoration:none;border-radius:6px;font-family:sans-serif;\">Contact Support</a>"
    }
  }
}

الخيار 1: الرابط المباشر

حالة الاستخدام: الروابط، إعادة التوجيه، المشاركة

التنسيق:

https://supportretriever.com/form/[form-id]

مثال استخدام:

<!-- Simple link -->
<a href="https://supportretriever.com/form/abc123">تواصل معنا</a>

<!-- Button -->
<button onclick="window.location.href='https://supportretriever.com/form/abc123'">
  Get Support
</button>

<!-- Redirect -->
<meta http-equiv="refresh" content="0; url=https://supportretriever.com/form/abc123">

الإيجابيات:

• أبسط خيار
• يعمل في كل مكان
• ملائم للجوال
• يمكن إضافة معلمات URL للتتبع

السلبيات:

• المستخدم يغادر صفحتك
• إحساس اندماج أقل

الخيار 2: تضمين iFrame

حالة الاستخدام: نموذج مضمن في صفحتك

التنسيق:

<iframe 
  src="https://supportretriever.com/form/abc123" 
  width="100%" 
  height="600" 
  frameborder="0" 
  style="border: none;">
</iframe>

مثال استخدام:

<div class="contact-section">
  <h2>Get in Touch</h2>
  <iframe 
    src="https://supportretriever.com/form/abc123" 
    width="100%" 
    height="600" 
    frameborder="0" 
    style="border: none;">
  </iframe>
</div>

iFrame متجاوب:

<div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;">
  <iframe 
    src="https://supportretriever.com/form/abc123"
    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none;"
    frameborder="0">
  </iframe>
</div>

الإيجابيات:

• النموذج يبقى في صفحتك
• إحساس اندماج أكبر
• تحكم كامل بتنسيق الحاوية

السلبيات:

• يتطلب دعم iframe
• قد تكون هناك اعتبارات cross-origin
• ارتفاع ثابت مطلوب

الخيار 3: زر/رابط HTML

حالة الاستخدام: أزرار منسقة تفتح النموذج

نسخة بسيطة:

<a href="https://supportretriever.com/form/abc123" class="support-btn">
  Contact Support
</a>

نسخة منسقة (بأنماط مضمنة):

<a 
  href="https://supportretriever.com/form/abc123" 
  style="display:inline-block;padding:12px 24px;background:var(--color-primary);color: var(--color-on-primary);text-decoration:none;border-radius:6px;font-family:sans-serif;">
  Contact Support
</a>

زر مخصص:

<a 
  href="https://supportretriever.com/form/abc123"
  class="btn btn-primary"
  style="
    display: inline-block;
    padding: 12px 24px;
    background: #007bff;
    color: var(--color-on-primary);
    text-decoration: none;
    border-radius: 6px;
    font-weight: 500;
    transition: background 0.2s;
  ">
  Get Support
</a>

الإيجابيات:

• تحكم كامل بمظهر الزر
• يطابق تصميم موقعك
• يعمل في كل مكان

السلبيات:

• المستخدم يغادر صفحتك
• يتطلب تنسيقاً مخصصاً

معلمات URL للتتبع

أضف معلمات الاستعلام لتتبع مصدر الإرسالات:

https://supportretriever.com/form/abc123?المصدر=homepage&campaign=summer2024&type=support

تُلتقط هذه المعلمات تلقائياً وتُخزَّن مع كل إرسال للتحليلات.

اختيار الخيار المناسب

اعتبارات الجوال

• الرابط المباشر: أفضل تجربة جوال، يفتح بملء الشاشة
• iFrame: قد يحتاج غلافاً متجاوباً، اختبر على الأجهزة
• رابط HTML: يعمل جيداً، يفتح النموذج بملء الشاشة

اختبار التضمين

قبل النشر:

1. اختبر على متصفحات سطح المكتب (Chrome، Firefox، Safari)
2. اختبر على الأجهزة المحمولة (iPhone، Android)
3. اختبر إرسال النموذج من البداية للنهاية
4. تحقق من استلامك الإرسالات
5. تحقق من التقاط معلمات URL

مواضيع ذات صلة

• النموذج Customization
• Getting Started
• Why Not mailto