חזרה ללוח הבקרה

תיעוד

למד כיצד להשתמש ב-Asyntai

תחילת העבודה
התקנה מאגר ידע בדוק את ה-AI שלך ניהול אתרים
התאמה אישית
צבעי ווידג'ט שם עוזר AI הודעה ראשונית מיקום ווידג'ט הפעלה אוטומטית בועת התראה תג שלא נקרא מצב הוראות שאל שאלות שימוש באמוג'י איסוף אימיילים איסוף מספרי טלפון לכידת לידים חכמה לוקליזציה הסתרת מיתוג קישור פרטיות הודעה מותאמת הורדת תמליל שיחה חדשה היסטוריית שיחות תגית ונקודת סטטוס דיבור לטקסט סמל צ'אט לוגו חברה מגבלת תווים טמפרטורה
טיפים להנחיות AI השוואת תוכניות
תכונות
סריקת אתר פערי ידע כרטיסי מוצר הקשר משתמש ניטור בזמן אמת השתלטות אנושית הסלמה התראות AI דו"ח יומי הזנת נתונים בזמן אמת הזנת נתונים בזמן אמת מקס חברי צוות כניסה אחידה הוספת תמונות ראיית תמונות ווידג'ט תרגום לוקליזציה לידים לכידת לידים חכמה כרטיסי תמיכה הזמנות החרגת דפים כתובות IP חסומות מודל חכם יותר הפעלת חשיבה הצעות לתשובות הודעות מעקב דיבור לטקסט הורדת תמליל צ'אט מוטמע
ניתוח נתונים
אנליטיקת צ'אט יומני צ'אט
שילובים
REST API Instagram Messenger WhatsApp Zapier Email אפליקציות מובייל
אחר
הוספה למסך הבית כפתור פתיחה מותאם

איך להוסיף צ'אטבוט AI של Asyntai ל-Contentful

מדריך צעד אחר צעד לאתרים מבוססי Contentful

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

מערכת ניהול תוכן ללא ממשק (Headless CMS): Contentful היא מערכת ניהול תוכן ללא ממשק (headless CMS), כלומר היא מספקת תוכן דרך API אך אינה כוללת ממשק קדמי מובנה. התקנת הצ'אטבוט תלויה באיזו מסגרת עבודה קדמית אתה משתמש להצגת תוכן Contentful שלך. בחר את השיטה למטה שמתאימה להגדרה שלך.

שלב 1: קבל את קוד ההטמעה שלך

ראשית, עבור ללוח הבקרה של Asyntai וגלול למטה לחלק "קוד הטמעה". העתק את קוד ההטמעה הייחודי שלך שייראה כך:

<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>

הערה: הקוד למעלה הוא רק דוגמה. עליך להעתיק את קוד ההטמעה הייחודי שלך מלוח הבקרה שלך כיוון שהוא מכיל את מזהה הווידג'ט האישי שלך.

שיטה 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. שמור את הקובץ והפעל מחדש את שרת הפיתוח שלך

טיפ: שימוש ב-strategy="lazyOnload" מבטיח שהצ'אטבוט נטען לאחר שהעמוד אינטראקטיבי לחלוטין, ומספק את הביצועים הטובים ביותר.

שיטה 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 async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
  3. שמור את הקובץ

או השתמש ברכיב 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:

  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 async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>

שיטה 5: HTML סטטי עם Contentful API

אם אתה משתמש ב-Content Delivery API של Contentful עם JavaScript רגיל:

  1. הוסף את קוד ההטמעה לקובץ HTML שלך לפני תגית הסגירה </body>:
    <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
  2. שמור את הקובץ והעלה לאחסון שלך

שלב 2: אימות ההתקנה

לאחר הוספת קוד הצ'אטבוט לאתר מבוסס Contentful שלך, פרוס או הפעל את שרת הפיתוח שלך. בקר באתר שלך בכרטיסיית דפדפן חדשה או בחלון גלישה פרטית. אתה אמור לראות את כפתור הצ'אט בפינה הימנית התחתונה. לחץ עליו כדי לוודא שהוא נפתח ופועל כראוי.

לא רואה את הווידג'ט? ודא שהוספת את הסקריפט לקובץ הנכון עבור מסגרת העבודה שלך. בדוק במסוף המפתחים של הדפדפן אם יש שגיאות. אם אתה משתמש ברינדור צד שרת, ודא שהסקריפט רץ בצד הלקוח. נסה לנקות את מטמון הדפדפן או לצפות בחלון גלישה פרטית.

משתני סביבה: לאבטחה וגמישות טובות יותר, שקול לאחסן את מזהה הווידג'ט שלך במשתנה סביבה (למשל, NEXT_PUBLIC_ASYNTAI_ID עבור Next.js) במקום לכתוב אותו ישירות בקוד.