كيفية إضافة روبوت الدردشة 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
نظام إدارة محتوى بدون واجهة أمامية: Contentful هو نظام إدارة محتوى بدون واجهة أمامية، مما يعني أنه يوفر المحتوى عبر واجهة برمجة التطبيقات ولكنه لا يتضمن واجهة أمامية مدمجة. يعتمد تثبيت روبوت الدردشة على إطار العمل الأمامي الذي تستخدمه لعرض محتوى Contentful. اختر الطريقة أدناه التي تتوافق مع إعدادك.
الخطوة 1: احصل على كود التضمين
First, go to your Asyntai Dashboard and scroll down to the "Embed Code" section. Copy your unique embed code which will look like this:
<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>
ملاحظة: الكود أعلاه مجرد مثال. يجب عليك نسخ كود التضمين الفريد الخاص بك من لوحة التحكم لأنه يحتوي على معرف الأداة الشخصي الخاص بك.
الطريقة 1: Next.js مع Contentful (موصى بها)
إذا كنت تستخدم Next.js لعرض محتوى Contentful، أضف روبوت الدردشة باستخدام مكون Script:
- افتح ملف التخطيط الرئيسي:
app/layout.tsx(App Router) أوpages/_app.tsx(Pages Router) - استورد مكون 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>
)
} - استبدل
YOUR_WIDGET_IDبمعرف الأداة الفعلي الخاص بك - احفظ الملف وأعد تشغيل خادم التطوير
نصيحة: استخدام strategy="lazyOnload" يضمن تحميل روبوت الدردشة بعد أن تصبح الصفحة تفاعلية بالكامل، مما يوفر أفضل أداء.
الطريقة 2: Gatsby مع Contentful
لمواقع Gatsby التي تسحب المحتوى من Contentful:
- ثبّت gatsby-plugin-load-script (اختياري لكن موصى به):
npm install gatsby-plugin-load-script - أضف إلى
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
}
}
}
]
} - بدلاً من ذلك، استخدم 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"
/>
])
} - أعد تشغيل خادم تطوير Gatsby
الطريقة 3: React مع Contentful
لتطبيقات React القياسية (Create React App وVite وغيرها) التي تستخدم Contentful:
- افتح ملف
public/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> - احفظ الملف
أو استخدم مكون React مع useEffect:
// components/Chatbot.jsx
import { useEffect } from 'react'
export default function Chatbot() {
useEffect(() => {
const script = document.createElement('script')
script.src = 'https://asyntai.com/static/js/chat-widget.js'
script.async = true
script.setAttribute('data-asyntai-id', 'YOUR_WIDGET_ID')
document.body.appendChild(script)
return () => document.body.removeChild(script)
}, [])
return null
}
الطريقة 4: Vue/Nuxt مع Contentful
لتطبيقات Vue أو Nuxt.js التي تستخدم Contentful:
Nuxt 3:
- أضف إلى
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:
- أضف إلى
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 العادي:
- أضف كود التضمين إلى ملف 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: التحقق من التثبيت
بعد إضافة كود روبوت الدردشة إلى موقعك المدعوم بـ Contentful، انشر أو شغّل خادم التطوير. قم بزيارة موقعك الإلكتروني في علامة تبويب جديدة أو نافذة تصفح خاص. يجب أن ترى زر أداة الدردشة في الزاوية السفلية اليمنى. انقر عليه للتأكد من أنه يفتح ويعمل بشكل صحيح.
لا ترى الأداة؟ تأكد من إضافة البرنامج النصي إلى الملف الصحيح لإطار عملك. تحقق من وحدة تحكم المطور في متصفحك بحثاً عن أي أخطاء. إذا كنت تستخدم العرض من جانب الخادم، تأكد من تشغيل البرنامج النصي على جانب العميل. جرب مسح ذاكرة التخزين المؤقت للمتصفح أو العرض في نافذة تصفح خاص.
متغيرات البيئة: لأمان ومرونة أفضل، فكّر في تخزين معرف الأداة في متغير بيئة (مثل NEXT_PUBLIC_ASYNTAI_ID لـ Next.js) بدلاً من ترميزه مباشرة في الكود.