Як додати AI чат-бот Asyntai до Contentful

Платформа:

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

Крок 1: Отримайте код для вставки

Спочатку перейдіть до своєї панелі керування Asyntai і прокрутіть вниз до розділу "Код вбудовування". Скопіюйте свій унікальний код вбудовування, який виглядає так:

Метод 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 на ваш фактичний ID віджету
4. Збережіть файл та перезапустіть сервер розробки

Метод 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>(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. Збережіть файл

Або використовуйте компонент React з useEffect:

Метод 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>(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>

Метод 5: Статичний HTML з Contentful API

Якщо ви використовуєте Content Delivery API Contentful з чистим JavaScript:

1. Додайте код вбудовування до вашого HTML-файлу перед закриваючим тегом </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. Збережіть файл та завантажте на хостинг

Крок 2: Перевірка встановлення

Після додавання коду чат-бота на ваш сайт на базі Contentful розгорніть або запустіть сервер розробки. Відвідайте свій веб-сайт у новій вкладці браузера або в режимі інкогніто. Ви повинні побачити кнопку чат-віджету в нижньому правому куті. Натисніть на неї, щоб переконатися, що вона відкривається та працює коректно.