איך להוסיף צ'אטבוט AI של Asyntai ל-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
מערכת ניהול תוכן ללא ממשק (Headless CMS): Contentful היא מערכת ניהול תוכן ללא ממשק (headless CMS), כלומר היא מספקת תוכן דרך API אך אינה כוללת ממשק קדמי מובנה. התקנת הצ'אטבוט תלויה באיזו מסגרת עבודה קדמית אתה משתמש להצגת תוכן 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 API
אם אתה משתמש ב-Content Delivery API של 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) במקום לכתוב אותו ישירות בקוד.