Cum să adăugați chatbot-ul AI Asyntai pe Contentful

Platformă:

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

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 Contentful (Recomandat)

Dacă utilizați Next.js pentru a reda conținutul Contentful, 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 Contentful

Pentru site-urile Gatsby care preiau conținut din Contentful:

1. Instalați gatsby-plugin-load-script (opțional, dar recomandat):
   npm install gatsby-plugin-load-script
2. Adăugați în 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. Alternativ, utilizați 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. Reporniți serverul de dezvoltare Gatsby

Metoda 3: React cu Contentful

Pentru aplicații React standard (Create React App, Vite, etc.) care utilizează Contentful:

1. Deschideți fișierul public/index.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

Sau utilizați o componentă React cu useEffect:

Metoda 4: Vue/Nuxt cu Contentful

Pentru aplicații Vue sau Nuxt.js care utilizează Contentful:

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

Vue 3:

1. Adăugați în index.html înainte de </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>

Metoda 5: HTML static cu API-ul Contentful

Dacă utilizați API-ul Content Delivery al Contentful cu JavaScript simplu:

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 dvs. bazat pe Contentful, 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.