العودة إلى لوحة التحكم

التوثيق

تعلّم كيفية استخدام Asyntai

زر فتح مخصص

أضف زراً أو رابطاً في أي مكان على موقعك لفتح أداة المحادثة

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

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

كيف يعمل

بمجرد تثبيت سكريبت أداة Asyntai على صفحتك، يتيح واجهة JavaScript API عامة في window.AsyntaiWidget. يمكنك استدعاء وظائفها للتحكم في أداة المحادثة برمجياً.

الطرق المتاحة

// Open the chat widget
window.AsyntaiWidget.open();

// Close the chat widget
window.AsyntaiWidget.close();

// Toggle open/close
window.AsyntaiWidget.toggle();

مثال أساسي

أضف زراً في أي مكان في HTML الخاص بك وأرفق معالج نقر يستدعي window.AsyntaiWidget.open():

<button onclick="window.AsyntaiWidget.open()">Chat with us</button>

هذا كل شيء. عندما ينقر الزائر على الزر، ستُفتح أداة المحادثة.

مثال شريط التنقل

أضف رابط "تحدث معنا" إلى شريط التنقل في موقعك:

<nav>
  <a href="/">Home</a>
  <a href="/products">Products</a>
  <a href="/about">About</a>
  <a href="#" onclick="event.preventDefault(); window.AsyntaiWidget.open();">Chat with us</a>
</nav>

ملاحظة: استخدم event.preventDefault() على روابط الربط لمنع الصفحة من التمرير إلى الأعلى عند النقر.

مثال زر منسّق

أنشئ زر حث على اتخاذ إجراء أكثر بروزاً بتنسيق مخصص:

<style>
  .chat-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    background: #6366f1;
    color: #fff;
    border: none;
    border-radius: 50px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3);
  }
  .chat-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(99, 102, 241, 0.45);
  }
  .chat-btn:active {
    transform: translateY(0);
  }
  .chat-btn svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
  }
</style>

<button class="chat-btn" onclick="window.AsyntaiWidget.open()">
  <svg viewBox="0 0 24 24">
    <path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12z"/>
  </svg>
  Chat with us
</button>

مثال زر التبديل

إذا أردت زراً واحداً يفتح ويغلق المحادثة:

<button onclick="window.AsyntaiWidget.toggle()">Toggle Chat</button>

التحقق من جاهزية الأداة

يتم تحميل الأداة بشكل غير متزامن، لذا إذا كان من الممكن النقر على زرك قبل انتهاء تحميل الأداة، يجب عليك التحقق من خاصية initialized أولاً:

<script>
  function openChat() {
    if (window.AsyntaiWidget && window.AsyntaiWidget.initialized) {
      window.AsyntaiWidget.open();
    } else {
      // Widget not ready yet — optionally show a message
      alert('Chat is loading, please try again in a moment.');
    }
  }
</script>

<button onclick="openChat()">Chat with us</button>

نصيحة: في معظم الصفحات، تُهيأ الأداة خلال ثانية واحدة. التحقق من initialized مطلوب فقط إذا ظهر زرك مبكراً جداً في الصفحة (مثلاً، فوق الطية في موقع سريع التحميل).

إخفاء أيقونة المحادثة الافتراضية

إذا أردت استبدال أيقونة المحادثة العائمة بالكامل بزر مخصص خاص بك، يمكنك إخفاؤها باستخدام CSS:

<style>
  #mccs-chat-button {
    display: none !important;
  }
</style>

تحذير: إذا أخفيت أيقونة المحادثة الافتراضية، تأكد من أن زرك المخصص مرئي بوضوح في كل صفحة. وإلا لن يعرف الزوار أن المحادثة متاحة.

مرجع API الكامل

الطريقة الوصف
AsyntaiWidget.open() يفتح أداة المحادثة
AsyntaiWidget.close() يغلق أداة المحادثة
AsyntaiWidget.toggle() يبدّل حالة المحادثة بين الفتح والإغلاق
AsyntaiWidget.initialized قيمة منطقية — true عندما تكون الأداة جاهزة