Cum să adăugați Chatbot-ul AI Asyntai în DatoCMS

Platformă:

DatoCMS

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

Pasul 1: Obțineți codul de încorporare

Mai întâi, accesați panoul de control Asyntai și derulați în jos până la secțiunea "Cod de integrare". Copiați codul dvs. unic de integrare, care va arăta astfel:

Pasul 2: Adăugați în frontend-ul Next.js (Cel mai frecvent)

Next.js este cel mai popular framework frontend utilizat cu DatoCMS. Adăugați chatbot-ul folosind componenta Script:

App Router (app/layout.tsx):

1. Deschideți fișierul de layout rădăcină: app/layout.tsx
2. Importați componenta Script și adăugați chatbot-ul:
   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. Înlocuiți YOUR_WIDGET_ID cu ID-ul real al widget-ului dvs.
4. Salvați fișierul și reporniți serverul de dezvoltare

Pages Router (pages/_app.tsx):

1. Deschideți fișierul pages/_app.tsx
2. Adăugați componenta 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"
      />
    </>
  )
}

Metoda alternativă 1: Frontend Gatsby

Pentru site-urile Gatsby care preiau conținut din DatoCMS prin gatsby-source-datocms:

1. Creați sau editați gatsby-ssr.js în rădăcina proiectului:
   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. Înlocuiți YOUR_WIDGET_ID cu ID-ul real al widget-ului dvs.
3. Reporniți serverul de dezvoltare Gatsby

Metoda alternativă 2: Frontend Nuxt.js

Pentru aplicații Nuxt.js care consumă conținut DatoCMS:

1. Adăugați în 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. Înlocuiți YOUR_WIDGET_ID cu ID-ul real al widget-ului dvs.
3. Reporniți serverul de dezvoltare Nuxt

Metoda alternativă 3: HTML simplu / Site static

Dacă utilizați API-ul Content Delivery al DatoCMS cu un site HTML static sau un generator de site-uri statice:

1. Adăugați codul de încorporare în fișierul HTML înainte de eticheta de închidere </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. Înlocuiți YOUR_WIDGET_ID cu ID-ul real al widget-ului dvs.
3. Salvați fișierul și încărcați-l pe hostingul dvs.

Metoda alternativă 4: React (Vite/CRA)

Pentru aplicații React standard (Create React App, Vite) care consumă API-ul DatoCMS:

Opțiunea A: Adăugați în public/index.html

1. Deschideți fișierul public/index.html (CRA) sau index.html (Vite)
2. Adăugați codul de încorporare înainte de eticheta de închidere </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. Salvați fișierul

Opțiunea B: useEffect în componenta rădăcină

1. Creați o componentă chatbot sau adăugați în componenta rădăcină:
   // 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. Importați și randați componenta în App.jsx sau layout-ul rădăcină

Pasul 3: Implementați și verificați

După ce ați adăugat codul chatbot-ului pe site-ul dvs. bazat pe DatoCMS, implementați sau rulați serverul de dezvoltare. Vizitați site-ul dvs. într-o filă nouă de browser sau într-o fereastră incognito. Ar trebui să vedeți butonul widget-ului de chat în colțul din dreapta jos. Faceți clic pe el pentru a vă asigura că se deschide și funcționează corect.