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

תיעוד

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

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

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

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

קבלת קוד הטמעה
פלטפורמה:
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): DatoCMS היא מערכת ניהול תוכן ללא ממשק (headless CMS) שמספקת תוכן דרך ממשקי API. יש להוסיף את קוד הצ'אטבוט לאפליקציית הקצה שלך (Next.js, Gatsby, Nuxt וכו'), ולא ללוח הבקרה של DatoCMS.

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

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

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

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

שלב 2: הוספה לממשק Next.js (הנפוץ ביותר)

Next.js היא מסגרת העבודה הקדמית הפופולרית ביותר שמשמשת עם DatoCMS. הוסף את הצ'אטבוט באמצעות רכיב Script:

App Router (app/layout.tsx):

  1. פתח את קובץ הפריסה הראשי שלך: app/layout.tsx
  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="afterInteractive"
            />
          </body>
        </html>
      )
    }
  3. החלף את YOUR_WIDGET_ID במזהה הווידג'ט האמיתי שלך
  4. שמור את הקובץ והפעל מחדש את שרת הפיתוח שלך

Pages Router (pages/_app.tsx):

  1. פתח את קובץ pages/_app.tsx שלך
  2. הוסף את רכיב Script:
    import Script from 'next/script'
    import type { AppProps } from 'next/app'

    export default function App({ Component, pageProps }: AppProps) {
      return (
        <>
          <Component {...pageProps} />
          <Script
            src="https://asyntai.com/static/js/chat-widget.js"
            data-asyntai-id="YOUR_WIDGET_ID"
            strategy="afterInteractive"
          />
        </>
      )
    }

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

שיטה חלופית 1: ממשק Gatsby

לאתרי Gatsby ששואבים תוכן מ-DatoCMS דרך gatsby-source-datocms:

  1. צור או ערוך את 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"
        />
      ])
    }
  2. החלף את YOUR_WIDGET_ID במזהה הווידג'ט האמיתי שלך
  3. הפעל מחדש את שרת הפיתוח של Gatsby

שיטה חלופית 2: ממשק Nuxt.js

לאפליקציות Nuxt.js שצורכות תוכן DatoCMS:

  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'
            }
          ]
        }
      }
    })
  2. החלף את YOUR_WIDGET_ID במזהה הווידג'ט האמיתי שלך
  3. הפעל מחדש את שרת הפיתוח של Nuxt

שיטה חלופית 3: HTML רגיל / אתר סטטי

אם אתה משתמש ב-Content Delivery API של DatoCMS עם אתר HTML סטטי או מחולל אתרים סטטיים:

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

שיטה חלופית 4: React (Vite/CRA)

לאפליקציות React סטנדרטיות (Create React App, Vite) שצורכות DatoCMS API:

אפשרות A: הוספה ל-public/index.html

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

אפשרות B: useEffect ברכיב השורש

  1. צור רכיב צ'אטבוט או הוסף לרכיב השורש שלך:
    // 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
    }
  2. ייבא והצג את הרכיב ב-App.jsx או בפריסת השורש שלך

שלב 3: פריסה ואימות

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

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

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