Како додати 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 стварним ИД-ом виџета
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-јем

Ако користите Contentful Content Delivery API са чистим 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-ом, деплојујте или покрените развојни сервер. Посетите веб-сајт у новој картици претраживача или инкогнито прозору. Требало би да видите дугме виџета за ћаскање у доњем десном углу. Кликните на њега да бисте се уверили да се отвара и исправно ради.