Jak přidat Asyntai AI Chatbota na Contentful

Platforma:

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

Krok 1: Získejte svůj vkládací kód

Nejprve přejděte na svůj Asyntai Dashboard a sjeďte dolů do sekce „Embed Code“. Zkopírujte svůj jedinečný vkládací kód, který bude vypadat takto:

Metoda 1: Next.js s Contentful (doporučeno)

Pokud používáte Next.js pro vykreslování obsahu z Contentful, přidejte chatbota pomocí komponenty Script:

1. Otevřete svůj hlavní layout soubor: app/layout.tsx (App Router) nebo pages/_app.tsx (Pages Router)
2. Importujte komponentu Script a přidejte chatbota:
   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. Nahraďte YOUR_WIDGET_ID svým skutečným ID widgetu
4. Uložte soubor a restartujte vývojový server

Metoda 2: Gatsby s Contentful

Pro Gatsby weby čerpající obsah z Contentful:

1. Nainstalujte gatsby-plugin-load-script (volitelné, ale doporučené):
   npm install gatsby-plugin-load-script
2. Přidejte do svého 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. Alternativně použijte 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. Restartujte vývojový server Gatsby

Metoda 3: React s Contentful

Pro standardní React aplikace (Create React App, Vite atd.) používající Contentful:

1. Otevřete soubor public/index.html
2. Přidejte embed kód před uzavírací značku </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. Uložte soubor

Nebo použijte React komponentu s useEffect:

Metoda 4: Vue/Nuxt s Contentful

Pro aplikace Vue nebo Nuxt.js používající Contentful:

Nuxt 3:

1. Přidejte do svého 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. Přidejte do index.html před </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: Statické HTML s Contentful API

Pokud používáte Content Delivery API Contentful s čistým JavaScriptem:

1. Přidejte embed kód do svého HTML souboru před uzavírací značku </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. Uložte soubor a nahrajte na hosting

Krok 2: Ověření instalace

Po přidání kódu chatbota na váš web postavený na Contentful proveďte nasazení nebo spusťte vývojový server. Navštivte svůj web v nové záložce prohlížeče nebo v anonymním okně. V pravém dolním rohu byste měli vidět tlačítko chatovacího widgetu. Klikněte na něj a ověřte, že se správně otevírá a funguje.