التضمين برابط HTML

أضف رابطاً قابلاً للنقر لنموذج الاتصال في موقعك باستخدام وسم المرساة HTML.

الحصول على كود رابط HTML

  1. انتقل إلى إدارة النموذج (/admin/form)
  2. انقر تبويب تضمين
  3. ابحث عن قسم رابط HTML
  4. خصّص مظهر الرابط (اختياري)
  5. انسخ كود HTML المُنشأ

رابط HTML أساسي

أبسط كود رابط HTML:

<a href="https://supportretriever.com/form/your-form-id">Contact</a>

ينشئ هذا رابطاً قابلاً للنقر يفتح النموذج في نفس تبويب المتصفح.

خيارات التخصيص

نص الرابط

اختر من خيارات جاهزة أو استخدم نصاً مخصصاً:

  • Contact - بسيط ومباشر
  • Contact me - لهجة شخصية
  • Contact us - لهجة أعمال
  • Custom - أدخل نصك

Customize

فتح في نافذة جديدة

اختر إن كان الرابط يفتح في تبويب جديد:

  • Same window (افتراضي) - يفتح في التبويب الحالي
  • New window - يفتح في تبويب جديد مع target="_blank"

شعار SupportRetriever

إدراج شعار SupportRetriever في الرابط:

  • Show logo - يتضمن صورة الشعار قبل النص
  • Hide logo - رابط نصي فقط
It's OK if you don't want it, but just know that this is a great way to help SupportRetriever gain more awareness 🙏

كود HTML المُنشأ

مع الشعار ونص مخصص:

<a href="https://supportretriever.com/form/your-form-id" target="_blank">
  <img src="https://supportretriever.com/images/logoPink_small.png" alt="SupportRetriever" style="vertical-align: middle; margin-right: 8px; height: 20px;">
  Contact us
</a>

بدون شعار:

<a href="https://supportretriever.com/form/your-form-id" target="_blank">Contact us</a>

المعاينة

يعرض تبويب تضمين معاينة مباشرة للرابط:

SupportRetriever Contact us

التنفيذ

في HTML

الصق الكود مباشرة في HTML:

<nav>
  <a href="/">Home</a>
  <a href="/about">About</a>
  <a href="https://supportretriever.com/form/your-form-id">Contact</a>
</nav>

في أنظمة إدارة المحتوى

معظم منصات CMS تدعم HTML:

  • WordPress: استخدم كتلة HTML أو ودجت HTML مخصص
  • Wix/Squarespace: استخدم ودجت تضمين HTML
  • Webflow: الصق في عنصر تضمين HTML
  • مواقع مخصصة: أضف إلى ملفات القالب

التنسيق

يمكنك تنسيق الرابط بـ CSS:

.contact-link {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 500;
}

.contact-link:hover {
  text-decoration: underline;
}

أفضل الممارسات

  • دعوة واضحة للإجراء: استخدم نص رابط وصفي
  • موضع بارز: ضع الروابط حيث يتوقعها المستخدمون
  • تنسيق متسق: وافقه مع تصميم موقعك
  • إمكانية الوصول: تأكد من تباين لون كافٍ

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

مستعد لتبسيط الدعم؟
Join thousands using SupportRetriever to manage customer conversations.
جرب مجاناً

استكشف المزيد

تصفح كل المقالات