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

Platformă:

Strapi

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:

Metoda 1: Next.js cu Strapi (Recomandat)

Dacă utilizați Next.js ca frontend Strapi (cea mai frecventă configurație), adăugați chatbot-ul folosind componenta Script:

1. Deschideți fișierul de layout principal: app/layout.tsx (App Router) sau pages/_app.tsx (Pages Router)
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="lazyOnload"
        />
      </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

Metoda 2: Gatsby cu Strapi

Pentru site-urile Gatsby care utilizează gatsby-source-strapi:

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 3: Nuxt.js cu Strapi

Pentru aplicații Nuxt.js care utilizează @nuxtjs/strapi:

Nuxt 3:

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'
        }
      ]
    }
  }
})

Nuxt 2:

1. Adăugați în nuxt.config.js:
   export default {
  head: {
    script: [
      {
        src: 'https://asyntai.com/static/js/chat-widget.js',
        async: true,
        'data-asyntai-id': 'YOUR_WIDGET_ID'
      }
    ]
  }
}

Metoda 4: React cu Strapi

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

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

Sau creați o componentă React:

Metoda 5: SvelteKit cu Strapi

Pentru aplicații SvelteKit care consumă conținut Strapi:

1. Editați fișierul src/app.html
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

Metoda 6: Site static cu API-ul Strapi

Dacă utilizați API-ul REST sau GraphQL al Strapi cu un site HTML static:

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. Salvați fișierul și încărcați-l pe hostingul dvs.

Pasul 2: Verificați instalarea

După ce ați adăugat codul chatbot-ului pe site-ul bazat pe Strapi, implementați sau rulați serverul de dezvoltare. Vizitați site-ul î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.