كيفية إضافة روبوت الدردشة Asyntai AI إلى Contentful

المنصة:

Contentful

HTML/Custom WordPress Shopify WooCommerce BigCommerce Ecwid Wix Squarespace Webflow Weebly HubSpot Tilda Adobe Experience Manager Duda Google Sites Bludit Plesk Concrete CMS Craft CMS Contentful Docusaurus Strapi Joomla Kentico Drupal Magento Blogger Bitrix TYPO3 PrestaShop OpenCart Ghost Hugo Statamic Umbraco Volusion Moodle SilverStripe Grav October CMS ProcessWire Sanity ExpressionEngine Sylius Backdrop CMS MODX Bagisto PayloadCMS e107 CrafterCMS Kirby MedusaCMS DatoCMS GoDaddy Framer Bubble Carrd Jimdo Strikingly Kajabi Teachable Thinkific ClickFunnels Hostinger Unbounce Leadpages Systeme.io Instapage

الخطوة 1: احصل على كود التضمين

أولاً، انتقل إلى لوحة تحكم Asyntai ومرر لأسفل إلى قسم "Embed Code". انسخ كود التضمين الفريد الخاص بك، والذي سيبدو هكذا:

الطريقة 1: Next.js مع Contentful (موصى بها)

إذا كنت تستخدم Next.js لعرض محتوى Contentful، أضف روبوت الدردشة باستخدام مكون Script:

1. افتح ملف التخطيط الرئيسي: app/layout.tsx (App Router) أو pages/_app.tsx (Pages Router)
2. استورد مكون Script وأضف روبوت الدردشة:
   import Script from 'next/script'

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <Script
          src="https://asyntai.com/static/js/chat-widget.js"
          data-asyntai-id="YOUR_WIDGET_ID"
          strategy="lazyOnload"
        />
      </body>
    </html>
  )
}
3. استبدل YOUR_WIDGET_ID بمعرف الأداة الفعلي الخاص بك
4. احفظ الملف وأعد تشغيل خادم التطوير

الطريقة 2: Gatsby مع Contentful

لمواقع Gatsby التي تسحب المحتوى من Contentful:

1. ثبّت gatsby-plugin-load-script (اختياري لكن موصى به):
   npm install gatsby-plugin-load-script
2. أضف إلى gatsby-config.js الخاص بك:
   module.exports = {
  plugins: [
    {
      resolve: 'gatsby-plugin-load-script',
      options: {
        src: 'https://asyntai.com/static/js/chat-widget.js',
        attributes: {
          'data-asyntai-id': 'YOUR_WIDGET_ID',
          async: true
        }
      }
    }
  ]
}
3. بدلاً من ذلك، استخدم gatsby-ssr.js:
   // gatsby-ssr.js
import React from 'react'

export const onRenderBody = ({ setPostBodyComponents }) => {
  setPostBodyComponents([
    <script
      key="asyntai-chatbot"
      async
      src="https://asyntai.com/static/js/chat-widget.js"
      data-asyntai-id="YOUR_WIDGET_ID"
    />
  ])
}
4. أعد تشغيل خادم تطوير Gatsby

الطريقة 3: React مع Contentful

لتطبيقات React القياسية (Create React App وVite وغيرها) التي تستخدم Contentful:

1. افتح ملف public/index.html الخاص بك
2. أضف كود التضمين قبل وسم الإغلاق </body>:
   <script>(function(){var l=function(){var s=document.createElement("script");s.src="https://widget.asyntai.com/static/js/chat-widget.js";s.async=true;s.setAttribute("data-asyntai-id","YOUR_WIDGET_ID");document.head.appendChild(s)};if(document.readyState==="complete"){l()}else{window.addEventListener("load",l)}})();</script>
3. احفظ الملف

أو استخدم مكون React مع useEffect:

الطريقة 4: Vue/Nuxt مع Contentful

لتطبيقات Vue أو Nuxt.js التي تستخدم Contentful:

Nuxt 3:

1. أضف إلى nuxt.config.ts الخاص بك:
   export default defineNuxtConfig({
  app: {
    head: {
      script: [
        {
          src: 'https://asyntai.com/static/js/chat-widget.js',
          async: true,
          'data-asyntai-id': 'YOUR_WIDGET_ID'
        }
      ]
    }
  }
})

Vue 3:

1. أضف إلى index.html قبل </body>:
   <script>(function(){var l=function(){var s=document.createElement("script");s.src="https://widget.asyntai.com/static/js/chat-widget.js";s.async=true;s.setAttribute("data-asyntai-id","YOUR_WIDGET_ID");document.head.appendChild(s)};if(document.readyState==="complete"){l()}else{window.addEventListener("load",l)}})();</script>

الطريقة 5: HTML ثابت مع واجهة برمجة تطبيقات Contentful

إذا كنت تستخدم واجهة برمجة تطبيقات توصيل المحتوى من Contentful مع JavaScript العادي:

1. أضف كود التضمين إلى ملف HTML الخاص بك قبل وسم الإغلاق </body>:
   <script>(function(){var l=function(){var s=document.createElement("script");s.src="https://widget.asyntai.com/static/js/chat-widget.js";s.async=true;s.setAttribute("data-asyntai-id","YOUR_WIDGET_ID");document.head.appendChild(s)};if(document.readyState==="complete"){l()}else{window.addEventListener("load",l)}})();</script>
2. احفظ الملف وارفعه إلى استضافتك

الخطوة 2: التحقق من التثبيت

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